tutorial - كيف يعمل الامتداد() في jQuery؟



jquery download (6)

معلمات متعددة

الوثائق ليست دقيقة في شرح كيفية عمل الامتداد ، لذلك أجريت بعض الاختبار:

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

لاحظ أن القيمة "فارغة" هي قيمة صالحة للكتابة فوقها ، ولكن "غير معرفة" ليست كذلك. قد تكون قادرًا على الاستفادة من هذا.

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

رأيت هذا في البرنامج المساعد:

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

كيف يعمل؟

ماذا extend() ؟


الغرض هو تمديد كائن موجود. على سبيل المثال ، إذا كان لدينا كائن قالب ونريد توسيعه بإضافة المزيد من الخصائص أو تجاوز الخصائص الموجودة ، يمكن أن يكون امتداد jquery مفيدًا.

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"

المعلمة المنطقية الأولى true / false هي الإشارة إلى ما إذا كنا بحاجة إلى نسخة عميقة أو ضحلة


للإجابة "كيف تعمل؟" - ما حاول أحدًا القيام به.

هنا نسخة مبسطة جدا.

function extend ( target, src ) {
    // convert all arguments ( even those unseen in the function arity )
    // to an array
    var args = Array.prototype.slice.call ( arguments ),
        deep = false;

    if ( typeof target === 'boolean' && target === true ) {
        // recursive copy

        // remove deep copy flag from the arguments list
        deep = args.shift ();

        // copy to the original target
        target = args.shift ();
    }

    for ( var i = 0, l = args.length; i < l; i = i + 1 ) {
        src = args [ i ];
        if ( src ) {
            for ( var key in src) {
                if ( Object.hasOwnProperty ( src, key ) ) {
                    if ( deep && typeof src [ key ] === 'object' ) {
                        // warning this is only a simple version
                        // doesn't handle arrays specifically
                        // but rather converts them to a plain object
                        target [ key ] = extend ( deep, {}, src [ key ] );
                    } else {
                        target [ key ] = src[ key ];
                    }
                }
            }
        }
    }

    return target;
}

هنا هو source حديث للطريقة الفعلية


من jQuery الوثائق

قم بدمج محتويات كائنين أو أكثر معًا في الكائن الأول.

في سياق المكوِّن الإضافي: إذا لم يقم المستخدم بتعيين المعلمات الاختيارية للدالة ، فسيتم استخدام القيمة الافتراضية بدلاً من ذلك.


يفعل هذا بالضبط

الوصف ؛ : دمج محتويات اثنين أو أكثر من الكائنات معا في الكائن الأول.

المزيد على jQuery.extend ()


يدمج محتوى كائن واحد إلى آخر . إذا قمنا بتمرير كائنين ، تتم إضافة خصائص الكائن الثاني إلى أول كائن / أول معلمة

Ex: $.extend(object1, object2);

الآن يحتوي object1 على خصائص الكائن 2

إذا كنا نريد دمج كائنين ، فسنحتاج إلى تمرير كائن فارغ في المعلمة الأولى

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

يحتوي newObject الآن على كلا خصائص الكائن 1 و object2 .





jquery-plugins