Bagaimana cara memperpanjang () bekerja di jQuery?

119

Saya melihat ini di sebuah plugin:

var options = $.extend(defaults, options); 

Bagaimana cara kerjanya?

Apa yang extend()dilakukannya?

Todd Terry
sumber
1
Anda dapat membacanya di dokumentasi jQuery tetapi saya rasa ini adalah penjelasan yang lebih baik untuk itu.
ifaour
jQuery memiliki dokumen yang bagus. api.jquery.com Cukup ketik nama metode di bidang Search jQuery .
pengguna113716
42
Saya pikir Todd ingin tahu cara kerja jQuery.extend, BUKAN cara menggunakannya. Misalnya, apakah itu mengulang setiap properti untuk membuat objek baru, atau apakah itu menggunakan warisan prototipe dengan cara yang mengagumkan.
b01

Jawaban:

178

Beberapa Parameter

Dokumentasi tidak tepat dalam menjelaskan cara kerja ekstensi, jadi saya menjalankan sedikit tes:

var a = {foo: 1, bar: 1};
var b = {foo: 2, baz: 2};
var c = {foo: 3};
var r = jQuery.extend(a,b,c);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar + " Baz=" + a.baz);
console.log("B: Foo=" + b.foo + " Bar=" + b.bar + " Baz=" + b.baz);
console.log("C: Foo=" + c.foo + " Bar=" + c.bar + " Baz=" + c.baz);
console.log("R: Foo=" + r.foo + " Bar=" + r.bar + " Baz=" + r.baz);
console.log("A === R?: " + (a === r));

( console.logFungsi ini dimaksudkan untuk bekerja di Firebug; ganti dengan alert () atau beberapa fungsi keluaran lainnya jika Anda mau).

Hasilnya adalah:

A: Foo=3 Bar=1 Baz=2
B: Foo=2 Bar=undefined Baz=2
C: Foo=3 Bar=undefined Baz=undefined
R: Foo=3 Bar=1 Baz=2
A === R?: true

Dengan ini kita dapat melihat bahwa jQuery.extend ():

  • Dimulai dengan objek yang disediakan oleh parameter pertama.
  • Tambahkan ke properti apa pun di parameter kedua. Jika properti sudah ada di parameter pertama, itu akan ditimpa. Objek untuk parameter kedua tidak berubah.
  • Ulangi hal di atas dengan parameter berikutnya.
  • Mengembalikan parameter pertama.

Ini berguna untuk menggabungkan pengguna dan objek opsi default bersama-sama untuk mendapatkan satu set lengkap opsi:

function foo(userOptions) {
  var defaultOptions = {
    foo: 2,
    bar: 2
  };
  var someOtherDefaultOptions = {
    baz: 3
  };

  var allOptions = jQuery.extend(
    defaultOptions,
    someOtherDefaultOptions,
    userOptions
  );
  doSomething(allOptions);
}

foo({foo:1, baz:1});

Perhatikan bahwa "null" adalah nilai yang valid untuk ditimpa, tetapi "tidak ditentukan" tidak. Anda mungkin bisa memanfaatkan ini.

var a = {foo: "a", bar: "a"};
var b = {foo: null, bar: undefined};
jQuery.extend(a,b);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar);

Hasil dalam:

A: Foo=null Bar=a

Parameter Tunggal

Jika Anda meneruskan hanya satu objek ke jQuery.extend(), maka jQuery mengasumsikan bahwa jQueryobjek itu sendiri adalah parameter "pertama" (yaitu: yang akan dimodifikasi), dan objek Anda adalah "yang kedua" (yaitu: yang akan ditambahkan ke yang pertama) . Begitu:

console.log( "Before: " + jQuery.foo );
jQuery.extend({foo:1});
console.log( "After: " + jQuery.foo );

Hasil dalam:

Before: undefined
After: 1
Craig Walker
sumber
3
jadi jika b.baz adalah objek yang dikatakan {zed: 'dark'}daripada 2dan Anda tetapkan r.baz.zed = 'light', apa nilainya b.baz.zed? yaitu, apakah properti disalin atau digabungkan dengan referensi?
ErichBSchulz
4
untuk menjawab pertanyaan saya sendiri, b.baz.zedakan light- yaitu nilai digabungkan dengan referensi. lihat biola
ErichBSchulz
4
penjelasan yang bagus, +1
Carrie Kendall
2
Saya berharap dokumentasi resminya sejelas ini. +1
Thariq Nugrohotomo
2
$ .extend (true, object1, object2); dan $ .extend (object1, object2); perbedaan ...
Vinay S Jain
27

