欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

$.extend 的一個小問題

 更新時間:2015年06月18日 09:32:20   投稿:hebedich  
本文給大家記錄的是個人在使用$.extend 的時候遇到的一個小問題,以及原因分析和解決方案,十分的實用,有需要的小伙伴可以參考下。

最近一直在搞移動端,也由于自己對jQuery比較熟悉,再加上Zepto提供了跟jQuery一樣的API,所以就選擇了Zepto作為開發(fā)框架。

由于是移動端開發(fā),所以也應(yīng)用了一些ES5新增的API,比如forEach,下面就是我寫的代碼的一些示例:

list.forEach(function(v) {
 return !!v;
})

我天真的以為forEach就跟jQuery的each一樣,只要我的返回值為false,它就會中斷循環(huán),于是,類似這樣的遍歷代碼寫了不少(真的是懶得為每個遍歷去聲明變量?。?/p>

寫了一段時間之后我突然發(fā)現(xiàn),forEach的回調(diào)函數(shù)并不能中斷循環(huán),于是,我便在Array.prototype上面掛了個函數(shù),然后replaceAll,完美。

 Array.prototype.foreach = function(fn) {
  var i = 0, len = this.length;

  for (; i < len; ++i) {

    if (fn(this[i], i) === false) {
     break;
    }
   }
 };

直到有一天,我想做點優(yōu)化,考慮到客戶端需要保存的json過大(沒騙你,最大可以去到20M),stringify的時候太過耗時,會阻塞UI,所以我就用Worker在后臺開個線程,專門用來stringify這個json,類似于這樣子:

復(fù)制代碼 代碼如下:

addEventListener("message", function(e) {
  var data = e.data;
  data = JSON.stringify(data);
  postMessage(data);
}, false);

posMesage:

復(fù)制代碼 代碼如下:

worker.postMessage(data)

但是控制臺卻輸出了以下的錯誤信息:

復(fù)制代碼 代碼如下:

Uncaught DataCloneError: Failed to execute 'postMessage' on 'Worker': An object could not be cloned.

坑爹,這天殺的為什么連個json都復(fù)制不了,于是乎,我開始尋找原因,讓我發(fā)現(xiàn)了我的json里面有這個東西:

天啊,這是什么鬼,這個foreach為什么跑進來了,我看了一下編輯器里面的$.extend(true, {}, obj)正在那里瑟瑟發(fā)抖,我不禁懷疑,不會是你丫的在作怪吧。于是乎,我查看了一下$.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] 這里的條件能不能嚴肅點啊,加個hasOwnProperty檢查一下不會浪費多少時間吧。淚流滿面

被Zepto坑了之后,我立馬去找jQuery投訴,希望它能安慰我一下,沒想到:

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;} 就交代了,我的親娘啊。

最后迫不得已,只得自己寫了一個。

總結(jié):當你要使用$.extend的時候,不要輕易在Array.prototype和Object.prototype掛上你自定義的屬性和方法,不然,你以后可能要去找bug了。

以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。

相關(guān)文章

  • jQuery使用方法

    jQuery使用方法

    本文主要介紹了jQuery的使用方法,具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02
  • jQuery中:empty選擇器用法實例

    jQuery中:empty選擇器用法實例

    這篇文章主要介紹了jQuery中:empty選擇器用法,實例分析了:empty選擇器的功能、定義及匹配空元素的用法技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
    2014-12-12
  • jQuery File Upload文件上傳插件使用詳解

    jQuery File Upload文件上傳插件使用詳解

    jQuery File Upload 是一個Jquery文件上傳組件,支持多文件上傳、取消、刪除,上傳前縮略圖預(yù)覽、列表顯示圖片大小,支持上傳進度條顯示;支持各種動態(tài)語言開發(fā)的服務(wù)器端.這篇文章主要介紹了jQuery File Upload文件上傳插件使用,需要的朋友可以參考下
    2016-12-12
  • jquery防止重復(fù)執(zhí)行動畫避免頁面混亂

    jquery防止重復(fù)執(zhí)行動畫避免頁面混亂

    鼠標滑動過快導(dǎo)致動畫重復(fù)執(zhí)行,以至于頁面亂了,下面為大家介紹個防止重復(fù)執(zhí)行動畫的方法
    2014-04-04
  • jQuery阻止移動端遮罩層后頁面滾動

    jQuery阻止移動端遮罩層后頁面滾動

    本文主要介紹了jQuery阻止移動端遮罩層后頁面滾動的方法。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • jQuery 遍歷map()方法詳解

    jQuery 遍歷map()方法詳解

    大家都知道m(xù)ap()方法主要用來遍歷操作數(shù)組和對象,這篇文章將給大家詳細介紹關(guān)于jQuery遍歷map()方法的內(nèi)容,文章給出了詳細的示例代碼,對大家的理解和學(xué)習(xí)很有幫助,有需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。
    2016-11-11
  • 初試jQuery EasyUI 使用介紹

    初試jQuery EasyUI 使用介紹

    想必關(guān)注jQuery的同學(xué)們對jQuery EasyUI已經(jīng)有所耳聞了,目前已經(jīng)更新到1.0.5版本,風(fēng)格與EXTJS有點相似,可以很好的滿足開發(fā)人員對UI的需求。
    2010-04-04
  • 使用jQuery實現(xiàn)驗證上傳圖片的格式與大小

    使用jQuery實現(xiàn)驗證上傳圖片的格式與大小

    在項目中,我們經(jīng)常要遇到上傳圖片,這就需要我們必須要驗證圖片的格式與大小,那么如何來操作呢,今天就給大家分享一個非常簡單的jQuery驗證上傳圖片的格式與大小的代碼。
    2014-12-12
  • JQuery 常用方法和事件詳細介紹

    JQuery 常用方法和事件詳細介紹

    本篇文章是關(guān)于JQuery 常用方法和事件詳細介紹。需要的朋友參考下
    2013-04-04
  • JQuery實現(xiàn)左右滾動菜單特效

    JQuery實現(xiàn)左右滾動菜單特效

    這篇文章主要介紹了jquery實現(xiàn)左右滑動菜單效果代碼,涉及jquery鼠標事件相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-09-09

最新評論