RequireJS学习笔记

Alex — Wed, 24 Feb 2016 01:28:12 +0000

基础知识

JS模块系统

所谓模块化，是指应用程序由一组高度解耦的、存放在不同模块中的独特功能构成。

开源框架和ES6引入了多个JavaScript模块化系统：

AMD（Asynchronous Module Definition，异步模块定义），RequireJS使用的模块化系统，浏览器优先
CommonJS，Node.js使用的模块化系统，主要用于服务器端JS开发的模块化支持，同步化加载
ES6模块化系统，语言级别的支持

模块加载器

模块系统仅仅是一套规范，浏览器并不理解这些规范。要加载模块，需要模块加载器的配合：

RequireJS，理解AMD规范
SystemJS，支持多种模块系统，包括AMD, CommonJS, ES6
es6-module-loader：一个支持ES6模块的垫片库
Browserify，让浏览器可以使用CommonJS模块系统

RequireJS简介

RequireJS是一个JavaScript文件和模块加载器，主要用于浏览器中，也支持Node.js之类的后端JavaScript运行环境。使用RequireJS有利于提高加载速度（异步）、帮助提高代码质量（模块化）。

RequireJS是AMD规范的实现，比起同步化的CommonJS规范，AMD更加适用于浏览器环境。

RequireJS支持绝大部分浏览器，包括IE 6.0。

可以到http://requirejs.org/docs/download.html下载RequireJS。

HelloWorld

为了有效的利用RequireJS优化工具，你应当把所有内联的脚本移出HTML文件。并且，在HTML中仅仅引用require.js：





RequireJS Study

如果要避免RequireJS的加载动作阻塞UI渲染，可以把

在data-main入口点调用此函数也是可以的，但是要注意data-main脚本的异步加载特性。

另外，你可以在RequireJS加载前，在全局变量require中存放配置信息：

配置项列表

