[转载]淘宝Kissy框架分析【五】 - BlueDream - 博客园

baacloud免费翻墙vpn注册使用

[转载]淘宝Kissy框架分析【五】 – BlueDream – 博客园.

继续分析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([ab])); // [‘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([
1344534], function(item) {
return item > 10;  // 过滤大于10的数组项
    })); // [34, 45]
    J.log(J.filter([1344534], function(item, index) {
return index > 2;  // 过滤索引大于2的数组项
    })); // [3, 4]
})(J1616);
复制代码

10.param函数 

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

测试用例:

复制代码
(function(J) {
// 普通字符串
    var url1 = {namej16age23sexmen};
J.log(J.param(url1)); 
// name=j16&age=23&sex=men

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

// 数组类型字符串
    var url3 = {name: [j16kissy], age23sex: [womenmen]};
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 (++>= 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*/, [
abc]);

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.

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