Ini menggabungkan konten dari satu objek ke objek lainnya . Jika kita melewatkan dua objek, properti objek kedua ditambahkan ke objek pertama / parameter pertama

Ex: $.extend(object1, object2);

Sekarang object1 berisi properti object2

Jika kita ingin menggabungkan dua objek , maka kita perlu melewatkan objek kosong pada parameter pertama

Ex: var newObject = $.extend({}, object1, object2);

Sekarang newObject berisi properti object1 dan object2 .

Gopal
sumber
12

Dari jQuery Documentation

Gabungkan konten dari dua atau lebih objek menjadi satu objek pertama.

Dalam konteks plugin: Jika pengguna tidak menyetel parameter opsional untuk fungsi tersebut, maka nilai default akan digunakan.

JOBG
sumber
1
Jawaban ini harus ada dalam komentar.
Nolo
Terima Kasih JOBG !!
Harsha Vardhan
7

Bagaimana cara memperpanjang () bekerja di jQuery? [Terselesaikan]

jQuery memiliki salinan dalam dan salinan ringan. Boolean pertama memutuskannya, true untuk deep dan false untuk light.

Sebagai contoh:

  • jQuery.extend (false, {'a': {'a1': 1}}, {'a': {'a2': 2}})

    hasilnya akan menjadi: {'a': {'a2': 2}} karena ini adalah salinan ringan bandingkan saja level 1.

    masukkan deskripsi gambar di sini

  • jQuery.extend (true, {'a': {'a1': 1}}, {'a': {'a2': 2}})

    hasilnya akan menjadi: {'a': {'a1': 1, 'a2': 2}} Ini adalah deep copy dengan berbagai level objek (seperti level array)

    masukkan deskripsi gambar di sini

  • jQuery.extend (a, b, c) dengan a, b, c adalah object atau array. Flow overrite akan menjadi b-> a, c -> a (b overrite a, c override a ...) fungsi ini akan mengembalikan nilai a dan juga perubahan.

Contoh Lanjutan:

  • jQuery.extend ({'number_param': 1})

    Jika Anda hanya melewati satu parameter. jQuery akan memperluas dirinya sendiri. console.log (jQuery ['number_param']) akan menampilkan 1.

    masukkan deskripsi gambar di sini

  • jQuery.extend (1, {'number_param': '2'}); Contoh ini tidak menambahkan jQuery itu sendiri. Parameter pertama harus boolean. Dalam hal ini, ini akan mengembalikan {'number_param': '2'} dan jQuery tidak diperbarui.

    masukkan deskripsi gambar di sini

  • jQuery.extend (a, b, c, d, e, f); Penggabungan pesanan akan menjadi. b -> a, c -> a, d -> a, e -> a, f -> a (b menimpa a, c menimpa a ...). Dan hasilnya akan menjadi a.

    dengan a = {'p': 1}. jQuery.extend (a, {'p': 2}, {'p': 3}, {'p': 4}, {'p': 5}) akan mengembalikan a, dan a = {'p': 6}. Parameter angka yang lolos ke fungsi ini tidak terbatas.

    masukkan deskripsi gambar di sini

kristen Nguyen
sumber
1
Dari dok "Peringatan: Meneruskan salah untuk argumen pertama tidak didukung."
Nolo
2

Tujuannya adalah untuk memperluas objek yang sudah ada. Misalnya, jika kita memiliki objek template dan ingin memperluasnya dengan menambahkan lebih banyak properti atau menimpa properti yang sudah ada, jquery expand dapat berguna.

var carObjectTemplate = {
"make": "honda",
"model":"city",
"mileage":"20",
"variant":"petrol"

};

sekarang jika kita ingin memperpanjangnya, $.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'}); itu akan memberi kita output, memperluas carObjectTemplate dan menambahkan

{"color":"red"} property and overriding "model" property from "city" to "amaze"

Parameter boolean pertama benar / salah adalah untuk menunjukkan apakah kita membutuhkan salinan yang dalam atau dangkal

Sanjay Bharwani
sumber
Apa artinya salinan dalam atau dangkal?
Selva Ganapathi
0

Itu persis seperti ini

Deskripsi : Menggabungkan konten dari dua atau lebih objek menjadi satu objek pertama.

Selengkapnya di jQuery.extend ()

Gabriele Petrioli
sumber
1
Jawaban satu baris dan tautan ke dokumen tidak banyak berguna sebagai jawaban dan harus ditinggalkan dalam komentar.
Nolo