$.extend 的一个小问题

   本文给大家记录的是个人在使用$.extend 的时候遇到的一个小问题,以及原因分析和解决方案,十分的实用,有需要的小伙伴可以参考下。

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

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

  ?

  1

  2

  3list.forEach(function(v) {

  return !!v;

  })

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

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

  ?

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10Array.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的源码:

  ?

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

  16

  17

  18

  19

  20

  21

  22

  23function 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投诉,希望它能安慰我一下,没想到:

  ?

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

  16

  17

  18

  19

  20

  21

  22

  23

  24

  25

  26

  27

  28

  29

  30

  31

  32

  33

  34

  35

  36

  37

  38

  39

  40

  41

  42

  43

  44

  45

  46

  47

  48

  49

  50

  51

  52

  53

  54

  55

  56

  57

  58

  59

  60

  61

  62

  63jQuery.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了。

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

时间: 2024-11-08 19:25:20