淘宝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.