前言
最近在做移动端开发,用的是zepto,发现他跟jquery比起来称之为天坑不足为过,但是由于项目本身原因,以及移动端速度要求的情况下,也只能继续用下去。
所以在这里做一下汇总
对img标签空src属性用attr取值会取得当前url地址的BUG
如下图,某img标签有src属性,但是其src属性值为空,但是用zepto的attr取src属性值却是当前页面的url地址
BUG原因分析:
//zepto源码
attr: function(name, value){ var result return (typeof name == 'string' && !(1 in arguments)) ? (!this.length || this[0].nodeType !== 1 ? undefined : (!(result = this[0].getAttribute(name)) && name in this[0]) ? this[0][name] : result ) : this.each(function(idx){ if (this.nodeType !== 1) return if (isObject(name)) for (key in name) setAttribute(this, key, name[key]) else setAttribute(this, name, funcArg(this, value, idx, this.getAttribute(name))) }) },
问题在于这个 this[0][name] ,相当于直接取img标签DOM元素的src属性,而不是他的attributes属性里面的值。
在很多情况下元素的DOM属性和attributes属性是不一致的,比如臭名昭著的布尔类类型属性,jquery在这方面做了完善兼容而zepto就没有,非常简单粗暴。
临时解决方案:
编写一个原生js的获取属性的方法
function getAttr(ele, attr) { var e = ele.get(0); var attrs = e.attributes; if (attrs == undefined) { return ""; } else if (attrs[attr] == undefined) { return ""; } else { return attrs[attr].value; } }
判断当前对象是否是Zepto实例化对象的方法
在jquery中,判断是不是jquery实例化对象,直接用instanceof就行,即:
var a=$("body"); if(a instanceof jQuery){ //... }
但是在zepto中这样用是无效的,好在zepto自己提供了一份方法来判断,即:
var a=$("body"); if(Zepto.zepto.isZ(a)){ //... }
其源码是:也就是我们直接去判断instanceof是否zepto.Z即可。
// `$.zepto.Z` swaps out the prototype of the given `dom` array // of nodes with `$.fn` and thus supplying all the Zepto functions // to the array. Note that `__proto__` is not supported on Internet // Explorer. This method can be overriden in plugins. zepto.Z = function(dom, selector) { dom = dom || [] dom.__proto__ = $.fn dom.selector = selector || '' return dom } // `$.zepto.isZ` should return `true` if the given object is a Zepto // collection. This method can be overriden in plugins. zepto.isZ = function(object) { return object instanceof zepto.Z }
使用深度扩展($.extend(true,*,*))后的zepto对象无法使用zepto.isZ来继续判断的bug
直接看图:
原本正常的zepto对象,经过深度扩展后,变成不属于zepto对象了!!
再看下扩展前后的变化:
obj.a.__proto__;//Object {} obj2.a.__proto__;//[]
根据前面的zepto的源码可知,原始对象是有原型属性的,但是经过深度扩展后原型属性没有了!!!
这肯定是$.extend内部写的有问题了:
function extend(target, source, deep) { for (key in source) if (deep && (isPlainObject(source[key]) || isArray(source[key]))) { if (isPlainObject(source[key]) && !isPlainObject(target[key])) target[key] = {} if (isArray(source[key]) && !isArray(target[key])) target[key] = [] extend(target[key], source[key], deep) } else if (source[key] !== undefined) target[key] = source[key] } // Copy all but undefined properties from one or more // objects to the `target` object. $.extend = function(target){ var deep, args = slice.call(arguments, 1) if (typeof target == 'boolean') { deep = target target = args.shift() } args.forEach(function(arg){ extend(target, arg, deep) }) return target }
看完以后发现简直太敷衍了好么!!
直接就用for in遍历也就算了,好歹也得判断下是对象属性还是原型属性呀!
当然既然原型没了,那原型上的方法也就自然全跑到对象上面去了,如此敷衍我也是醉了,如图:
临时解决方案:
目前没想到很好的解决办法,自己多加一些判断。如果有谁有更好的方案请一定告诉我。
扩展阅读
http://chaoskeh.com/blog/some-experience-of-using-zepto.html