JS框架设计之对象数组化一种子模块
类数组对象是一个很好的存储结构,但是功能太弱了,为了享受纯数组的哪些便捷的方法,使用前可以做下转换,通常可以使用$.slice.call()方法做转换,但是旧版本的IE下的HTMLCollection、NodeList不是Object的子类,如果采用[].slice.call()方法可能会导致异常,下面是各大库是怎么处理的:
1、jQuery的makeArray
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../common/jquery-1.9.1.min.js"></script>
</head>
<body>
<script>
//一般将一个对象转换成数组需要用[].slice.call()方法来转换,但是在旧版本的IE中HTMLCollection、NodeList不是Object的子类,是com对象
//所以无法使用[].slice.call()方法来把传入的对象数组化,下面是jQuery兼容IE旧版本的对象数组化方法 //该方法有以下保证
/*
1、不管是否传入参数,始终返回一个数组,如果不传参,则返回一个空数组
2、对传入的参数(不包含length属性、是字符串、是jQuery方法的、是array的setInterval的)将他们的引用存入数组的第一项
3、如果传入的参数符合数组化的要求,则进行数组化
*/ //注意:传入的集合必须是具有length属性,然后集合的键值必须是数字,也就是具有数组结构的集合,才能被转换
var makeArray=function(array)
{
var ret=[];
if(array!=null)
{
var l=array.length;
if(l==null || typeof array==="string" ||jQuery.isFunction(array) || array.setInterval)
{
ret[0]=array;
}
else
{
while (l)
ret[--l]=array[l];
}
}
return ret;
}
alert(makeArray({length:3,0:"a",1:"b",2:"c"})[1]);
</script>
</body>
</html>
2、dojo的对象数组化方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
dojo的对象数组化方法和Ext一样,都是在一开始判断浏览器类型,他的后面也有两个参数,用于操作转化后的数组
但是dojo后面的两个参数,不是要截取数组的开始索引和结束索引
dojo的第一个参数是要转换成数组的对象,第二个是偏移量,第三个是已有的数组,返回值是已有的数组和转换后,并截取过的合并数组
*/
var zc={};
isIE=true;
(function(){
var efficient=function (obj,offest,startWith) {
return (startWith||[]).concat([].slice.call(obj,offest || 0));
}
var slow=function (obj,offest,startWith) {
var arr=startWith || [];
//偏移量不支持负数
for(var i=offest || 0;i<obj.length;i++) {
arr.push(obj[i]);
}
return arr;
}
zc.toArray=isIE?function (obj) {
return slow.apply(this,arguments);
}:efficient;
})();
alert(zc.toArray({length:3,0:"a",1:"b",2:"c"},0,[1,2,3]));
</script>
</body>
</html>
3、Ext的对象数组化方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
Ext设计的比较巧妙,在框架一加载的同时,就判断浏览器的的类型,然后存到变量中,后面就不需要判断浏览了,
然后根据浏览器的是不是IE来选择toArray到底引用那个方法体,如果是IE浏览器,则吊用自定义的对象数组化方法,
如果不是则调用[].slice.call(),并通过slice方法,通过i,j参数对字符串进行截取操作
*/
/*
该方法有以下保证
1、如果在IE浏览器下执行,则则调用自定义的对象数组化方法
2、如果不再IE下,吊用[].slice.call()来进行对象数组化
3、可以提供两个参数(start,end),用于截取指定长度的转换后的对象数组
*/
var toArray=function () {
var returnisIE;//判断浏览器是否是IE
return returnisIE?function(a,i,j){
var length=a.length || 0,result=new Array(length);
while (length--)
result[length]=a[length];
return result.slice(i || 0,j|| a.length);
}:function(a,i,j){
return Array.prototype.slice.call(a,i || 0,j || a.length);
};
}();
var res=toArray({length:2,0:"a",1:"2"},1);
alert(res)
</script>
</body>
</html>
4、mootools
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
mootools的对象数组化方法
*/
/*
该方法有以下保证
1、当用户传入的是HTMLCollection集合是,因为老版IE的HTML节点对象是COM对象,不是Js对象的子类,所以无法使用[].slice.call()方法
使用自定义的对象数组化方法
2、如果传入的对象不是上面的那种情况,那么吊用[].slice.call()方法来进行对象数组化
*/
function $A(array)
{
if(array.item)
{
var length=array.length || 0,result=new Array(length);
while (length--)
result[length]=array[length];
return result;
}
return Array.prototype.slice.call(array);
}
var res=$A({length:2,0:1,1:2});//输出:1,2
alert(res)
</script>
</body>
</html>
5、Prototype
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
Prototype的对象转换成数组的方法
*/ /*
该方法有以下保证
1、如果不传入参数,返回空数组
2、如果当前浏览器支持toArray()方法,那么调用该对象的toArray()方法
3、如果上面两种条件都不满足,那么拿到当前对象的length属性(如果没有给0),然后new一个具有length长度的数组,并进行赋值
*/ //注意:要转换成数组的对象的length不能大于实际元素的长度,也不能小于实际元素的长度
function $A(array){
if(!array)return [];
if(array.toArray)return array.toArray();
var length=array.length || 0,results=new Array(length);
while (length--)
results[length]=array[length];
return results;
}
var result=$A({length:3,0:1,1:2,2:3});
alert(result);
</script>
</body>
</html>
6、mass
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
下面是mass的对象数组化方法
*/
/*
该方法有以下保证:
1、一开始就对浏览器进行区分
2、如果是IE则调用自定义对戏那个数组化方法,如果不是,则使用[].slice.call
3、提供start和end参数,方便对(传入对象数组化之后的数组)进行截取
4、保证start和end参数的输入不会影响输出结果
*/
isIE=true;
var toArray=window.isIE?function(nodes,start,end)
{
var ret=[],length=nodes.length;
if(end===void 0 || typeof end==="number" && isFinite(end))
{
start=parseInt(start,10) || 0;
end=end==void 0?length:parseInt(end,10);
if(start<0)
start+=length;
if(end>length)
end=length;
if(end<0)
end+=length;
for(var i=start;i<end;i++)
{
ret[i-start]=nodes[i];
}
}
return ret;
}:function (nodes,start,end)
{
return Array.prototype.slice.call(nodes,start,end);
};
var res=toArray({length:3,0:1,1:"a",2:"b"},0,-1);//输出:1,a
alert(res);
</script>
</body>
</html>
JS框架设计之对象数组化一种子模块的更多相关文章
- JS框架设计之对象类型判断一种子模块
Javascript有两套数据类型,一套是基础数据类型,一套是对象数据类型.基础数据类型包括5种基本数据类型,分别是null,bool,undefined,number,string,也叫简单数据类型 ...
- js框架设计1.3数组化
这一节从作者哪里学来了[].slice.call([],0,1);这个方法第一个参数可是是字符串可以是数组或其他,第2个是数组截取位置的开始位置,第3个是终止位置. 作者说这个方法不兼容旧版本ie的, ...
- JS框架设计之对象扩展一种子模块
对象扩展 说完了,对象的创建(框架的命名空间的创建)以及如何解决多库之间的命名空间冲突问题之后,接下来,就是要扩展我们的对象,来对框架进行扩展,我们需要一种新功能,将新添加的功能整合到我们定义的对象中 ...
- js框架设计1.1命名空间笔记
借到了司徒正美的写的js框架设计一书,司徒大神所著有些看不太懂,果然尚需循序渐进,稳扎js基础之中. 第一张开篇司徒阐述了种子模块的概念 种子模块亦为核心模块,框架最先执行模块,司徒见解应包含:对象扩 ...
- 对象数组化 Object.values(this.totalValueObj).forEach(value => {
对象数组化 Object.values(this.totalValueObj).forEach(value => {
- JS框架设计读书笔记之-核心模块
随笔记录一下读书心得 1. 框架模块-核心模块 该模块是框架最先执行的部分,jQuery与vue中都有初始化的代码. 模块的功能主要是:对象扩展.数组化.类型判定.事件绑定和解绑.无冲突处理.模块加载 ...
- JS框架设计之命名空间设计一种子模块
命名空间 1.种子模块作为一个框架的最开始,除了负责初始化框架的最基础部分. 2.种子模块作为框架的最开始,那么什么是种子框架的最开始呢?答案是IIFE(立即调用函数表达式); IIFE(立即调用函数 ...
- js框架设计1.2对象扩展笔记
需要一个新的功能添加到我们的命名空间上.这方法在JS中被叫做extend或者mixin,若是遍历属性用一下1.1代码,则会遍历不出原型方法,所以1.2介绍的是mass Framework里的mix方法 ...
- Js框架设计之DomReady
一.在介绍DomReady之前,先了解下相关的知识 1.HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不要把尖括号里面的内容看作是DOM! 2. ...
随机推荐
- Jdom的简单操作
http://blog.csdn.net/heirenheiren/article/details/7354108 http://www.cnblogs.com/hoojo/archive/2011/ ...
- struts2+websocket报错：failed: Error during WebSocket handshake: Unexpected response code:404
最近把websocket集成进项目里面来,打开网页总是会遇到这样的错误. 网上说的原因有3种,但是都不适合我,但是也记录下. 1.struts2截拦掉了ws的请求.这种援用可以尝试把web.xml清空 ...
- 基于jCOM搭建Java－微软信息桥梁(上)
本文将重点讨论BEA的Java/COM解决方案,是全文的第一部分,细致分析BEA提供的Java/COM互操作解决方案—jCOM的实现原理. 一.jCOM简介 据Gartner的研究分析,在名列全球前1 ...
- linux inode cheat sheet
sector:扇区,硬盘存储的最小单位,大小为0.5KB(512字节) block:块文件存取的最小单位,1 block=8 sector,大小4KB inode:存储文件元信息.内容包括 * 文件的 ...
- java提示找不到或无法加载主类
背景 默许jdk的配置大家都没有问题,执行java,javac无报错,但今天在尝试在本地起来kafka的时候,提示java 找不到或无法加载主类,然后日志中提示 Files 找不到或无法加载主类:C: ...
- 基于 Raphael 的 Web UI 设计 - 初稿
基于 Raphael 的 UI 设计 - 初稿 还有很多地方需要完善,这次要把 Raphael 彻底用起来,^_^, 一定要150字哦,一图抵千字啊,^_^,不喜欢写字的,那么怎么凑够150字呢,说说 ...
- 去掉easyui tree 的默认图标
$(".tree-icon,.tree-file").removeClass("tree-icon tree-file"); $(".tree-ico ...
- BASE64编码乱码问题的浅层分析与解释
本文由作者朱臻授权网易云社区发布. 1问题案例 曾在开发过程中,我们遇到了BASE64编码乱码的问题,该问题的场景如下: 当web前端,将带有中文字符的字符串base64编码后,传到后端.当后端将数据 ...
- OpenStack虚机网卡的创建过程
OpenStack虚机网卡的创建过程 OpenStack最基本和常用的操作就是启动虚机.虚机启动的过程中涉及很多内容,其中非常重要的一个环节就是创建并绑定虚机的虚拟网卡.虚机的创建和管理是Nova的任 ...
- Ceph 基础知识和基础架构认识
1 Ceph基础介绍 Ceph是一个可靠地.自动重均衡.自动恢复的分布式存储系统,根据场景划分可以将Ceph分为三大块,分别是对象存储.块设备存储和文件系统服务.在虚拟化领域里,比较常用到的是Cep ...