require.js

RequireJS 是一个JavaScript模块加载器,非常适用在浏览器中使用。

引入库

其中script标签的data-main属性表示入口文件的引入路径


require.js三板斧:require define require.config

  • require: 调用模块
  • define: 定义模块
  • require.config: 配置模块

require:

// 第一个参数依赖的模块,第二个为回调函数
// 注意:a.js表示相对于html文件的路径,写a是相对于script标签的data-main定义文件的相对路径
// 回调函数参数表示a,b模块返回的对象
// requirejs AMD规范,提前把要依赖的模块家载好,再执行后面的回调
// seajs  CMD规范,不需要提前执行,顺序执行加载(即使用到的时候执行加载)
require(['a', 'b'], function(a, b) {
    console.log(a.sum(2, 5));
    console.log(b.mult(2, 5));
});

define:

// a.js
define(function() {
    function sum(a, b) {
        return a+b;
    }

    return { // return 表示暴露给外面的对象
        sum : sum
    };
});
// b.js
define(function() {
    function mult(a, b) {
        return a * b;
    }

    return {
        mult : mult
    };
});

require.config:

require.config({
    baseUrl : 'js', // 根目录
    paths: {
        tools: ['libs/tools'] // 定义模块名与模块文件的映射关系,也可以设置数组,前面如果找不到就找后面的,一般用户cdn的备选方案
    }
})

require(['a', 'b', 'tools'], function(a, b, tools) {
    console.log(a.sum(2, 5));
    console.log(b.mult(2, 5));
    console.log(tools.sayHello('Jack'));
});
// libs/tools.js
define(function() {
    function hello(name) {
        return 'hello ' + name + ' !';
    }

    return {
        sayHello: hello
    };
})

你可能感兴趣的:(require.js)