我的模块加载系统 v3

近一年来，外国非常热衷异步加载的研究。为了加快页面的载入速度，无阻塞的动态script注入的应用重新回到舞台的中心。LAB.js，ControlJS ,Head JS, yepnopejs, $script.js,NBL JohnnyDepp.js loadrunner还有基于jquery的RequireJS，嘛，它已是另一个层面的东西，还搞了一个术语AMD（Modules/AsynchronousDefinition）来唬人。国内的，暂时只有岁月如歌的 SeaJS 比较有名。说是顺应潮流也好，跟风凑热闹也好，我也升级了我的模块加载系统，取名为并行加载器，作为我的框架的核心模块而存在。

为方便起见，用定时器进行哈希检测代替本来需要的script回调函数验证。require，declare与provide这些方法名听岁月如歌说的某一套标准制定的东西。嘛，我单是觉得名字好用借来用用，并不遵循它的条规行事的。

下面是它的一些API介绍:

dom.require(dependList,callback)：请求模块。

 

dependList为依赖列队，可以为字符串或数组。如果在字符串状态下表示多个模块，请用逗号隔开。如果依赖模块的JS文件与核心模块的JS文件不在同一个文件夹下，可以使用“/”隔开，或者后面用小括号指定具体路径,亦即"path/path/moduleName(url),path/path/moduleName(url)"的格式，可以简化为"moduleName(url)", "path/path/moduleName"。moduleName可以包含"."号。callback为回调函数，没有什么好说的。

 

dom.provide(array,hash,callback)：提供模块。

 

array为数组，里面为经过处理的模块名，换言之，不再包含path或url。hash，用于注册与验证模块名，标识这个模块已经加载过了。callback为回调函数。

 

dom.declare(moduleName,dependList,callback)：声明模块。

 

此方法只是dom.require方法的一个简单封简而已，用于保证其回调函数在依赖模块都加载的情况下安全执行。moduleName为模块名，不能有path与url，dependList、callback这两个参数与dom.require相同。

作为约定，模块名应该与其所在的JS文件名相同，但也允许不一样（到时请用小括号指定具体路径），一个JS文件也可以放置多个模块，这时我抛弃使用script.onload与script.onreadystatechange来验证模块加载成功的原因，它们只在移除script节点本身时发挥效力。

王婆卖瓜，自吹一下优点：

1. 按需加载
2. 无阻塞
3. 实现JS颗粒化管理
4. 解决Ajax无法处理的跨域问题
5. 模块自动处理依赖
6. 以后还考虑文件合并的问题

