$.extend 的一個(gè)小問(wèn)題
最近一直在搞移動(dòng)端,也由于自己對(duì)jQuery比較熟悉,再加上Zepto提供了跟jQuery一樣的API,所以就選擇了Zepto作為開發(fā)框架。
由于是移動(dòng)端開發(fā),所以也應(yīng)用了一些ES5新增的API,比如forEach,下面就是我寫的代碼的一些示例:
list.forEach(function(v) { return !!v; })
我天真的以為forEach就跟jQuery的each一樣,只要我的返回值為false,它就會(huì)中斷循環(huán),于是,類似這樣的遍歷代碼寫了不少(真的是懶得為每個(gè)遍歷去聲明變量?。?/p>
寫了一段時(shí)間之后我突然發(fā)現(xiàn),forEach的回調(diào)函數(shù)并不能中斷循環(huán),于是,我便在Array.prototype上面掛了個(gè)函數(shù),然后replaceAll,完美。
Array.prototype.foreach = function(fn) { var i = 0, len = this.length; for (; i < len; ++i) { if (fn(this[i], i) === false) { break; } } };
直到有一天,我想做點(diǎn)優(yōu)化,考慮到客戶端需要保存的json過(guò)大(沒(méi)騙你,最大可以去到20M),stringify的時(shí)候太過(guò)耗時(shí),會(huì)阻塞UI,所以我就用Worker在后臺(tái)開個(gè)線程,專門用來(lái)stringify這個(gè)json,類似于這樣子:
addEventListener("message", function(e) {
var data = e.data;
data = JSON.stringify(data);
postMessage(data);
}, false);
posMesage:
worker.postMessage(data)
但是控制臺(tái)卻輸出了以下的錯(cuò)誤信息:
Uncaught DataCloneError: Failed to execute 'postMessage' on 'Worker': An object could not be cloned.
坑爹,這天殺的為什么連個(gè)json都復(fù)制不了,于是乎,我開始尋找原因,讓我發(fā)現(xiàn)了我的json里面有這個(gè)東西:
天啊,這是什么鬼,這個(gè)foreach為什么跑進(jìn)來(lái)了,我看了一下編輯器里面的$.extend(true, {}, obj)正在那里瑟瑟發(fā)抖,我不禁懷疑,不會(huì)是你丫的在作怪吧。于是乎,我查看了一下$.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 }
我的天啊,還真是這貨在作怪啊,遍歷數(shù)組用for...in..也就算了,但是 else if (source[key] !== undefined) target[key] = source[key] 這里的條件能不能嚴(yán)肅點(diǎn)啊,加個(gè)hasOwnProperty檢查一下不會(huì)浪費(fèi)多少時(shí)間吧。淚流滿面
被Zepto坑了之后,我立馬去找jQuery投訴,希望它能安慰我一下,沒(méi)想到:
jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, i = 1, length = arguments.length, deep = false; // Handle a deep copy situation if ( typeof target === "boolean" ) { deep = target; target = arguments[1] || {}; // skip the boolean and the target i = 2; } // Handle case when target is a string or something (possible in deep copy) if ( typeof target !== "object" && !jQuery.isFunction(target) ) { target = {}; } // extend jQuery itself if only one argument is passed if ( length === i ) { target = this; --i; } for ( ; i < length; i++ ) { // Only deal with non-null/undefined values if ( (options = arguments[ i ]) != null ) { // Extend the base object for ( name in options ) { src = target[ name ]; copy = options[ name ]; // Prevent never-ending loop if ( target === copy ) { continue; } // Recurse if we're merging plain objects or arrays if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { if ( copyIsArray ) { copyIsArray = false; clone = src && jQuery.isArray(src) ? src : []; } else { clone = src && jQuery.isPlainObject(src) ? src : {}; } // Never move original objects, clone them target[ name ] = jQuery.extend( deep, clone, copy ); // Don't bring in undefined values } else if ( copy !== undefined ) { target[ name ] = copy; } } } } // Return the modified object return target; };
這貨也是 else if ( copy !== undefined ) {target[ name ] = copy;} 就交代了,我的親娘啊。
最后迫不得已,只得自己寫了一個(gè)。
總結(jié):當(dāng)你要使用$.extend的時(shí)候,不要輕易在Array.prototype和Object.prototype掛上你自定義的屬性和方法,不然,你以后可能要去找bug了。
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
相關(guān)文章
jquery防止重復(fù)執(zhí)行動(dòng)畫避免頁(yè)面混亂
鼠標(biāo)滑動(dòng)過(guò)快導(dǎo)致動(dòng)畫重復(fù)執(zhí)行,以至于頁(yè)面亂了,下面為大家介紹個(gè)防止重復(fù)執(zhí)行動(dòng)畫的方法2014-04-04jQuery阻止移動(dòng)端遮罩層后頁(yè)面滾動(dòng)
本文主要介紹了jQuery阻止移動(dòng)端遮罩層后頁(yè)面滾動(dòng)的方法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03使用jQuery實(shí)現(xiàn)驗(yàn)證上傳圖片的格式與大小
在項(xiàng)目中,我們經(jīng)常要遇到上傳圖片,這就需要我們必須要驗(yàn)證圖片的格式與大小,那么如何來(lái)操作呢,今天就給大家分享一個(gè)非常簡(jiǎn)單的jQuery驗(yàn)證上傳圖片的格式與大小的代碼。2014-12-12JQuery實(shí)現(xiàn)左右滾動(dòng)菜單特效
這篇文章主要介紹了jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼,涉及jquery鼠標(biāo)事件相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09