$.extend 的一个小问题

 更新时间:2015年06月18日 09:32:20   投稿:hebedich  
本文给大家记录的是个人在使用$.extend 的时候遇到的一个小问题,以及原因分析和解决方案,十分的实用,有需要的小伙伴可以参考下。

最近一直在搞移动端,也由于自己对jQuery比较熟悉,再加上Zepto提供了跟jQuery一样的API,所以就选择了Zepto作为开发框架。

由于是移动端开发,所以也应用了一些ES5新增的API,比如forEach,下面就是我写的代码的一些示例:

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

我天真的以为forEach就跟jQuery的each一样,只要我的返回值为false,它就会中断循环,于是,类似这样的遍历代码写了不少(真的是懒得为每个遍历去声明变量啊)

写了一段时间之后我突然发现,forEach的回调函数并不能中断循环,于是,我便在Array.prototype上面挂了个函数,然后replaceAll,完美。

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

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

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

直到有一天,我想做点优化,考虑到客户端需要保存的json过大(没骗你,最大可以去到20M),stringify的时候太过耗时,会阻塞UI,所以我就用Worker在后台开个线程,专门用来stringify这个json,类似于这样子:

复制代码 代码如下:

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

posMesage:

复制代码 代码如下:

worker.postMessage(data)

但是控制台却输出了以下的错误信息:

复制代码 代码如下:

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

坑爹,这天杀的为什么连个json都复制不了,于是乎,我开始寻找原因,让我发现了我的json里面有这个东西:

天啊,这是什么鬼,这个foreach为什么跑进来了,我看了一下编辑器里面的$.extend(true, {}, obj)正在那里瑟瑟发抖,我不禁怀疑,不会是你丫的在作怪吧。于是乎,我查看了一下$.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..也就算了,但是 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;} 就交代了,我的亲娘啊。

最后迫不得已,只得自己写了一个。

总结:当你要使用$.extend的时候,不要轻易在Array.prototype和Object.prototype挂上你自定义的属性和方法,不然,你以后可能要去找bug了。

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • 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文件上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端.这篇文章主要介绍了jQuery File Upload文件上传插件使用,需要的朋友可以参考下
    2016-12-12
  • jquery防止重复执行动画避免页面混乱

    jquery防止重复执行动画避免页面混乱

    鼠标滑动过快导致动画重复执行,以至于页面乱了,下面为大家介绍个防止重复执行动画的方法
    2014-04-04
  • jQuery阻止移动端遮罩层后页面滚动

    jQuery阻止移动端遮罩层后页面滚动

    本文主要介绍了jQuery阻止移动端遮罩层后页面滚动的方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • jQuery 遍历map()方法详解

    jQuery 遍历map()方法详解

    大家都知道map()方法主要用来遍历操作数组和对象,这篇文章将给大家详细介绍关于jQuery遍历map()方法的内容,文章给出了详细的示例代码,对大家的理解和学习很有帮助,有需要的朋友们下面来一起学习学习吧。
    2016-11-11
  • 初试jQuery EasyUI 使用介绍

    初试jQuery EasyUI 使用介绍

    想必关注jQuery的同学们对jQuery EasyUI已经有所耳闻了,目前已经更新到1.0.5版本,风格与EXTJS有点相似,可以很好的满足开发人员对UI的需求。
    2010-04-04
  • 使用jQuery实现验证上传图片的格式与大小

    使用jQuery实现验证上传图片的格式与大小

    在项目中,我们经常要遇到上传图片,这就需要我们必须要验证图片的格式与大小,那么如何来操作呢,今天就给大家分享一个非常简单的jQuery验证上传图片的格式与大小的代码。
    2014-12-12
  • JQuery 常用方法和事件详细介绍

    JQuery 常用方法和事件详细介绍

    本篇文章是关于JQuery 常用方法和事件详细介绍。需要的朋友参考下
    2013-04-04
  • JQuery实现左右滚动菜单特效

    JQuery实现左右滚动菜单特效

    这篇文章主要介绍了jquery实现左右滑动菜单效果代码,涉及jquery鼠标事件相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09

最新评论