ฉันเห็นสิ่งนี้ในปลั๊กอิน:

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

มันทำงานอย่างไร?

อะไรextend()ทำอย่างไร

หลายพารามิเตอร์

เอกสารประกอบอธิบายวิธีการทำงานของส่วนขยายได้ไม่ชัดเจนดังนั้นฉันจึงทำการทดสอบเล็กน้อย:

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.logฟังก์ชันนี้มีไว้เพื่อทำงานใน Firebug ให้แทนที่ด้วย alert () หรือฟังก์ชันเอาต์พุตอื่น ๆ หากคุณต้องการ)

ผลลัพธ์คือ:

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

จากสิ่งนี้เราจะเห็นว่า jQuery.extend ():

• เริ่มต้นด้วยอ็อบเจ็กต์ที่จัดเตรียมโดยพารามิเตอร์แรก
• เพิ่มคุณสมบัติใด ๆ ในพารามิเตอร์ที่สอง หากคุณสมบัติมีอยู่แล้วในพารามิเตอร์แรกคุณสมบัตินั้นจะถูกเขียนทับ วัตถุสำหรับพารามิเตอร์ที่สองไม่มีการเปลี่ยนแปลง
• ทำซ้ำด้านบนด้วยพารามิเตอร์ที่ตามมา
• ส่งกลับพารามิเตอร์แรก

สิ่งนี้มีประโยชน์สำหรับการรวมผู้ใช้และอ็อพชันเริ่มต้นเข้าด้วยกันเพื่อให้ได้ชุดตัวเลือกที่สมบูรณ์:

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});

โปรดทราบว่า "null" เป็นค่าที่ถูกต้องสำหรับการเขียนทับ แต่ "ไม่ได้กำหนด" ไม่ใช่ คุณอาจสามารถใช้ประโยชน์จากสิ่งนี้ได้

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);

ผลลัพธ์ใน:

A: Foo=null Bar=a

พารามิเตอร์เดียว

หากคุณส่งผ่านวัตถุเพียงชิ้นเดียวไปjQuery.extend()jQuery จะถือว่าjQueryออบเจ็กต์นั้นเป็นพารามิเตอร์ "ตัวแรก" (กล่าวคือสิ่งที่จะแก้ไข) และวัตถุของคุณคือ "ตัวที่สอง" (กล่าวคือวัตถุที่จะเพิ่มเข้าไปในตัวแรก) . ดังนั้น:

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

ผลลัพธ์ใน:

Before: undefined
After: 1

มันผสานเนื้อหาของวัตถุหนึ่งไปยังอีก หากเราส่งผ่านวัตถุสองชิ้นคุณสมบัติของวัตถุที่สองจะถูกเพิ่มให้กับวัตถุแรก / พารามิเตอร์ตัวแรก

Ex: $.extend(object1, object2);

ตอนนี้object1 มีคุณสมบัติของ object2

ถ้าเราต้องการรวมสองวัตถุเราต้องส่งผ่านวัตถุว่างในพารามิเตอร์แรก

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

ตอนนี้newObject มีคุณสมบัติทั้งสอง object1 และ object2

จากเอกสาร jQuery

รวมเนื้อหาของวัตถุสองชิ้นขึ้นไปเข้าด้วยกันเป็นวัตถุแรก

ในบริบทปลั๊กอิน:หากผู้ใช้ไม่ได้ตั้งค่าพารามิเตอร์เสริมสำหรับฟังก์ชันระบบจะใช้ค่าเริ่มต้นแทน

expand () ทำงานอย่างไรใน jQuery [มติ]

jQuery มีสำเนาลึกและสำเนาเบา บูลีนตัวแรกตัดสินใจว่าจริงสำหรับลึกและเท็จสำหรับแสง

ตัวอย่างเช่น:

• jQuery.extend (เท็จ, {'a': {'a1': 1}}, {'a': {'a2': 2}})

  ผลลัพธ์จะเป็น: {'a': {'a2': 2}} เพราะนี่คือการคัดลอกเพียงเล็กน้อยเปรียบเทียบระดับ 1

  

• jQuery.extend (จริง, {'a': {'a1': 1}}, {'a': {'a2': 2}})

  ผลลัพธ์จะเป็น: {'a': {'a1': 1, 'a2': 2}} นี่คือสำเนาลึกที่มีวัตถุหลายระดับ (เช่นเดียวกับระดับของอาร์เรย์)

  

• jQuery.extend (a, b, c) โดย a, b, c คือ object หรือ array การแทนที่โฟลว์จะเป็น b-> a, c -> a (b แทนที่ a, c แทนที่ a ... ) ฟังก์ชันนี้จะคืนค่า a และยังเปลี่ยนค่าด้วย

ตัวอย่างขั้นสูง:

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

  ในกรณีที่คุณผ่านพารามิเตอร์เพียงตัวเดียว jQuery จะขยายตัวเอง console.log (jQuery ['number_param']) จะแสดงผล 1

  

• jQuery.extend (1, {'number_param': '2'}); ตัวอย่างนี้ไม่ได้ต่อท้าย jQuery เอง พารามิเตอร์แรกต้องเป็นบูลีน ในกรณีนี้จะส่งคืน {'number_param': '2'} และ jQuery ไม่ได้รับการอัปเดต

  

• jQuery.extend (a, b, c, d, e, f); การรวมคำสั่งซื้อจะเป็น b -> a, c -> a, d -> a, e -> a, f -> a (b แทนที่ a, c แทนที่ a ... ) และผลตอบแทนจะเป็น

  ด้วย a = {'p': 1} jQuery.extend (a, {'p': 2}, {'p': 3}, {'p': 4}, {'p': 5}) จะส่งคืน a และ a = {'p': 6} พารามิเตอร์ตัวเลขส่งผ่านไปยังฟังก์ชันนี้ไม่ จำกัด

  

จุดประสงค์คือการขยายวัตถุที่มีอยู่ ตัวอย่างเช่นถ้าเรามีออบเจ็กต์เทมเพลตและต้องการขยายโดยการเพิ่มคุณสมบัติเพิ่มเติมหรือแทนที่คุณสมบัติที่มีอยู่ jquery expand จะมีประโยชน์

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

};

ตอนนี้ถ้าเราต้องการขยาย $.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'}); มันจะทำให้เรามี ouput ขยาย carObjectTemplate และเพิ่ม

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

พารามิเตอร์บูลีนแรกจริง / เท็จคือการระบุว่าเราต้องการสำเนาลึกหรือตื้น

มันไม่ตรงนี้

คำอธิบาย : รวมเนื้อหาของวัตถุสองชิ้นขึ้นไปเข้าด้วยกันเป็นวัตถุแรก

เพิ่มเติมได้ที่jQuery.extend ()