javascript框架设计之种子模块(2)

不过,旧版本IE在这里有个问题,它认为像Object的原型方法就是不应该被遍历出来,因此for in循环是无法遍历valueOf、toString的属性名。这导致,模拟Object.keys方法是现实时也遇到了这个问题。

Object.keys = Object.keys || function(obj){ var a = []; for(a[a.length] in obj); return a; }

在不同的框架,这个方法还有不同的实现,如Ext分别为apply与applyIf两个方法,前者会覆盖目标对象的同名属性,而后者不会。dojo允许多个对象合并在一起。jQuery还支持深拷贝。下面是mass Farmework的mix方法。支持多对象合并与选择是否覆写。

function mix(target,source){ //如果最后参数是布尔,判定是否覆盖同名属性 var args = [].slice.call(arguments), i = 1, key, ride = typeof args[args.length - 1] == "boolean" ? args.pop() : true; if (args.length === 1){ //处理$.mix(hash)的情形 target = !this.window ? this : {}; i = 0; } while ((source = args[i++])) { for (key in source){ //允许对象糅杂,用户保证都是对象 if (ride || !(key in target)) { target[key] = source[key]; } } } return target; }

3.数组化

浏览器下存在很多类数组对象,如function内的arguments,通过document.forms、form.elements,document.links、select.options、document.getElementsByName,document.getElementsByTagName、childNodes、children等方式获取的节点的结合(HTMLCollection 、NodeList)或按照某些特殊的写法自定义对象。

类数组对象是一个很好的存储结构。不过功能太弱了,为了能使用纯数组的那些便捷的方法,我们会在处理它们前都会做一下转换。

通常来说,使用[].slice.call就能转换了 ,不过功能不够用,但在旧版本的HTMLCollection、NodeList不是Object的子类,采用如上的方法会导致IE执行异常。我们看一下

jQuery:makeArray var makeArray = function(array) { var ret = [] ; if(array != null){ var i = array.length; if(i == null || typeof array === "string" || jQuery.isFunction(array) || array.setInterval) ret[0] = array; else while (i) ret(--i) = array[i]; } return ret; }

mass的实现,一开始就进行区分,直接[].slice.call,IE的话自己动手实现一个slice方法

$.slice = window.dispatchEvent ? function(nodes,start,end){ return [].slice.call(nodes,start,end); } : function (nodes,start,end){ var ret = [], n = nodes.length; if (end === void 0 || typeof end === "number" && isFinite(end)){ start = parseInt (start,0) || 0; end = end == void 0 ? n:parseInt (end,10); if(start < 0){ start += n; } if (end > n) { end =n }; if (end < 0) { end += n }; for (var i = start; i < end; ++i){ ret[i-start] = nodes[i]; } } return ret; }

4.类型的判定

javascript存在两套类型系统,一套是基本的数据类型,另一套是对象类型系统。基本数据类型包括6中 。分别是undefined、string、null、boolean、function、object。基本数据类型是通过typeof来检测的。对象类型系统是以基础类型系统为基础的,通过instanceof来检测的。然而,javascript自带的这两套识别机制非常不靠谱,于是就催生了isXXX系列。就拿typeof来说,它只能粗略识别出string、number、boolearn、function、undefined、object这6种数据类型,无法识别null,RegExpArgument等细分的对象类型。

typeof null // => "object" typeof document.childNodes //=> safari: "function" typeof document.creatElement('embed') //=> ff3-10 "function" typeof document.creatElement('object') //=> ff3-10 "function" typeof document.creatElement('object') //=> ff3-10 "function" typeof /\d/i //在实现了ecma262v4的浏览器返回"function" typeof window.alert //ie678 "object" var iframe = document.creatElement("iframe") document.body.appendChild(iframe) xArray = window.frames[window.frames.length - 1].Array; var arr = new xArray(1,2,3) //=>[1,2,3] arr instanceof Array ;// false isNaN("aaa") //=> true

另外,以前人们总是以document.all来判断是否为ie,这其实是很危险的,因为,用document.all来取得页面中所有的元素是不错的注意,这个方法FF,chrome打算使用很久了,不过人们都这样判断,就是在chrome下有这样的闹剧。

typeof document.all //undefined document.all //HTMLAllCollection [728] (728为元素总数)

在判定undefined、null、string、number、boolean、function这六个还算简单,前面两个可以分别与void(0)、null比较,后面4个的typeof也可以满足90%的情形。这样说是因为string、number、boolean可以包装成伪对象。

typeof new Boolean(1); //=>"object" typeof new Number(1); //=>"object" typeof new String("aa"); //=> "object"

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgdfdp.html