;;;(function(WIN,DOM,undefined){

    var

    reg_module_name = /(?:^|\/)([^(\/]+)(?=\(|$)/,

    reg_module_url = /\(([^)]+)\)/,

    reg_multi_module = /\s*,\s*/g,

    _dom = WIN.dom,

    dom = {

        mix : function(target, source ,override) {

            var i, ride = (override === void 0) || override;

            for (i in source) {

                if (ride || !(i in target)) {

                    target[i] = source[i];

                }

            }

            return target;

        },

  

        noConflict: function(  ) {//防止命名冲突，请先行引用其他库再引用本框架

            WIN.dom = _dom;//这是别人的

            return dom;//请赋以其一个命名空间

        },

        //请求模块

        require:function(dependList,callback){

            var self = arguments.callee

            var moduleNames = [], i =0, hash = self.loadedModules,

               re = reg_multi_module, reg = reg_module_name ,moduleName, str;

            if(typeof dependList === "string"){

                dependList  = dependList.split(re)

            }

            while(str = dependList[i++]){

                moduleName = str.match(reg)[1];

                if(!hash[moduleName]){

                    moduleNames.push(moduleName);

                    self.appendScript(str);

                }

            }

            this.provide(moduleNames,hash,callback)

        },

        //声明模块

        declare:function(moduleName,dependList,callback){

            var hash = this.require.loadedModules;

            this.require(dependList,function(){

                callback();

                hash[moduleName] = 1

            })

        },

        //提供模块

        provide:function(array,hash,callback){

            var flag = true, i = 0, args = arguments, fn = args.callee, el;

            while(el = array[i++]){

                if(!hash[el]){

                    flag = false;

                    break;

                }

            }

            if(flag){

                callback();

            }else{

                //javascrpt最短时钟间隔为16ms，这里取其倍数

                //http://blog.csdn.net/aimingoo/archive/2006/12/21/1451556.aspx

                setTimeout(function(){

                    fn.apply(null,args)

                },32);

            }

        }

    }

    dom.mix(dom.require, {

        loadedModules:{},

        requestedUrl: {},

        //http://www.cnblogs.com/rubylouvre/archive/2011/02/10/1950940.html

        getBasePath:function(){

            var url;

            try{

                a.b.c()

            }catch(e){

                url = e.fileName || e.sourceURL;//针对firefox与safari

            }

            if(!url){

                var script = (function (e) {

                    if(!e) return null;

                    if(e.nodeName.toLowerCase() == 'script') return e;

                    return arguments.callee(e.lastChild)

                })(DOM);//取得核心模块所在的script标签

                url = script.hasAttribute ?  script.src : script.getAttribute('src', 4);

            }

            url = url.substr( 0, url.lastIndexOf('/'));

            dom.require.getBasePath = function(){

                return url;//缓存结果，第一次之后直接返回，再不用计算

            }

            return url;

        },

        appendScript:function(str){

            var module = str, reg = reg_module_url, url;

            //处理dom.node(http://www.cnblogs.com/rubylouvre/dom/node.js)的情形

            var _u = module.match(reg);

            url = _u && _u[1] ? _u[1] : this.getBasePath()+"/"+ str + ".js";

            if(!this.requestedUrl[url]){

                 this.requestedUrl[url] = 1;

                 var script = DOM.createElement("script");

                 script.charset = "utf-8";

                 script.defer = true;

             //  script.async = true;//不能保证多个script标签的执行顺序

                script.src = url;

            //避开IE6的base标签bug

            //http://www.cnblogs.com/rubylouvre/archive/2010/05/18/1738034.html

                DOM.documentElement.firstChild.insertBefore(script,null);//

                this.removeScript(script); 

            }

             

        },

        removeScript:function(script){//移除临时生成的节点

            var parent = script.parentNode;

            if(parent&&parent.nodeType === 1){

                script.onload = script.onreadystatechange = function(){

                    if (-[1,] || this.readyState === "loaded" || this.readyState === "complete" ){

                        if (this.clearAttributes) {

                            this.clearAttributes();

                        } else {

                            this.onload = this.onreadystatechange = null;

                        }

                        parent.removeChild(this)

                    }

                }

            }

        }

    });

    //先行取得核心模块的URL

    dom.require.getBasePath();

    window.dom = dom;

})(this,this.document);

示例：

<!doctype html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>并行加载器 by 司徒正美</title>

        <script src="dom.js"></script>

        <script>

            dom.require("dom/string,dom/array",function(){

                window.console && window.console.log("这是回调函数")

                dom.query("调用子模块的方法")

            });

 

        </script>

    </head>

    <body>

        <h1>并行加载器 by 司徒正美</h1>

        <p>请用FF的firebug观察效果</p>

    </body>

</html>

其他依赖模块的内容：

//string.js

dom.declare("string","dom/query",function(){

    window.console && window.console.log("已加载string模块");

});

 

//array.js

dom.declare("array","dom/node",function(){

    window.console && window.console.log("已加载array模块")

});

//query.js

dom.declare("query",[],function(){

    window.console && window.console.log("已加载query模块")

    dom.query = function(str){

        window.console && window.console.log(str)

    }

});

//node.js

dom.declare("node",[],function(){

    window.console && window.console.log("已加载node模块")

});

文件目录图

加载顺序图

如果对它有兴趣，可在点此下载看一下。

如果您觉得此文有帮助，可以打赏点钱给我支付宝1669866773@qq.com ，或扫描二维码