Masalah kecil dengan $.extend_jquery

Saya telah mengusahakan terminal mudah alih baru-baru ini Memandangkan saya biasa dengan jQuery dan Zepto menyediakan API yang sama seperti jQuery, saya memilih Zepto sebagai rangka kerja pembangunan.

Memandangkan ia adalah pembangunan mudah alih, beberapa API ES5 baharu turut digunakan, seperti forEach Berikut ialah beberapa contoh kod yang saya tulis:

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

Saya secara naif berfikir bahawa forEach sama seperti setiap jQuery selagi nilai pulangan saya palsu, ia akan mengganggu gelung Jadi, saya menulis banyak kod traversal seperti ini (saya benar-benar malas untuk menulisnya setiap lintasan).

Selepas menulis seketika, saya tiba-tiba mendapati bahawa fungsi panggil balik forEach tidak boleh mengganggu gelung, jadi saya menggantung fungsi pada Array.prototype, dan kemudian menggantikanSemua, sempurna.

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

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

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

Sehingga satu hari, saya ingin melakukan pengoptimuman Memandangkan json yang perlu disimpan oleh pelanggan adalah terlalu besar (Saya tidak mahu, maksimum boleh 20M), stringify terlalu memakan masa dan akan menyekat. UI, jadi saya Gunakan Worker untuk membuka utas di latar belakang khusus untuk merangkaikan json ini, serupa dengan ini:

Salin kod Kod adalah seperti berikut:

addEventListener("mesej", fungsi(e) {
var data = e.data;
data = JSON.stringify(data);
postMessage(data);
}, palsu);

posMesej:

Salin kod Kod adalah seperti berikut:

worker.postMessage(data)

Tetapi konsol mengeluarkan mesej ralat berikut:

Salin kod Kod adalah seperti berikut:

Uncaught DataCloneError: Gagal melaksanakan 'postMessage' pada 'Worker': Objek tidak dapat diklon.

Apa kejadahnya, kenapa saya tidak boleh menyalin json Jadi, saya mula mencari sebabnya, dan saya menemui perkara ini dalam json saya:

Ya tuhan, apa ini? , tidak mungkin anda yang menyebabkan masalah. Jadi, saya menyemak kod sumber $.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
 }

Ya Tuhan, lelaki ini benar-benar menimbulkan masalah. Tidak mengapa untuk digunakan untuk...dalam... untuk melintasi tatasusunan, tetapi jika (sumber[kunci] !== tidak ditentukan) sasaran[kunci] = sumber. [ kunci] Bolehkah keadaan di sini menjadi lebih serius Menambahkan hasOwnProperty untuk menyemak tidak akan membuang banyak masa. Dengan air mata yang mengalir di muka saya

Selepas ditipu oleh Zepto, saya segera pergi ke jQuery untuk mengadu, berharap ia dapat menghiburkan saya, tetapi tanpa diduga:

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) &#63; src : [];

          } else {
            clone = src && jQuery.isPlainObject(src) &#63; 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;
};

Lelaki ini juga lain jika ( copy !== undefined ) {target[ name ] = copy;} Beritahu sahaja ibu sayangku.

Akhirnya saya tiada pilihan selain menulis sendiri.

Ringkasan: Apabila anda ingin menggunakan $.extend, jangan mudah menambahkan sifat dan kaedah tersuai anda pada Array.prototype dan Object.prototype, jika tidak, anda mungkin perlu mencari pepijat pada masa hadapan.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.