zoukankan      html  css  js  c++  java
  • 模块加载系统 v16

    本版本最大的改进就引入强大的调试机制。如果一个框架使用了模块加载后,迎来的最大问题莫过于调试。由于有了模块化,因此不需要担忧体积的问题,因此大放手脚伸入前端各个领域去,JS文件暴涨,也意味着API数量瀑涨,就像jQuery那一点儿API有的人都记不全,更别说像EXT,YUI,dojo这样的巨无霸了。对于这个方法是在A模块还是B模块,我们在调用时还可以查一查,但出错时,就未必出A模块或B模块内,A模块还可能依赖于C模块与D模块,D模块还有依赖,这样一级级下去,我们很难追溯到出错的源头。特别是,如果这个JS文件是动态加载的,然后又删掉了,连firebug也查不了!因此强化调试机制势在必行,这也是本版本最大的亮点!

    本版本的其他改进:

    • 升级UUID系统,以便页面出现多个版本共存时,让它们共享一个计数器。
    • 简化_checkFail方法,如果出现死链接,直接打印模块名便是,不用再放入错误栈中了。
    • 简化deferred列队,统一先进先出。
    • 改进$.mix方法,允许只存在一个参数,直接将属性添加到$命名空间上。
    • 内部方法assemble更名为setup,并强化调试机制,每加入一个新模块, 都会遍历命名空间与原型上的方法,重写它们,添加try catch逻辑。

    好了,我们再回到增强调试机制的话题上。

    在mass Framework种子模块的require方法中这样一段代码:

    if( dn === cn ){//在依赖都已执行过或没有依赖的情况下
        if( token && !( token in transfer ) ){
            mapper[ token ].state = 2 //如果是使用合并方式,模块会跑进此分支(只会执行一次)
            return transfer[ token ] = setup( callback, args,token );
        }else if( !token ){//普通的回调可执行无数次
            return setup( callback, args,token );
        }
    }

    反正如果某个JS文件没有死链,它对应的模块就肯定进入setup方法。setup 方法有三个参数,第一个模块名,字符串。第二个是它的依赖列表,一个字符串数组。最后一个是函数,可以是模块自身,也可以是用户的回调。情况与$.define方法一模一样,不同的是,这模块可能已经被修改过,加了文件夹名。

    //收集依赖列表对应模块的返回值,传入目标模块中执行
    function setup( name, deps, fn ){
        for ( var i = 0,argv = [], d; d = deps[i++]; ) {
            argv.push( transfer[d] );
        }
        var ret = fn.apply( global, argv );
        if($["@debug"]){//如果打开调试机制
            for( i in $){
                debug($, i, name);
            }
            for( i in $.fn){
                debug($.fn, i, name,1);
            }
        }
        return ret;
    }

    setup的用法在注释中已说很清楚了,就行执行模块自身,以便为命名空间与mass的原型添加新的方法或属性。比如lang模块,它本身是没有依赖(特指标准浏览器下,IE下还要加lang_fix模块),它的模块函数执行后,$命名空间就多出isPlainObject, isNative, isEmptyObject, isArrayLike, format, tag, quote, dump, parseJS, parseJSON, parseXML, each, map ,isFunction, isArray, lang这些方法。并且返回$.lang这个方法,它会添加到内部的transfer对象,键名为其对应的模块。因此你看到setup方法存在transfer[d]这样的语句。

    如果已打开调试机制(默认是打开的),它就会新加入模块的方法进行重写,这个由另一个内部方法去完成。

    var rdebug =  /^(init|constructor|lang|query)$|^is/
    function debug(obj, name, module, p){
        var fn = obj[name];
        iftypeof 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+"::"+(p? "$.fn." :"$.")+name+" ]] gone wrong");
                        $.log(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();
                }
            }
        }
    }

    此方法目的是重写原方法,但为了节约性能,没有使用curry,而是将原方法放到新方法的一个叫“@debug”的属性上,使用在try catch中小心地调用它。如果出错就把预先写好的调试消息打印出来。为了防止此方法人工添加过各种自定义属性,我们有必要把这些私有属性再for in 一下,转移到新方法上。但for in在IE678下有BUG,因此还需要单独处理一下valueOf与toString方法。此外,对于一些核心方法与调用异常频繁的方法就不重写了, 如isXXX系列,init构造器,query选择器,lang语言链……基本上它们都有足够强悍的代码防御,用不着多此一举!

    说了这么多理论,让我们看看实际效果。比如说我们想调用lang模块的format方法,它有两种传参方式,但无论哪一种,第一个参数总是字符串!

    $.require("ready,lang",function(){
        var a = $.format("Result is #{0},#{1}", 22,33);
        alert(a);//"Result is 22,33"
    })

    但你如果误传了一个数组进去,立马报错,在各浏览器显示如下(这是未开启调试机制的情况)

    $.require("ready,lang",function(){
        $.format([]);
    })

    除了opera可以看出一些眉目外,其他浏览器的调试消息基本没有用。现在只有一行代码,我们当然猜得出是format出了问题,如果多几行就惨了。

    我们再看看打开调试机制之后的样子,它就比原来多一行有用的消息。

    @lang表示它所在的模块,按照mass Framework的文件名与模块名一一对应的机制,不难知道是lang.js这个文件有错,如果是@more/aaa,则是more目录下的aaa.js文件有错。$.format就是出错的方法名,这个用IDE定位一下立即就找到了,然后根据浏览器原有消息与方法源码,应该很快就找到原因。

    //mass Framework的模块加载,创建元素,插入元素,绑定事件
                $.require("ready,event",function(){
                   $("body").append("<div>新节点</div>").on("click","div",function(){
                       alert(this.innerHTML)
                   })
                })

    基本上就是这样,源码放在github上,欢迎试用。


     
    标签: javascriptmass
  • 相关阅读:
    CSUST 8.4 早训
    CSUST 8.5 早训
    hdu1542 Atlantis 线段树--扫描线求面积并
    hdu1540 Tunnel Warfare 线段树/树状数组
    hdu1535 Invitation Cards 最短路
    hdu1358 Period KMP
    SQL Server 向数据库中创建表并添加数据
    初次实践数据库--SQL Server2016
    hdu1301 Jungle Roads 最小生成树
    hdu1281 棋盘游戏 二分图最大匹配
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2470905.html
Copyright © 2011-2022 走看看