requireJS知识点

data-main属性：

<script src="script/require.js" data-main="script/app.js"></script>

这里指定了根是app.js，只有直接或间接与app.js有关的依赖关系的模块才会被插入到html中。

 

require.config() 配置

其参数为一个配置对象，配置项及含义如下：

  baseUrl --> 用于加载模块的根路径

  paths --> 用于映射不存在根路径下面的模块路径

  shims --> 配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用requireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim。

  deps --> 加载依赖关系数组

requirejs.config({
    // 默认情况下从这个文件开始去拉取资源
    baseUrl: 'script/app',
    // 如果你的依赖模块以pb头，会从script/pb加载模块
    path: {
        pb: '../pb'
    },
    // load backone as a shim，所谓就是将没有采用的requirejs方式定义
    // 模块的东西转变为requirejs模块
    shim: {
        'backone':{
            deps:['underscore'],
            exports:'Backone'
        }
    }
});

 

define()函数：

该函数用于定义模块，形式如下：

// logger.js

define(['a', function(a){
    'use strict';
    function info(){ console.log('我是个私有函数'); }
    return {
        name: '一个属性',
        test: function(a){
            console.log(a + '你好！');
            a.f();
            info();
        }
    };
}]);

define函数接受两个参数。

第一个参数 --> 是一个字符串数组，表示你定义的模块依赖的模块，这是依赖模块a。

第二个参数 --> 是一个函数，参数是注入前面依赖模块，顺序同第一个参数顺序。在函数中可做逻辑处理，通过return一个对象暴露模块的属性和方法，不再return中的可认为是私有方法和私有属性。

 

require()函数：

该函数用于调用定义好的模块，可以是用define函数定义的，也可以是一个shim，形式如下：

// app.js

require(['logger'], function(logger){
    logger.test('大熊');
    console.log(logger.name);
});

// 输出结果：
// 大熊你好！
// 不确定（取决于a模块的f方法）
// 我是私有函数
// 一个属性

依赖一个不适用requirejs方式的库：

hello.js如下：

function helloFun(){
    console.log('hello,world~');
}

配置方式如下：

requirejs.config({
    baseUrl: '/public/js',
    path: {
        hello: 'hello'
    },
    shim: {
        hello: { exports: 'helloFun'}
    }
});

引入方式如下：

requirejs(['hello'], function(hello){
    hello();
});

暴露多个变量：init

hello.js如下：

function fun1(){
    console.log('111111');
}

function fun2(){
    console.log('22222');
}

配置如下：

requirejs.config({
    baseUrl: '/public/js',
    path: {
        hello: 'hello'
    },
    shim: {
        hello: {
            init:function(){
                return {
                    fun1: fun1,
                    fun2: fun2,
                };
            }
        }
    }
});

引入方式如下：

requirejs(['hello'], function(hello){
    hello.fun1();
    hello.fun2();
});

当exports与init同时存在的时候，exports将被忽略。

 

无主的与有主的模块：

define('jquery', [], function(){ ... });

这里的jquery表示给当前这个模块起了名字jquery，它已经是有主的了，只能属于jquery

在使用一个第三方的时候，一定要注意它是否声明了一个确定的模块名。

define([...], function(){ ... });

上面这个是无主模块。可以在 requirejs.config 里，使用任意一个模块名来引用它。大部分的模块就是无主的。

挖墙脚：

对于有主的模块，不把它们当做满足 requirejs 规范的模块，而当作普通js库，然后在 shim 中导出它们定义的全局变量。

requirejs.config({
    baseUrl: '/public/js',
    path: {
        myjquery: 'lib/jquery/jquery'
    },
    shim: {
        myjquery: { exports: 'jQuery' }
    }
});

requirejs(['myjquery'], function(jq){
    console.log(jq);
});

如何不让jquery污染全局的$：

requirejs.config({
    baseUrl: '/public/js',
    path: {
        jquery: 'lib/jquery/jquery',
        'jquery-private': 'jquery-private'
    },
    map: {
        '*': { 'jquery':'jquery-private' },
        'jquery-private': { 'jquery':'jquery' }
    }
});

requirejs(['jquery'], function(jq){
    console.log($);
});

Map参数 -- Map参数是用来解决同一个模块不同版本的问题，比如在项目开发中，开发初期使用了jquery1.7版本，但是由于业务的需求需要引入jquery1.9以上的版本时候，但是又担心有些依赖于jquery1.7的代码升级到1.9以上的时候会有问题，因此可以让一部分代码还是依赖于jquery1.7，新增的代码依赖于jquery1.9。

现在在入口文件 app.js 添加如下代码：

requirejs.config({
    map:{
        'app/a':{ 'jquery':'js/lib/jquery1.7.js'},
        'app/b':{ 'jquery':'js/lib/jquery1.9.1.js'}
    },
});

require(['app/a'], function(jq){ ... });

require(['app/b'], function(jq){ ... });

然后在 app/a.js 添加如下代码：

// a.js

define(function(require, exports, module){
    var a = require(['jquery']);
});

在 app/b.js 添加如下代码：

// b.js

define(function(require, exports, module){
    var b = require(['jquery']);
});

在app.js中

require(['app/a'], function(jq){ });时候，在加载 app/a.js 的时候回加载jquery1.7.js文件，在加载app/b.js的时候会加载jquery1.9.1.js。

config参数 -- config是指需要将配置信息传给一个模块，这些配置往往是 application 级别的信息，需要一个手段将他们向下传递个模块。在requireJS中，基于require.config()的config配置项来实现。要获取这些信息的模块可以加载特殊的依赖“module”，并调用module.config()。

app.js代码如下：

requirejs.config({
    config:{
        'app/c':{ size':'large'},
        'app/d':{ color:'blue'}
    },
});

require(['app/c'], function(c){
    console.log(c);
});

require(['app/d'], function(d){
    console.log(d);
});

在 c.js 里面的代码：

define(function(require, exports, module){
    // 其值是 'large'
    var size = module.config().size;
    return size;
});

d.js代码：

define(['module'], function(module){
    // Will be the value 'blue'
    var color = module.config().color;
    return color;
});