使用requirejs编程实现模块化

时间：2022-07-14 22:26:16

下载

命令行下载：bower install requirejs 或者 npm install requirejs
官网下载点击下载requirejs

主要方法

  • define定义模块
  • require 加载模块

案例一

目录结构

  • index.html
  • main.js
  • scripts
    • apple.js
    • student.js

index.html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>requirejs模块化编程</title></head>
<body>
<h3>requirejs模块化编程</h3>
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script src="./main.js"></script>
</body>
</html>

main.js部分

//配置依赖路径
requirejs.config({
    baseUrl: './scripts'
});

//依赖student模块，并调用该模块eat()方法
require(['student'], function (stu) {
    stu.eat()
});

apple.js部分

//apple为当前模块名
define('apple', function () {
return {
        name: 'apple fruits'
    }
});

student.js部分

//apple为依赖模块名
//student为当前模块名
define('student', ['apple'], function (apple) {
return {
        eat: function () {
            console.log(apple.name);
        }
    }
});

特点：

  • 模块名必须与文件名相同
  • 其实模块名可以不写的

案例二

目录结构

  • index.html
  • main.js
  • scripts/
    • appleModule.js
    • studentModule.js

  • bower_components/jquery/dist/

    • jquery.min.js

    index.html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>requirejs模块化编程</title></head>
<body>
<h3>requirejs模块化编程</h3>
<div id="box">Lorem ipsum dolor sit amet.</div>
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script src="./main.js"></script>
</body>
</html>

main.js部分

//配置项，在主入口js文件配置即可，其他模块都可调用paths模块
requirejs.config({
//所有的require依赖根路径都是baseUrl
    baseUrl: './scripts',
//路径可以是数组，如果第一个加载成功则结束，否则加载后面的文件
    paths:{
'jquery': [
'../bower_components/jquery/dist/jquery.min', //本地加载jquery
'http://code.jquery.com/jquery-1.12.4' //cdn加载jquery
        ],
'student': 'studentModule',
'apple': 'appleModule'
    }
});

//依赖config配置项命名的student模块
require(['student'], function (stu) {
//调用student模块的eat()和say()方法
    stu.eat();
    stu.say();
});

studentModule.js部分

//注意，这里并没有给模块命名，所以主入口可以随便定义模块名
//依赖jquery和apple模块
define(['jquery', 'apple'], function ($, apple) {
const student = {};
    student.name = 'zhangsan';
    student.eat = function () {
        console.log(this.name + ' like ' + apple.name);
    };
    student.say = function () {
var str = 'I eat '
            + apple.num + apple.unit + ' ' + apple.name
            + ', and pay ' + apple.total().toFixed(2) + 'RMB everyday.';
        $('#box').text(str);
    };
//总之，返回一个对象就行
return student;
});

appleModule.js部分

//注意，这里并没有给模块命名，所以主入口可以随便定义模块名
define(function () {
const apple = {};
    apple.name = 'apple';
    apple.num = 5;
    apple.price = 10;
    apple.unit = 'kg';
    apple.total = function () {
return this.num * this.price
    };
//总之，返回一个对象就行
return apple;
});

重点内容

  • 不需要定义模块名，同时还可以通过配置项自定义模块名

  • 因为没有模块名，文件名也不受约束

  • 一次配置，多处依赖

标签：

相关文章