requirejs使用

 

实现模块化、按需加载。html

一.配置参数jquery

1.baseUrl以一个相对于baseUrl的地址来加载全部的代码。canvas

  data-main,使用它来启动脚本加载过程,而baseUrl通常设置到与该属性相一致的目录。也能够经过config来配置。以下:api

若是没有显式指定config及data-main,则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。数组

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

2.定义模块:浏览器

defined:app

define(["my/cart", "my/inventory"],
    function(cart, inventory) {
        //return a function to define "foo/title".
        //It gets or sets the window title.
        return function(title) {
            return title ? (window.title = title) :
                   inventory.storeName + ' ' + cart.name;
        }
    }
)

3.require  引入模块化

requirejs(['jquery', 'canvas', 'app/sub'],
function   ($,        canvas,   sub) {
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});
//入參 三个。
context.require(deps, callback, errback)

 

4.paths 函数

path映射那些不直接放置于baseUrl下的模块名。设置path时起始位置是相对于baseUrl的,除非该path设置以"/"开头或含有URL协议(如http:)。requirejs

5.shim: 为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本作依赖和导出配置。

若是shim对象的value值里的对象有init会先执行并返回 赋值 给 exportsFn,不然 有export会返回export,不然返回公共的export。赋值 给 exportsFn。

处理函数以下:

//处理shim配置的exports
            makeShimExports: function (value) {
                function fn() {
                    var ret;
                    if (value.init) {
                        ret = value.init.apply(global, arguments);
                    }
                    return ret || (value.exports && getGlobal(value.exports));
                }
                return fn;
            },

 

RequireJS 2.0.*中,shim配置中的"exports"属性能够是一个函数而不是字串。这种状况下它就起到上述示例中的"init"属性的功能。 RequireJS 2.1.0+中加入了"init"承接库加载后的初始工做,以使exports做为字串值被enforceDefine所使用。

那些仅做为jQuery或Backbone的插件存在而不导出任何模块变量的"模块"们,shim配置可简单设置为依赖数组:

6.map: 对于给定的模块前缀,使用一个不一样的模块ID来加载该模块。

另外在map中支持“*”,意思是“对于全部的模块加载,使用本map配置”。若是还有更细化的map配置,会优先于“*”配置。

requirejs.config({
    map: {
        '*': {
            'foo': 'foo1.2'
        },
        'some/oldmodule': {
            'foo': 'foo1.0'
        }
    }
});

意思是除了“some/oldmodule”外的全部模块,当要用“foo”时,使用“foo1.2”来替代。对于“some/oldmodule”本身,则使用“foo1.0”。

相关文章
相关标签/搜索