配置项	说明
baseUrl	查找所有模块（除非匹配paths）对应文件时，使用的基础URL前缀。支持跨域加载
paths	用于映射不存放在baseUrl下面的模块，可以指定模块的多个备选加载位置： requirejs.config( { enforceDefine: true, paths: { jquery: [ //优先从CND加载 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min', //如果失败，从本地目录加载 'lib/jquery' ] } } );
shim	为那些非标准模块（没有使用define定义，且符合AMD规范）执行依赖和导出配置
map	执行模块标识符映射，用于从不同位置加载不同模块的依赖项，对于使用多个库版本的大型项目有用： requirejs.config( { map : { // 支持通配符，匹配所有没有详细规定的模块 '*' : { 'jquery' : 'jquery-2.2.2' }, // 对于新模块，加载1.7版本的jQuery依赖 'app/newmodule' : { 'jquery' : 'jquery-1.7' }, // 对于旧模块，加载1.0版本的jQuery依赖 'app/oldmodule' : { 'jquery' : 'jquery-1.0' } } } );
config	用于向某个模块传递（应用级别的）配置信息： requirejs.config( { config : { 'bar' : { size : 1 } } } ); // bar.js define( function( require, exports, module ) { var size = module.config().size; } ); 注意，当向一个包传递配置信息时，应该把包的主模块（Main module）作为键，而不是包ID： requirejs.config( { config : { 'pkg/index' : { // 向包传递配置时，这里必须使用包的主模块 apiKey : 'XJKDLNS' } }, packages : [ { // 声明一个pkg包，主模块为index name : 'pkg', main : 'index' } ] } );
packages	用于从CommonJS包中加载模块
nodeIdCompat	Node.js将app.js和app看做同一个模块标识符，在RequireJS中默认不是。将此配置项设置为true，可以和Node.js兼容
waitSeconds	加载一个脚本的超时秒数，默认7。设置为0则永不超时
context	用于在同一个页面加载一个模块的多个版本
deps	声明一个依赖的数组，这些依赖在require被定义后，立即异步的加载
callback	当deps加载完毕后执行的回调函数
enforceDefine	如果设置为true，RequireJS发现加载的JS没有调用define()且不具有可供检查的shim导出字符串值时，会抛出异常
xhtml	如果设置为true，RequireJS使用document.createElementNS()来创建script元素
urlArgs	RequireJS获取资源时，使用的额外URL参数，形式： pname1=pval1&pname2=pval2 从2.2.0版本开始，此参数可以是一个函数： // id模块标识符，url依赖的URL function(id,url){};
scriptType	脚本的MIME类型，默认text/javascript
skipDataMain	从2.1.9开始，设置为true，则不会尝试去寻找data-main属性。当RequireJS被嵌入到一个工具库中时有用

shim配置：和非AMD兼容的脚本一起工作

shim用于描述非标准模块的特征，你可以声明非标准模块的依赖项和“导出符号”。导出符号（exports）指出非标准模块中的哪一个全局变量代表此模块：

console.log( 'Module: Utils loaded.' );

console.log( 'Module: StringUtils loaded.' );
var StringUtils = {
    /**
     *
     * @param {String} str
     * @param {String} search
     */
    indexOf: function ( str, search ) {
        return str ? str.indexOf( search ) : -1;
    }
}
var StringUtilsBase = {};

 require.config(
    {
        baseUrl: 'js',
        shim: {
            'utils/StringUtils': {
                // 确保Utils.js先于StringUtils.js加载，尽管两者都不遵循AMD规范
                deps: [ 'utils/Utils' ],
                // 在StringUtils.js中定义的全局变量StringUtils代表模块
                exports: 'StringUtils'
            }
        }
    }
);
require( [ 'utils/StringUtils' ], function ( SU ) { //SU == StringUtils，由于exports配置
    console.log( StringUtils.indexOf );
    console.log( SU.indexOf );
} );

上述代码运行结果如下：

Module: Utils loaded.
Module: StringUtils loaded.
function ( str, search ) { return str ? str.indexOf( search ) : -1; }
function ( str, search ) { return str ? str.indexOf( search ) : -1; }

你还可以指定init配置项，这是一个函数，其返回值代表模块：

require.config(
    {
        baseUrl: 'js',
        shim: {
            'utils/StringUtils': {
                init: function () {
                    return {
                        StringUtils: StringUtils,
                        StringUtilsBase: StringUtilsBase
                    }
                }
            }
        }
    }
);

init和exports配置项冲突，不得联用。

package配置：从CommonJS包中加载模块

RequireJS支持CommonJS的Package规范，可以从中加载模块。每个CommonJS包可以分配一个模块名称/前缀，对于每个包，其package配置可以指定以下属性：

name：包的名称，用于模块名称/前缀映射
location：包的位置，此URL相对于baseUrl，除非包含http/https或者以/开始
main：包中的一个模块的名称，当某个脚本对包名进行require时，会自动require此“主模块”，默认值为main

package配置的示例：

require.config(
    {
        //这里声明了两个保
        packages: [
            "cart",
            {
                name: "store",
                main: "store" //指定主模块
            }
        ]
    }
);
require( ['cart'],function(cart){} ); //cart/main.js会被加载

错误处理

RequireJS遇到的错误一般是404，或者通信超时，RequireJ提供了几种错误处理方式：

在调用require时指定回调，举例：

require( [ 'jquery' ], function ( $ ) {
}, function ( err ) { //第二个参数是错误处理回调
    var failedId = err.requireModules && err.requireModules[ 0 ];//requireModules为失败的模块的列表
    if ( failedId === 'jquery' ) {
        // 取消jQuery的定义，重新配置和加载
        requirejs.undef( failedId );
        requirejs.config(
            {
                paths: {
                    jquery: 'local/jquery'
                }
            }
        );
        require( [ 'jquery' ], function () {
        } );
    }
} );

使用path配置，指定模块的备选加载路径

全局错误处理回调requirejs.onError，距离：

requirejs.onError = function (err) {
    console.log(err.requireType);
    if (err.requireType === 'timeout') {
        console.log('modules: ' + err.requireModules);
    }
    throw err;
};

插件

RequireJS通过插件机制来扩展其功能，这些插件和require.js分开维护，需要单独下载。

text插件

用于加载文本资源，任何以

text!

开头的模块被作为纯文本看待，示例：

require(
    [ "some/module", "text!some/module.html", "text!some/module.css" ],
    function ( module, html, css ) {
        //变量html的内容是some/module.html
        //变量css的内容是some/module.css
    }
);

text插件使用XHR来加载目标模块，注意CORS问题。

domReady插件

可以在页面加载完毕后执行特定的逻辑：

require( [ 'domReady' ], function ( domReady ) {
    domReady( function () {
        //这里的逻辑将在页面加载完毕后执行
    } );
} );

//更加简洁的方式：
require( [ 'domReady!' ], function ( doc ) {
   //这里的逻辑将在页面加载完毕后执行，入参是当前document对象
} );

FAQ

函数requirejs和require有什么区别

没有任何区别，仅仅在require这个名称已经被使用的情况下，才需要使用requirejs。

The post RequireJS学习笔记 appeared first on 绿色记忆.

绿色记忆 » RequireJS

RequireJS学习笔记