javascript框架设计读书笔记之模块加载系统

模块加载，其实就是把js分成很多个模块，便于开发和维护。因此加载很多js模块的时候，需要动态的加载，以便提高用户体验。

在介绍模块加载库之前，先介绍一个方法。

动态加载js方法：

代码如下:
function loadJs(url , callback){
　　var node = document.createElement("script");
      node[window.addEventListener ? "onload":"onreadystatechange"] = function(){
            if(window.addEventListener || /loaded|complete/i.test(node.readyState)){
　　　　　　callback();
　　　　　　node.onreadystatechange = null;
　　　　}                                                                            
　　}
　　node.onerror = function(){};
     node.src = url;
　　var head = document.getElementsByTagName("head")[0];
　　head.insertBefore(node,head.firstChild);     //插入到head的第一个节点前，防止ie6下head标签没闭合前，使用appendChild报错。　
}

由于司徒正美使用了它写的mass框架来介绍模块加载，而业界用的最多的是require.js和sea.js。因此，我觉得他个性有点强。

我来讲下sea.js的模块加载过程吧：

页面chaojidan.jsp，在head标签中，引入sea.js，这时就会得到seajs对象。

同时引入index.js。

index.js的代码如下：

代码如下:
seajs.use(['./a','jquery'],function(a,$){
    var num = a.a;
    $('#J_A').text(num);
})

a.js :

代码如下:
define(function(require,exports,module){
    var b = require('./b');
    var a = function(){
        return 1 + parseInt(b.b());
    }
    exports.a = a;
})

b.js :

代码如下:
define(function(require,exports,module){
   var c = require('./c');

    var b = function(){
        return 2 + parseInt(c.c());
    }
    exports.b = b;
})

c.js :
代码如下:
define(function(require,exports,module){
    var c = function(){
        return 3;
    }
    exports.c = c;
})