我的模塊加載系統 v18


本版本亮點是加入本地儲存的支持與版本控制。

根據我們正常的思路,上線前我們會把這個頁面的所有JS文件打包成一個,或盡可能少的JS文件,其目的是減少請求數。然后,模塊化帶來的一個直接結果是把一個框架打散成N多JS文件,真是反其道而行。但是一個網站是由許多頁面組成,每個頁面其實都是引用N個相同的JS文件(包括基礎庫,工具庫與通用組件庫),與針對這個頁面的專用JS文件。因此想搞鼓出最優的打包方案是很難的,打包后我們圖的是利用瀏覽器的靜態緩存減少對服務器的壓力!不過,請神容易送神難,靜態緩存后,我們想刷掉這緩存比較麻煩,不能要求用戶按F5或Ctrl+F5來清吧!涉及CDN就更麻煩了。而且合並JS后,意味着服務器的內存保存着對應的合並副本,文件越多,組合越多!因此我結合本地儲存,得出的結論是不對JS文件進行緩存!下面是我的詳細思路:

頁面引入mass Framework的種子模塊mass.js,然后我們開始寫業務代碼,用到什么功能就用$.require("xxx,yyy",fn)引入對應的模塊就行了。

在mass Framework中,模塊即文件,於是加載文件去。在加載之前,我們有兩個判定,判定此模塊是否已經加載過,即它是否存在於內存!沒有再判定它是否保存過,即它是否序列化到用戶機器上,針對不同的瀏覽器,我們分別使用userData與localStorage。如果不支持這兩種最流行的本地儲存就算了,我也懶得兼容比IE5.5更2B的瀏覽器!如果在內存中,我們可以直接用,如果在本地儲存中,我們把這些字符串還原為函數也可以用!如果兩者都不,就遠程加載。因此上面的require操作,我們是加載了兩個JS文件,然后把它們的模塊工廠,JS文件路徑,依賴列表等都立即保存到本地儲存去!之后所有操作都以原來的一樣。

本地儲存應用后的區別在於,以后無論是什么刷新頁面,或跳轉到本站的其他頁面,只要你用到這個模塊,它都不發出請求了!如果是靜態緩存還會發出請求的。帶來的好處是,整個網站,除了種子模塊之外,其他JS文件都是請求一次!由於模塊系統的存在,讓按需加載成為現實,因此用戶實際請求數可能更少!

想應用本地儲存功能,不需要調用函數,也不要傳參,只要在引用種子模塊的script標簽添加一個storage屬性就行,值為1或true。

  <script src="/scripts/mass.js" storage="1"></script>

好了,當我們對一個JS模塊進行了修改,那怎么辦呢?框架提供了兩種方式把它從本地儲存中清掉。一種是服務器端的,寫入一個cookie,鍵名為erase(這個也可以配置),值為一個序列化后的對象。這個對象是個樣子的:

  {
    "http://localhost:3000/aaa.js":1347544195924,
    "http://localhost:3000/bbb.js":1347544195925,
    "http://localhost:3000/ccc.js":1347544195926
   }

鍵名為模塊的URL,值為它的版本號。我是使用時間戮做版本號的。只有這個JS文件發生變化,我才把它放進此對象,然后"erase="+ JSON.stringify(object)發到前端去。

在前端,框架會讀取cookie,發現有erase這個鍵名,就把它的值取出來,然后還原為一個對象,然后遍歷它的鍵值對,比較本地儲存中那個模塊的版本號,如果它比現在的舊,就把它清掉!

下面是框架的具體執行代碼:

  var rerase = new RegExp('(?:^| )' + $.config.erase + '(?:(?:=([^;]*))|;|$)')
    var match = String(DOC.cookie).match( rerase );
    //讀取從后端過來的cookie指令,轉換成一個對象,鍵名為模塊的URL,值為版本號(這是一個時間戮)
    if(match && match[1]){
        try{
            var obj = eval("0,"+match[1]);
            for(var i in obj){//$.erase會版本號比現在小的模塊從本地儲存中刪掉
                $.erase(i, obj[i])
            }
        }catch(e){}
    }

