淘宝Kissy框架分析【五】

继续分析kissy-lang.js

8.makeArray函数 

作用:转化类数组对象为真实的数组.

原理:主要需要处理的就是将NodeList转化成真实的数组. 在非IE浏览器都可以通过Array.prototype.slice.call(NodeList)来直接转换.但IE却不支持.

       所以IE下只能降级到普通的方法转换.

测试用例:

< div > 1 < / div><div>2< / div >< div > 3 < / div><div>4< / div >
< script >
( function (J) {
    J.log(J.makeArray( ' a ' ));  //  ['a']
    J.log(J.makeArray( function  a() {}));  //  ['a()']
    J.log(J.makeArray([ ' a ' ,  ' b ' ]));  //  ['a', 'b']
    J.log(J.makeArray( null ));  //  []
    
     var  odiv  =  document.getElementsByTagName( ' div ' );
    J.log(J.makeArray(odiv));  //  ['divElement', 'divElement', 'divElement', 'divElement']
})(J1616);
< / script>

9.filter函数 

作用:通过回调函数的条件过滤数组项.

测试用例:

( function (J) {
    J.log(J.filter([ 1 ,  34 ,  45 ,  3 ,  4 ],  function (item) {
         return  item  >   10 ;   //  过滤大于10的数组项
    }));  //  [34, 45]
    J.log(J.filter([ 1 ,  34 ,  45 ,  3 ,  4 ],  function (item, index) {
         return  index  >   2 ;   //  过滤索引大于2的数组项
    }));  //  [3, 4]
})(J1616);

10.param函数 

作用:将一个hash类型序列化成有效的url格式串形式.

测试用例:

( function (J) {
     //  普通字符串
     var  url1  =  { ' name ' :  ' j16 ' ,  ' age ' :  ' 23 ' ,  ' sex ' :  ' men ' };
    J.log(J.param(url1));  //  name=j16&age=23&sex=men

     //  空字符串
     var  url2  =  { ' name ' :  '' ,  ' age ' :  '' ,  ' sex ' :  ' men ' };
    J.log(J.param(url2));  //  name=&age=&sex=men

     //  数组类型字符串
     var  url3  =  { ' name ' : [ ' j16 ' ,  ' kissy ' ],  ' age ' :  ' 23 ' ,  ' sex ' : [ ' women ' ,  ' men ' ]};
    J.log(J.param(url3));  //  name[]=j16&name[]=kissy&age=23&sex[]=women&sex[]=men

})(J1616);

11.unparam函数 

作用:param函数的逆转换(将url序列成hash对象). 但由于国情的原因.并不是完全可逆的.decodeURIComponent只能处理UTF-8编码的的中文. 而不能处理gbk编码的中文. 

12.later函数

作用: 延迟函数. 在指定的时间内 执行一段函数(setTimeout). 或者在指定的时间内 重复的执行一段函数(setInterval).

测试用例:

( function (J) {
     var  i  =   0 ;
     var  intervalRun  =   function (a, b, c) {
         if  ( ++ i  >=   10 ) {
            timer.cancel();
        } 
        J.log(i  +   '  times run\ ' s params is:  '  + [a, b, c]);
    };
    // 每个1秒 调用intervalRun函数. 并传入参数. 超过10次便停止
    var timer = J.later(intervalRun, 1000/*1s*/, true/*setInterval*/, null/*context*/, [ ' a ' ,  ' b ' ,  ' c ' ]);
 
    var timeoutRun = function(param) {
        J.log( ' the setTimeout param is:  '  + param);
    };
    // 1秒后 调用一次timeoutRun函数. 并传入参数
    J.later(timeoutRun, 1000, false, null,  ' setTimeout ' );
})(J1616);

13.now函数

作用:返回当前时间戳.

注意: kissy使用比较普通的new Date().getTime(). 有的框架用了高级浏览器支持的Date.now() || +new Data(比如mootools)但这个无所谓.清晰性更重要. 

14.globalEval函数

作用:在全局范围内执行代码

原理:kissy使用了script.text. 但貌似opera最新版本会有点问题. 全局执行代码有几个方法.具体可以参考司徒的这篇文章.

测试用例: 

( function (J) {
     var  i  =   ' local ' ; 
    J.globalEval( ' var j = "global" ' );
})(J1616);
alert(j);  //  由于globalEval函数可以冲破局部.所以可以得到j ==> global
alert(i);  //  由于i在闭包内. 所以是局部的 无法取到 而报错

至此kiss-lang.js部分分解完毕.接下来的是kissy-ua.js. 

转载于:https://www.cnblogs.com/bluedream2009/archive/2010/06/15/1758627.html