zoukankan      html  css  js  c++  java
  • 我的模块加载系统 v6

    模块系统是我框架的核心模块的一部分,与domReady彻底地整合在一起。当然核心模块还提供了其他常用方法,如数组化,类型判定,简单的事件绑定...本版本主要是对类型判定进行优化与重写模块加载,以更优雅的方式处置循环依赖的问题。

    (function(global,DOC){
        var 
        _dom = global.dom,
        hash = "#",
        namespace = escape(DOC.URL.split(hash)[0]),
        HEAD = DOC.head || DOC.getElementsByTagName("head")[0],
        class2type = {
            "[object HTMLDocument]"   : "Document",
            "[object HTMLCollection]" : "NodeList",
            "[object StaticNodeList]" : "NodeList",
            "[object IXMLDOMNodeList]": "NodeList",
            "[object DOMWindow]"      : "Window"  ,
            "null"                    : "Null"    ,
            "NaN"                     : "NaN"     ,
            "undefined"               : "Undefined"
        },
        toString = class2type.toString;
        /**
         * 糅杂,为一个对象添加更多成员
         * @param {Object} target 目标对象
         * @param {Object} source 属性包
         * @param {Boolean|undefined} override
         * @return  {Object} 目标对象
         */
        function mix(target, source, override) {
            var key,  ride = (override === void 0) || override;
            for (key in source) {
                if (ride || !(key in target)) {
                    target[key] = source[key];
                }
            }
            return target;
        }
        /**
         * @class dom
         * dom Framework拥有两个命名空间,
         * 第一个是escape(DOC.URL.split("#")[0]),根据页面的地址动态生成
         * 第二个是dom,我们可以使用别名机制重写它
         * @namespace dom
         */
        var dom = function(expr,context){
            if(typeof expr === "function"){
                dom.ready(expr, true);
            }else{
                if(!dom.fn)
                    throw "must load the 'node' module!"
                return new dom.fn.init(expr,context);
            }      
        }
    
        mix(dom,{
            uuid:1,
            HTML:DOC.documentElement,
            HEAD:HEAD,
            rword:/[^, ]+/g,
            rreadystate: /loaded|complete|undefined/i,
            "@name":"dom",
            "@debug":true,
            "@emitter": DOC.dispatchEvent ? "addEventListener" : "attachEvent",
            /**
             * 别名机制(相当于jquery的noConflict)
             * @param {String} name 新的命名空间
             */
            exports: function(name) {
                _dom && (global.dom = _dom);
                name = name || dom["@name"];
                dom["@name"] = name ;
                global[name] = global[namespace] = this;
            },
            /**
             * 数组化
             * @param {ArrayLike} nodes 要处理的类数组对象
             * @param {Number} start 可选。要抽取的片断的起始下标。如果是负数,从后面取起
             * @param {Number} end  可选。规定从何处结束选取
             * @return {Array}
             */
            slice: function (nodes, start, end) {
                for(var i = 0,n = nodes.length, result = []; i < n; i++){
                    result[i] = nodes[i];
                }
                if (arguments.length > 1) {
                    return result.slice(start , (end || result.length));
                } else {
                    return result;
                }
            },
            /**
             * curry化
             * @param {Any} a
             * @return {Function} 新函数
             */
            K:function (a) {
                return function() {
                    return a;
                };
            },
            /**
             * 用于取得数据的类型或判定数据的类型
             * @param {Any} obj 要检测的东西
             * @param {String} str 要比较的类型
             * @return {String|Boolean}
             */
            type : function(obj, str){
                var result = class2type[ (obj == null || obj !== obj )? String(obj) :  toString.call(obj)  ] || obj.nodeName || hash;
                if( result.charAt(0) === hash){//兼容旧式浏览器与处理个别情况,如window.opera
                    if(obj.window==obj){
                        result = 'Window'; //返回构造器名字
                    }else if(obj.nodeType === 9) {
                        result = 'Document';//返回构造器名字
                    }else if(  obj.callee ){
                        result = 'Arguments';//返回构造器名字
                    }else if(isFinite(obj.length) && obj.item ){
                        result = 'NodeList';//处理节点集合
                    }else if(obj.open && obj.send ){
                        result = "XMLHttpRequest";
                    }else{
                        result = toString.call(obj).slice(8,-1);
                    }
                }
                if(str){
                    return str === result;
                }
                return result;
            },
      
            /**
             * 用于调试
             * @param {String} s
             */
            log:function(s){
                global.console && global.console.log(s);
            },
            /**
             * 生成键值统一的对象,用于高速化判定
             * @param {Array} array
             * @param {Number} val 可选,默认为1
             * @return {Object}
             */
            oneObject : function(array, val){
                if(typeof array == "string"){
                    array = array.match(dom.rword) || []
                }
                var result = {},value = val !== void 0 ? val :1;
                for(var i=0,n=array.length;i < n;i++){
                    result[array[i]] = value;
                }
                return result;
            }
        });
        "Boolean,Number,String,Function,Array,Date,RegExp,Window,Document,Arguments,NodeList,XMLHttpRequest".replace(dom.rword,function(name){
            class2type[ "[object " + name + "]" ] = name;
        });
    
        // http://wp.moooori.com/archives/1911
        var 
        rmodule =  /([^(\s]+)\(?([^)]*)\)?/,
        //  rreadystate = /loaded|complete|undefined/i,
        method = DOC.dispatchEvent ? "onload" : "onreadystatechange",
        stack = [],//用于放置负回调
        checks = [],//用于放置正向回调或模块本身的wrapper函数
        status = {};//用于记录每个模块加载状态0 未注册 1 已注册 2 已加载 3已执行
        /**
         * 用于模拟opera的script onerror
         * http://d.hatena.ne.jp/NeoCat/20110206/1296934235
         * @param {String} name 模块名
         * @param {String} url  模块的路径
         * @param {Element} node 为加载这个模块临时生成的script节点
         */
        function fixOperaError(name, url, node){
            var iframe = DOC.createElement("iframe");
            var code = '<script src="'+dom.baseURL+'"><\/script>'+
                '<script src="'+url+'" onload="this.ownerDocument.x = 1"><\/script>';
            iframe.style.display = "none";
            HEAD.appendChild(iframe);
            var d = iframe.contentDocument;
            iframe.onload = function(){
                if(d.x == void 0){
                    removeScript(name, node, true);
                }
                iframe.onload = null;//opera无法在iframe被事件绑定时被移除
                HEAD.removeChild(this);
            };
            try{
                d.write(code);
                d.close();
            }catch(e){};
        }
        //执行并移除所有依赖都具备的模块或回调
        function resolveCallbacks(){
            for(var i = 0, obj; i < checks.length; i++){
                obj = checks[i];
                for(var name in status){
                    if(status[name] == 3 && obj.deps["@"+name]){
                        delete obj.deps["@"+name];
                        obj.length--;
                        dom["@debug"] &&  dom.log(obj.length+" "+name);
                    }
                }
                if(!obj.length){
                    obj.callback()
                    checks.splice(i--,1);
                }
            }
        }
        /**
         * 为加载模块而临时生成一个script节点
         * @param {String} name 模块名
         * @param {String} url  模块的路径
         */
        function appendScript(name, url){
            var node = DOC.createElement("script");
            url = url  || dom.basePath +"/"+ name + ".js" + (dom.DEBUG ? "?t="+new Date : "");
            node.charset = "utf-8";
            node.async = true;
            node.onerror = function(){
                removeScript(name, this, true);
            }
            node[method] = function(){
                if (dom.rreadystate.test(this.readyState) ){
                    for(var i =0 ; i < checks.length ;i++){
                        resolveCallbacks()
                    }
                    removeScript(name, this );
                }
            }
            node.src =  url+"?timestamp="+(+new Date);
            global.opera && fixOperaError(name, url, node);
            HEAD.insertBefore(node,HEAD.firstChild);
        }
        /**
         * 移除临时生成的script节点
         * @param {String} name 模块名
         * @param {Element} node 为加载这个模块临时生成的script节点
         * @param {Boolean} error 是否加载失败
         */
        function removeScript(name, node, error){
            var parent = node.parentNode;
            if(parent && parent.nodeType === 1){
                if(error || status[name] === 1){
                    dom.stack('dom.log("fail to load module [ '+name+' ]")');
                    dom.stack(true);//打印错误堆栈
                }
                if (node.clearAttributes) {
                    node.clearAttributes();
                } else {
                    node[method] = node.onerror = null;
                }
                parent.removeChild(node);
            }
        }
    
        mix(dom, {
            mix:mix,
            //绑定事件(简化版)
            bind : DOC.dispatchEvent ? function(el, type, fn, phase){
                el.addEventListener(type,fn, phase);
            } : function(el, type, fn){
                el.attachEvent("on"+type, function(){
                    fn.call(el,event);
                });
            },
            stack:function(fn){
                if(fn === true){
                    while(fn = stack.pop()){
                        fn();
                    }
                }else if(typeof fn === "string"){
                    stack.push(new Function(fn));
                }else if(typeof fn === "function"){
                    stack.push(fn);
                }
            },
            /**
             * <a href="http://www.cnblogs.com/rubylouvre/archive/2011/02/10/1950940.html">核心模块所在路径</a>
             * @property
             * @type String
             */
            basePath:(function(url, scripts, node){
                scripts = DOC.getElementsByTagName("script");
                node = scripts[scripts.length - 1]
                url = node.hasAttribute ?  node.src : node.getAttribute('src', 4);
                dom.baseURL = url;
                return url.substr( 0, url.lastIndexOf('/'));
            })(),
            /**
             * 请求模块
             * @param {String|Array} deps 依赖列表,如果是字符串请用逗号隔开,如果要指定具体路径请写到小括号中
             * @param {Function} module 正向回调
             * @param {Function} errback 负向回调
             * @param {Boolean} ready 是否延迟到DOM树建完才执行回调函数
             */
            require:function(deps,callback,errback){
                var names = [];
                (deps +"").replace(dom.rword,function(url,name,match){
                    match = url.match(rmodule);
                    name  = match[1];
                    if(!status[name]){ //防止重复生成节点与请求
                        status[name] = 1;
                        if(name !== "ready"){
                            appendScript(name,match[2]);//加载JS文件
                            dom.stack(errback);//压入错误堆栈
                        }
                    }
                    if(!names["@"+name]){//防止"node,oop,node"的情况
                        names.push(name);
                        names["@"+name] = 1;
                    }
                });
                this.provide(names,callback);
            },
            /**
             * 定义模块
             * @param {String} name 模块名
             * @param {String} dependList 依赖列表
             * @param {Function} module 模块本身
             */
            define:function(name,deps,callback){
                if(typeof deps == "function"){//处理只有两个参数的情况
                    callback = deps;
                    deps = "";
                }
                status[name] = 2;
                function wrap(){
                    status[name] = 3;
                    //这里必须把已添加了新能力的dom命名空间对象传入去,放便其他模块第一时间能使用这些新能力
                    callback();
                }
                wrap._name = name;
                //如果是空字符串则置换为空数组
                this.require(deps,wrap);
      
            },
            /**
             * 装配模块
             * @param {Array} array 模块列表
             * @param {Function} callback 回调函数
             */
            provide:function(names,callback){ 
                checks.unshift({
                    name:callback._name || "",
                    callback:callback,
                    deps:names,
                    length:names.length
                });  
            }
        });
        /**
         * domReady机制
         * @param {Function} fn 回调函数
         * @param {Boolean} more 是否加载指定的模块
         */
        var Ready = dom.ready = function(fn){
            if ( Ready.list) {
                Ready.list.push( fn );
            }else{
                fn();
            }
        };
        Ready.list = [];
        function fireReady(){
            if(Ready.list){
                for(var i=0, fn;fn = Ready.list[i++];)
                    fn();
                status.ready = 3;
                delete Ready.list;
            }
        };
        function doScrollCheck() {
            try {
                dom.HTML.doScroll("left");
                fireReady();
            } catch(e) {
                setTimeout( doScrollCheck, 0);
            }
        };
        //开始判定页面的加载情况
        if ( DOC.readyState === "complete" ) {
            fireReady();
        }else {
            dom.bind(DOC, (DOC.dispatchEvent ? "DOMContentLoaded" : "readystatechange"), function(){
                if (DOC.dispatchEvent || DOC.readyState === "complete") {
                    fireReady();
                }
            });
            try {
                //http://bugs.jquery.com/ticket/4787 http://cmc3.cn/
                //在IE6下,内嵌页面如果重设了document.domain,访问window.frameElement抛错,
                //但是经过多次try catch后,才能访问该值
                var toplevel = global.frameElement == null;
            } catch(e) {};
            if ( dom.HTML.doScroll && toplevel ) {
                doScrollCheck();
            }
        }
        dom.exports();
    })(this,this.document);
    //2011.7.11
    //@开头的为私有的系统变量,防止人们直接调用
    //dom.check改为dom["@emitter"]
    //dom.namespace改为dom["@name"]
    //去掉无用的dom.modules
    //优化exports方法
    
    

    每个模块的定义如下(请确保模块名与文件名要一致):

    (function(global,DOC){
        var dom = global[escape(DOC.URL.split("#")[0])];
        dom.define("class", "lang",function(){
           dom.log("class模块")
        });
    
    })(this,this.document);
    

    使用:

    //这里的回调函数会class模块加载后,并且待到domReady之后执行。
    //http://www.cnblogs.com/rubylouvre/archive/2011/07/12/2104777.html by 司徒正美
          dom.require("class,ready",function(){    
             alert(1000)
          });
    相关链接我的模块加载系统 v5

  • 相关阅读:
    js中return 、return false 、return true、break、continue区别
    小程序mpvue下多层次的数据值改变但是页面不动态渲染
    Thinkpad T470p Clover and opencore 吃黑苹果 Catalina 10.15.5
    3dTiles 数据规范详解[4.5] *一个被废弃的非正式瓦片规范
    3dTiles 数据规范详解[4.4] cmpt瓦片二进制数据文件结构
    3dTiles 数据规范详解[4.3] pnts瓦片二进制数据文件结构
    3dTiles 数据规范详解[4.2] i3dm瓦片二进制数据文件结构
    记一次Windows MinGW g++编译c++代码
    3dTiles 数据规范详解[4.1] b3dm瓦片二进制数据文件结构
    3dTiles 数据规范详解[3] 内嵌在瓦片文件中的两大数据表
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2104777.html
Copyright © 2011-2022 走看看