$.extend 的一个小问题


Posted in Javascript onJune 18, 2015

最近一直在搞移动端,也由于自己对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了。

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

Javascript 相关文章推荐
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
详解如何较好的使用js
Dec 16 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
纯js实现无限空间大小的本地存储
Jun 18 #Javascript
JS实现当前页居中分页效果的方法
Jun 18 #Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 #Javascript
javaScript中Math()函数注意事项
Jun 18 #Javascript
理解Javascript的动态语言特性
Jun 17 #Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 #Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 #Javascript
You might like
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
nodejs教程之入门
2014/11/21 NodeJs
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
python实现绘制树枝简单示例
2014/07/24 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Django入门使用示例
2017/12/12 Python
django项目搭建与Session使用详解
2018/10/10 Python
Python 实现向word(docx)中输出
2020/02/13 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
应届专科生个人的自我评价
2014/01/05 职场文书
公司转让协议书
2016/03/19 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
宪法宣传标语100条
2019/10/15 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android