初识requireJS

requireJS

requireJS的作用

  • 实现js文件的异步加载,避免一次性加载过多的js文件,网页失去响应
  • 管理模块之间的依赖性,便于代码的依赖和维护

使用

使用前,需要加载require.js 和配置app.js,引入格式如下:

<script src="require.js" data-main="app.js"></script>
app.js配置格式

require.config({     //require.config主要用于修改require的默认配置
    baseUrl:'xxxx',  //这里是js文件放在总目录,paths中可以省略
    paths:{
        foo: 'foo',
        foo1: 'foo1' //前者是在js中用到名字,后者是要引入的模块名(已省略.js后缀)
    }
});
require(['module1','module2','module3'],function(module1,module2,module3){
    module1.foo();
    module2.foo()...
});

requirejs2.xx版本中,对于不符合AMD规范的模块,即

function foo(){

}
function foo(){

}....
不需要使用`shim`或者`init`暴露模块,直接调用模块内的方法名如`foo()`,而不是`module.foo()`; 使用了`shim`后,可直接调用模块内的方法名`foo()`或者`modulename()` `shim` `init`暴露模块
require.config({
    baseUrl:'',
    paths:{
    },
    shim:{
        modulename:{exports: 'functionName'},
        backbone:{
            deps:['underscore'],    //依赖underscore
            exports:'backbone'      //模块名字backbone
        }
        ...
        modulename:{
            init: function(){
                return {
                    foo1: functionName,
                    foo2: functionName
                }
            }
        }
    }

})

1.没用requirejs实现之前,不依赖其他js库实现模块化

define(function(){
    ...
})

一般js实现方法

var module = (function(){
    ...
    _variable: xxx;     
    foo: function(){}
    return {
        foo: foo
    }
}());

2.依赖其他js库(模块扩展)

define(['a'],function(a){
    a.foo();
    ...
    return {
        ...
    }
});

一般js实现方法

var module1 = (function(module){
    ...
    module.newfoo = function(){
        //扩展module
    }
    return module1;
}(module));

似乎使用requirejs并不会产生其他的全局变量,传统使用命名空间法避免产生过多的全局变量的方法如下

var GLOBAL={};       //将所有的变量都挂在GLOBAL的这一全局变量上
GLOBAL.namespace = function(str){   //传入新建的变量str
    var arr= str.split('.'),o=GLOBAL;
    //str的形式如GLOBAL.a或a或a.b
    for(i=(arr[0]==="GLOBAL")?1:0;i < arr.length;i++){
    //如果首元素为GLOBAL,直接读取第二个,因为GLOBAL已存在,后续元素才是需要挂载到GLOBAL对象上
        o[arr[i]]=o[arr[i]]||{};
        //第一次o是GLOBAL对象,如果GLOBAL.arr[i]不存在,则新建对象,如果存在,则不改变
        o=arr[arr[i]]
        //此处是往第二第三...更后的对象递进,开辟空间
    }
};

requireJS注意点

  • 回调函数中最后都会返回一个对象{},其中以对象字面量的形式返回define中定义的函数和属性,让其他模块可以引用,而require函数不需要return语句