這就是通過后端的cookie指令清除指定模塊!

我們也可以在前端自己調用$.erase(url, version)會刪掉指定模塊!

上面也提到過cookie指令的名字也可以配置的,也和storage一樣,在引用種子模塊的script標簽添加一個erase屬性,值為你想要的名字就行了!

本次版本的升級只添加了一個erase方法,所有的改進都在內部進行的!

mass Framework的API文檔

+ function( global, DOC ){
    var $$ = global.$//保存已有同名變量
    var rmakeid = /(#.+|\W)/g;
    var NsKey = DOC.URL.replace( rmakeid,'')
    var NsVal = global[ NsKey ];//公共命名空間
    var W3C   = DOC.dispatchEvent //w3c事件模型
    var HTML  = DOC.documentElement;
    var HEAD  = DOC.head || DOC.getElementsByTagName( "head" )[0]
    var loadings = [];//正在加載中的模塊列表
    var mass = 1;//當前框架的版本號
    var postfix = "";//用於強制別名
    var cbi = 1e5 ; //用於生成回調函數的名字
    var all = "lang_fix,lang,support,class,flow,query,data,node,attr,css_fix,css,event_fix,event,ajax,fx"
    var class2type = {
        "[object HTMLDocument]"   : "Document",
        "[object HTMLCollection]" : "NodeList",
        "[object StaticNodeList]" : "NodeList",
        "[object IXMLDOMNodeList]": "NodeList",
        "[object DOMWindow]"      : "Window"  ,
        "[object global]"         : "Window"  ,
        "null"                    : "Null"    ,
        "NaN"                     : "NaN"     ,
        "undefined"               : "Undefined"
    }
    var toString = class2type.toString;
    function $( expr, context ){//新版本的基石
        if( $.type( expr,"Function" ) ){ //注意在safari下,typeof nodeList的類型為function,因此必須使用$.type
            return  $.require( all+",ready", expr );
        }else{
            if( !$.fn )
                throw "node module is required!"
            return new $.fn.init( expr, context );
        }
    }
    //多版本共存
    if( typeof NsVal !== "function"){
        NsVal = $;//公用命名空間對象
        NsVal.uuid = 1;
    }
    if(NsVal.mass !== mass  ){
        NsVal[ mass ] = $;//保存當前版本的命名空間對象到公用命名空間對象上
        if(NsVal.mass || ($$ && $$.mass == null)) {
            postfix = ( mass + "" ).replace(/\D/g, "" ) ;//是否強制使用多庫共存
        }
    }else{
        return;
    }
    /**
     * 糅雜,為一個對象添加更多成員
     * @param {Object} receiver 接受者
     * @param {Object} supplier 提供者
     * @return  {Object} 目標對象
     */
    var has = Object.prototype.hasOwnProperty
    function mix( receiver, supplier ){
        var args = Array.apply([], arguments ),i = 1, key,//如果最后參數是布爾,判定是否覆寫同名屬性
        ride = typeof args[args.length - 1] == "boolean" ? args.pop() : true;
        if(args.length === 1){//處理$.mix(hash)的情形
            receiver = !this.window ? this : {} ;
            i = 0;
        }
        while((supplier = args[i++])){
            for ( key in supplier ) {//允許對象糅雜,用戶保證都是對象
                if ( has.call(supplier,key) && (ride || !(key in receiver))) {
                    receiver[ key ] = supplier[ key ];
                }
            }
        }
        return receiver;
    }

    mix( $, {//為此版本的命名空間對象添加成員
        html: HTML,
        head: HEAD,
        mix: mix,
        rword: /[^, ]+/g,
        mass: mass,//大家都愛用類庫的名字儲存版本號,我也跟風了
        "@bind": W3C ? "addEventListener" : "attachEvent",
        //將內部對象掛到window下,此時可重命名,實現多庫共存  name String 新的命名空間
        exports: function( name ) {
            $$ && ( global.$ = $$ );//多庫共存
            name = name || $.config.nick;//取得當前簡短的命名空間
            $.config.nick = name;
            global[ NsKey ] = NsVal;
            return global[ name ]  = this;
        },
        /**
         * 數組化
         * @param {ArrayLike} nodes 要處理的類數組對象
         * @param {Number} start 可選。要抽取的片斷的起始下標。如果是負數,從后面取起
         * @param {Number} end  可選。規定從何處結束選取
         * @return {Array}
         */
        slice: function ( nodes, start, end ) {
            var ret = [], n = nodes.length;
            if(end === void 0 || typeof end == "number" && isFinite(end)){
                start = parseInt(start,10) || 0;
                end = end == void 0 ? n : parseInt(end, 10);
                if(start < 0){
                    start += n;
                }
                if(end > n){
                    end = n;
                }
                if(end < 0){
                    end += n;
                }
                for (var i = start; i < end; ++i) {
                    ret[i - start] = nodes[i];
                }
            }
            return ret;
        },
        /**
         * 用於取得數據的類型(一個參數的情況下)或判定數據的類型(兩個參數的情況下)
         * @param {Any} obj 要檢測的東西
         * @param {String} str 可選,要比較的類型
         * @return {String|Boolean}
         */
        type: function ( obj, str ){
            var result = class2type[ (obj == null || obj !== obj ) ? obj :  toString.call( obj ) ] || obj.nodeName || "#";
            if( result.charAt(0) === "#" ){//兼容舊式瀏覽器與處理個別情況,如window.opera
                //利用IE678 window == document為true,document == window竟然為false的神奇特性
                if( obj == obj.document && obj.document != 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{
                    result = toString.call( obj ).slice( 8, -1 );
                }
            }
            if( str ){
                return str === result;
            }
            return result;
        },
        //$.log(str, showInPage=true, 5 )
        //level Number,通過它來過濾顯示到控制台的日志數量。0為最少,只顯示最致命的錯誤,
        //7則連普通的調試消息也打印出來。 顯示算法為 level <= $.config.level。
        //這個$.colre.level默認為9。下面是level各代表的含義。
        //0 EMERGENCY 致命錯誤,框架崩潰
        //1 ALERT 需要立即采取措施進行修復
        //2 CRITICAL 危急錯誤
        //3 ERROR 異常
        //4 WARNING 警告
        //5 NOTICE 通知用戶已經進行到方法
        //6 INFO 更一般化的通知
        //7 DEBUG 調試消息
        log: function (str){
            var  show = true, page = false
            for(var i = 1 ; i < arguments.length; i++){
                var el = arguments[i]
                if(typeof el == "number"){
                    show = el <=  $.config.level
                }else if(el === true){
                    page = true;
                }
            }
            if(show){
                if( page === true ){
                    $.require( "ready", function(){
                        var div =  DOC.createElement("pre");
                        div.className = "mass_sys_log";
                        div.innerHTML = str +"";//確保為字符串
                        DOC.body.appendChild(div)
                    });
                }else if( global.console ){
                    global.console.log( str );
                }
            }
            return str
        },
        //用於建立一個從元素到數據的引用,用於數據緩存,事件綁定,元素去重
        getUid: global.getComputedStyle ? function( obj ){
            return obj.uniqueNumber || ( obj.uniqueNumber = NsVal.uuid++ );
        }: function( obj ){
            if(obj.nodeType !== 1){
                return obj.uniqueNumber || ( obj.uniqueNumber = NsVal.uuid++ );
            }
            var uid = obj.getAttribute("uniqueNumber");
            if ( !uid ){
                uid = NsVal.uuid++;
                obj.setAttribute( "uniqueNumber", uid );
            }
            return +uid;//確保返回數字
        },
        /**
         * 生成鍵值統一的對象,用於高速化判定
         * @param {Array|String} array 如果是字符串,請用","或空格分開
         * @param {Number} val 可選,默認為1
         * @return {Object}
         */
        oneObject : function( array, val ){
            if( typeof array == "string" ){
                array = array.match( $.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;
        },
        config: function( settings ) {
            var kernel  = $.config;
            for ( var p in settings ) {
                if (!settings.hasOwnProperty( p ))
                    continue
                var prev = kernel[ p ];
                var curr = settings[ p ];
                if (prev && p === 'alias') {
                    for (var c in curr) {
                        if (curr.hasOwnProperty( c )) {
                            var prevValue = prev[ c ];
                            var currValue = curr[ c ];
                            if( prevValue && prev !== curr ){
                                throw c + "不能重命名"
                            }
                            prev[ c ] = currValue;
                        }
                    }
                } else {
                    kernel[ p ] = curr;
                }
            }
            return this
        }
    });
    (function(scripts, cur){
        cur = scripts[ scripts.length - 1 ];//FF下可以使用DOC.currentScript
        var url = cur.hasAttribute ?  cur.src : cur.getAttribute( 'src', 4 );
        url = url.replace(/[?#].*/, '');
        var a = cur.getAttribute("debug");
        var b = cur.getAttribute("storage");
        var kernel = $.config;
        kernel.debug = a == 'true' || a == '1';
        kernel.storage = b == 'true' || b == '1';
        kernel.base = url.substr( 0, url.lastIndexOf('/') ) +"/";
        kernel.nick = cur.getAttribute("nick") || "$";
        kernel.erase = cur.getAttribute("erase") || "erase";
        kernel.alias = {};
        kernel.level = 9;

    })(DOC.getElementsByTagName( "script" ));

    $.noop = $.error = $.debug = function(){};

    "Boolean,Number,String,Function,Array,Date,RegExp,Window,Document,Arguments,NodeList".replace( $.rword, function( name ){
        class2type[ "[object " + name + "]" ] = name;
    });

    var Module = function (id, parent) {
        this.id = id;
        this.exports = {};
        this.parent = parent;
        var m = Module._load[parent]
        m && m.children.push(this);
        this.children = [];
    }
    Module._load = function( url, parent) {
        url = Module._resolve( url, parent.id )[0];
        var module = Module._cache[ url ];
        if (module) {
            return module.exports;
        }
    };
    Module._update = function(id, parent, factory, state, deps, args){
        var module =  Module._cache[id]
        if( !module){
            module = new Module(id, parent || $.config.base);
            Module._cache[id] = module;
        }
        module.callback = factory || $.noop;
        module.state = state || module.state;
        module.deps = deps || module.deps || {};
        module.args = args || module.args || [];
    }
    Module.prototype.require = function(a){
        var self = this;
        if(typeof a == "string"){
            return Module._load(path, self)
        }
        return function(path){
            return Module._load(path, self)
        }
    }
    Module._resolve = function(url, parent, ret){
        //[]里面,不是開頭的-要轉義,因此要用/^[-a-z0-9_$]{2,}$/i而不是/^[a-z0-9_-$]{2,}
        //別名至少兩個字符;不用漢字是避開字符集的問題
        if( url === "ready"){//特別處理ready標識符
            return ["ready", "js"];
        }
        if(/^[-a-z0-9_$]{2,}$/i.test(url) && $.config.alias[url] ){
            ret = $.config.alias[url];
        }else{
            parent = parent.substr( 0, parent.lastIndexOf('/') )
            if(/^(\w+)(\d)?:.*/.test(url)){  //如果用戶路徑包含協議
                ret = url
            }else {
                var tmp = url.charAt(0);
                if( tmp !== "." && tmp != "/"){  //相對於根路徑
                    ret = $.config.base + url;
                }else if(url.slice(0,2) == "./"){ //相對於兄弟路徑
                    ret = parent + "/" + url.substr(2);
                }else if( url.slice(0,2) == ".."){ //相對於父路徑
                    var arr = parent.replace(/\/$/,"").split("/");
                    tmp = url.replace(/\.\.\//g,function(){
                        arr.pop();
                        return "";
                    });
                    ret = arr.join("/")+"/"+tmp;
                }
            }
        }
        var ext = "js";
        tmp = ret.replace(/[?#].*/, '');
        if(/\.(\w+)$/.test( tmp )){
            ext = RegExp.$1;
        }
        if( tmp == ret && !/\.js$/.test(ret)){//如果沒有后綴名會補上.js
            ret += ".js";
        }
        return [ret, ext];
    }

    var modules = $.modules = Module._cache = {};
    Module._update( "ready" );
    var rrequire = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g;
    var rcomment =  /\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g
    var rparams =  /[^\(]*\(([^\)]*)\)[\d\D]*/;//用於取得函數的參數列表
    $.mix({
        //綁定事件(簡化版)
        bind: W3C ? function( el, type, fn, phase ){
            el.addEventListener( type, fn, !!phase );
            return fn;
        } : function( el, type, fn ){
            el.attachEvent && el.attachEvent( "on"+type, fn );
            return fn;
        },
        unbind: W3C ? function( el, type, fn, phase ){
            el.removeEventListener( type, fn || $.noop, !!phase );
        } : function( el, type, fn ){
            if ( el.detachEvent ) {
                el.detachEvent( "on" + type, fn || $.noop );
            }
        },
        //請求模塊(依賴列表,模塊工廠,加載失敗時觸發的回調)
        require: function( list, factory, parent ){
            var deps = {}, // 用於檢測它的依賴是否都為2
            args = [],      // 用於依賴列表中的模塊的返回值
            dn = 0,         // 需要安裝的模塊數
            cn = 0;         // 已安裝完的模塊數
            String(list).replace( $.rword, function(el){
                var array = Module._resolve(el, parent || $.config.base ), url = array[0];
                if(array[1] == "js"){
                    dn++
                    //如果沒有注冊,則先嘗試通過本地獲取,如果本地不存在或不支持,則才會出請求
                    loadStorage( url )
                    if( (!modules[ url ])  ){//&& loadStorage( url )
                        loadJS( url, parent );
                    }else if( modules[ url ].state === 2 ){
                        cn++;
                    }
                    if( !deps[ url ] ){
                        args.push( url );
                        deps[ url ] = "司徒正美";//去重
                    }
                }else if(array[1] === "css"){
                    loadCSS( url );
                }
            });
            var id = parent || "@cb"+ ( cbi++ ).toString(32);
            //創建或更新模塊的狀態
            Module._update(id, 0, factory, 1, deps, args);
            if( dn === cn ){//如果需要安裝的等於已安裝好的
                return install( id, args, factory );//裝配到框架中
            }
            //在正常情況下模塊只能通過_checkDeps執行
            loadings.unshift( id );
            $._checkDeps();//FIX opera BUG。opera在內部解析時修改執行順序,導致沒有執行最后的回調
        },
        //定義模塊
        define: function( parent, deps ){//模塊名,依賴列表,模塊本身
            var args = arguments;
            if( typeof deps === "boolean" ){//用於文件合並, 在標准瀏覽器中跳過補丁模塊
                if( deps ){
                    return;
                }
                [].splice.call( args, 1, 1 );
            }
            if( args.length === 2 ){//處理只有兩個參數的情況,補允依賴列表
                [].splice.call( args, 1, 0, [] );
            }
            if(typeof args[2] == "function"){
                var factroy = args[2].toString()
                .replace(rcomment,"")
                .replace(rrequire,function(a,b){
                    args[1].push(b);//將模塊工廠中以node.js方式加載的模塊也加載進來
                    return a;
                });
                if(this.exports && this.id && $.config.storage && !Storage.getItem( this.id) ){
                    Storage.setItem( this.id, factroy);
                    Storage.setItem( this.id+"_deps", args[1]+"");
                    Storage.setItem( this.id+"_parent",  this.parent);
                    Storage.setItem( this.id+"_version", new Date - 0);
                }
            }else{
                var ret = args[2];
                args[2] = function(){
                    return ret
                }
            }
            $.require( args[1], args[2], parent ); //0,1,2 --> 1,2,0
        },
        _checkFail : function(  doc, id, error ){
            doc && (doc.ok = 1);
            if( error || !modules[ id ].state ){
                $.log( (error || modules[ id ].state )+"   "+id, 3);
                this.log("Failed to load [[ "+id+" ]]"+modules[ id ].state);
            }
        },
        //檢測此JS模塊的依賴是否都已安裝完畢,是則安裝自身
        _checkDeps: function (){
            loop:
            for ( var i = loadings.length, id; id = loadings[ --i ]; ) {
                var obj = modules[ id ], deps = obj.deps;
                for( var key in deps ){
                    if( deps.hasOwnProperty( key ) && modules[ key ].state != 2 ){
                        continue loop;
                    }
                }
                //如果deps是空對象或者其依賴的模塊的狀態都是2
                if( obj.state != 2){
                    loadings.splice( i, 1 );//必須先移除再安裝,防止在IE下DOM樹建完后手動刷新頁面,會多次執行它
                    install( obj.id, obj.args, obj.callback );
                    $._checkDeps();
                }
            }
        },
        erase : function( id, v ){
            if(id == void 0){
                Storage.clear();
            }else{
                var old = Storage.getItem( id+"_version" );
                if(old && (!v || v > Number(old)) ){
                    Storage.removeItem( id );
                    Storage.removeItem( id+"_deps" )
                    Storage.removeItem( id+"_parent" )
                    Storage.removeItem( id+"_version" )
                }
            }
        }
    });
    var Storage =  {
        setItem: $.noop,
        getItem: $.noop,
        removeItem: $.noop,
        clear: $.noop
    }
    if( global.localStorage){
        Storage = localStorage;
    }else if( HTML.addBehavior){
        HTML.addBehavior('#default#userData');
        HTML.save("massdata");
        //https://github.com/marcuswestin/store.js/issues/40#issuecomment-4617842
        //在IE67它對鍵名非常嚴格,不能有特殊字符,否則拋throwed an This name may not contain the '~' character: _key-->~<--
        var rstoragekey = new RegExp("[!\"#$%&'()*+,/\\\\:;<=>?@[\\]^`{|}~]", "g")
        function curry(fn) {
            return function(a, b) {
                HTML.load("massdata");
                a = String(a).replace(rstoragekey, function(w){
                    return w.charCodeAt(0);
                })
                var result = fn( a, b );
                HTML.save("massdata");
                return result
            }
        }
        Storage = {
            setItem : curry(function(key, val){
                HTML.setAttribute(key, val);
            }),
            getItem: curry(function(key){
                return HTML.getAttribute(key);
            }),
            removeItem: curry(function(key){
                HTML.removeAttribute(key);
            }),
            clear: function(){
                var attributes = HTML.XMLDocument.documentElement.attributes
                for (var i=0, attr; attr=attributes[i]; i++) {
                    HTML.removeAttribute(attr.name)
                }
            }
        }
    }
    var rerase = new RegExp('(?:^| )' + $.config.erase + '(?:(?:=([^;]*))|;|$)')
    var match = String(DOC.cookie).match( rerase );
    //讀取從后端過來的cookie指令,轉換成一個對象,鍵名為模塊的URL,值為版本號(這是一個時間戮)
    if(match && match[1]){
        try{
            var obj = eval("0,"+match[1]);
            for(var i in obj){//$.erase會版本號比現在小的模塊從本地儲存中刪掉
                $.erase(i, obj[i])
            }
        }catch(e){}
    }
    function loadStorage( id ){
        var factory =  Storage.getItem( id);
        if(factory && !modules[id]){
            var parent = Storage.getItem(id+"_parent");
            var deps = Storage.getItem(id+"_deps");
            deps = deps ?  deps.match( $.rword ) : "";
            Module._update( id, parent );
            var module = $.modules[ id ];
            module.state =  module.state || 1;
            var fn = Function( "$,module,exports,require,define","return "+ factory )
            ($, module, module.exports, module.require());
            $.define( id, deps, fn );
        }
    }

    function loadCSS(url){
        var id = url.replace(rmakeid,"");
        if (DOC.getElementById(id))
            return
        var link =  DOC.createElement('link');
        link.charset = "utf-8"
        link.rel = 'stylesheet'
        link.href = url;
        link.type="text/css"
        link.id = id
        HEAD.insertBefore( link, HEAD.firstChild );
    }

    var loadJS = function( url, parent ){
        Module._update( url, parent );
        var iframe = DOC.createElement("iframe"),//IE9的onload經常抽瘋,IE10 untest
        codes = ['<script>var nick ="', url, '", $ = {}, Ns = parent.', $.config.nick,
        '; $.define = ', innerDefine, ';var define = $.define;<\/script><script src="',url,'" ',
        (DOC.uniqueID ? 'onreadystatechange="' : 'onload="'),
        "if(/loaded|complete|undefined/i.test(this.readyState) ){  Ns._checkDeps(); ",
        'Ns._checkFail(self.document, nick);}',
        '" onerror="Ns._checkFail(self.document, nick, true);" ><\/script>' ];
        iframe.style.display = "none";//opera在11.64已經修復了onerror BUG
        //http://www.tech126.com/https-iframe/ http://www.ajaxbbs.net/post/webFront/https-iframe-warning.html
        if( !"1"[0] ){//IE6 iframe在https協議下沒有的指定src會彈安全警告框
            iframe.src = "javascript:false"
        }
        HEAD.insertBefore( iframe, HEAD.firstChild );
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        doc.write( codes.join('') );
        doc.close();
        $.bind( iframe, "load", function(){
            if( global.opera && doc.ok != 1 ){//ok寫在$._checkFail里面
                $._checkFail(doc, url, true );//模擬opera的script onerror
            }
            doc.write( "<body/>" );//清空內容
            HEAD.removeChild( iframe );//移除iframe
            iframe = null;
        });
    }
    var innerDefine = function(  ){
        var args = Array.apply([],arguments);
        if(typeof args[0] == "string"){
            args.shift()
        }
        args.unshift( nick );  //劫持第一個參數,置換為當前JS文件的URL
        var module = Ns.modules[ nick ];
        module.state = 1
        var last = args.length - 1;
        if( typeof args[ last ] == "function"){
            //劫持模塊工廠,將$, exports, require, module等對象強塞進去
            args[ last ] =  parent.Function( "$,module,exports,require","return "+ args[ last ] )
            (Ns, module, module.exports, module.require());//使用curry方法劫持模塊自身到require方法里面
        }
        Ns.define.apply(module, args);  //將iframe中的函數轉換為父窗口的函數
    }

    
    function install( id, deps, callback ){
        for ( var i = 0, array = [], d; d = deps[i++]; ) {
            array.push( modules[ d ].exports );//從returns對象取得依賴列表中的各模塊的返回值
        }
        var module = Object( modules[id] ), ret;
        var common = {
            exports: module.exports,
            require: typeof module.require == "function" ? module.require() : $.noop,
            module:  module
        }
        var match = callback.toString().replace(rparams,"$1").replace(rcomment,"").match($.rword)||[]
        var a = common[match[0]];
        var b = common[match[1]];
        var c = common[match[2]];
        if( a && b && a != b && b != c  ){//exports, require, module的位置隨便
            ret =  callback.apply(global, [a, b, c]);
        }else{
            ret =  callback.apply(global, array);
        }
        module.state = 2;
        if( ret !== void 0 ){
            modules[ id ].exports = ret
        }
        return ret;
    }
    all.replace($.rword,function(a){
        $.config.alias[ "$"+a ] = $.config.base + a + ".js"
    });
    //domReady機制
    var readyFn, ready =  W3C ? "DOMContentLoaded" : "readystatechange" ;
    function fireReady(){
        modules[ "ready" ].state = 2;
        $._checkDeps();
        if( readyFn ){
            $.unbind( DOC, ready, readyFn );
        }
        fireReady = $.noop;//隋性函數,防止IE9二次調用_checkDeps
    };
    function doScrollCheck() {
        try {
            HTML.doScroll( "left" ) ;
            fireReady();
        } catch(e) {
            setTimeout( doScrollCheck, 31 );
        }
    };

    if ( DOC.readyState === "complete" ) {
        fireReady();//如果在domReady之外加載
    }else {
        $.bind( DOC, ready, readyFn = function(){
            if ( W3C || DOC.readyState === "complete" ){
                fireReady();
            }
        });
        if( HTML.doScroll && self.eval === parent.eval)
            doScrollCheck();
    }
    var rdebug =  /^(init|constructor|lang|query)$|^is|^[A-Z]/;
    function debug(obj, name, module, p){
        var fn = obj[name];
        if( obj.hasOwnProperty(name) && typeof fn == "function" && !fn["@debug"]){
            if( rdebug.test( name )){
                fn["@debug"] = name;
            }else{
                var method = obj[name] = function(){
                    try{
                        return  method["@debug"].apply(this,arguments)
                    }catch(e){
                        $.log( module+"'s "+(p? "$.fn." :"$.")+name+" method error "+e);
                        throw e;
                    }
                }
                for(var i in fn){
                    method[i] = fn[i];
                }
                method["@debug"] = fn;
                method.toString = function(){
                    return fn.toString()
                }
                method.valueOf = function(){
                    return fn.valueOf();
                }
            }
        }
    }
    $.debug = function(name){
        if(!$.config.debug )
            return
        for( var i in $){
            debug($, i, name);
        }
        for( i in $.prototype){
            debug($.prototype, i, name,1);
        }
    }
    global.VBArray && ("abbr,article,aside,audio,bdi,canvas,data,datalist,details,figcaption,figure,footer," +
        "header,hgroup,mark,meter,nav,output,progress,section,summary,time,video").replace( $.rword, function( tag ){
        DOC.createElement(tag);
    });
    for(var i in $){
        if( !$[i].mass && typeof $[i] == "function"){
            $[i]["@debug"] = i;
        }
    }
    //https://developer.mozilla.org/en/DOM/window.onpopstate
    $.bind( global, "popstate", function(){
        NsKey = DOC.URL.replace(rmakeid,'');
        $.exports();
    });
    $.exports( $.config.nick +  postfix );//防止不同版本的命名空間沖突
/*combine modules*/

}( self, self.document );//為了方便在VS系列實現智能提示,把這里的this改成self或window

歷史回顧!不斷完善,臻於完美!

/*
v17 http://www.cnblogs.com/rubylouvre/archive/2012/08/30/2662477.html
v16 http://www.cnblogs.com/rubylouvre/archive/2012/04/26/2470700.html
v15 http://www.cnblogs.com/rubylouvre/archive/2012/01/30/2329342.html
v14 http://www.cnblogs.com/rubylouvre/archive/2011/12/19/2293878.html
v13 http://www.cnblogs.com/rubylouvre/archive/2011/11/17/2251868.html
v12 http://www.cnblogs.com/rubylouvre/archive/2011/10/27/2226228.html
v11 http://www.cnblogs.com/rubylouvre/archive/2011/10/09/2203826.html
v10 http://www.cnblogs.com/rubylouvre/archive/2011/09/25/2189529.html
v9 http://www.cnblogs.com/rubylouvre/archive/2011/08/22/2147058.html
v8 http://www.cnblogs.com/rubylouvre/archive/2011/08/08/2129951.html
v7 http://www.cnblogs.com/rubylouvre/archive/2011/08/05/2127791.html
v6 http://www.cnblogs.com/rubylouvre/archive/2011/07/12/2104777.html
v5 http://www.cnblogs.com/rubylouvre/archive/2011/04/12/2011175.html
v4 http://www.cnblogs.com/rubylouvre/archive/2011/03/01/1968397.html
v3 http://www.cnblogs.com/rubylouvre/archive/2011/02/11/1951104.html
v2 沒有保留下來
v1 沒有保留下來
*/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM