Різниця між jQuery.extend та jQuery.fn.extend?


83

Я намагаюся зрозуміти синтаксис плагіна jquery, оскільки я хочу об’єднати два плагіни в один. Блимач, який також повинен мати можливість зупиняти інтервал або запускати кілька разів.

У будь-якому випадку, цей синтаксис такий самий, як

jQuery.fn.extend({
    everyTime: function(interval, label, fn, times) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, times);
        });
    },
    oneTime: function(interval, label, fn) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, 1);
        });
    },

це

$.fn.blink = function(options)
    {

оскільки, схоже, перший (без =) - це спосіб встановити кілька методів одночасно. Чи це правильно? Крім того, поки я тут Що може бути причиною для додавання елементів та певної логіки до об’єкта jquery?

jQuery.extend({
    timer: {
        global: [],
        guid: 1,
        dataKey: "jQuery.timer",

(це з плагіна таймера)


Якщо ви розробляєте спеціальні плагіни jQuery, я рекомендую прочитати цю тему stackoverflow.com/questions/1117086/…
CrandellWS

Відповіді:


89

jQuery.extend використовується для розширення будь-якого об'єкта додатковими функціями, але jQuery.fn.extend використовується для розширення об'єкта jQuery.fn, який фактично додає кілька функцій плагіна за один раз (замість того, щоб призначати кожну функцію окремо).

jQuery.extend :

var obj = { x: function() {} }

jQuery.extend(obj, { y: function() {} });

// now obj is an object with functions x and y

jQuery.fn.extend :

jQuery.fn.extend( {
        x: function() {},
        y: function() {}
});

// creates 2 plugin functions (x and y)

1
дякую, це зрозуміло щодо призначення кількох об'єктів, але я все ще не впевнений, коли слід використовувати jquery.extend. Чому ви передаєте щось, що робите у fn.extend, у jquery.extend? Я також можу опублікувати нове запитання щодо цього, оскільки я задав два запитання.
Річард

13
jQuery.extend () насправді є зручною функцією, яку можна використовувати у власному коді javascript для розширення об'єктів загальним способом. Це частина функцій "утиліти" у jQuery (не використовується для маніпуляцій DOM)
Філіп Лейбаерт,

74
jQuery.extend({
    abc: function(){
        alert('abc');
    }
});

Використання: $.abc(). (Селектор не потрібен, наприклад $.ajax().)

jQuery.fn.extend({
    xyz: function(){
        alert('xyz');
    }
});

Використання: $('.selector').xyz(). (Селектор потрібен, як$('#button').click() .)

В основному він використовується для реалізації $.fn.each() .

Сподіваюся, це допоможе.


20

Різниця між jQuery.extend та jQuery.fn.extend?

Насправді, немає нічого, крім базового посилання. У джерелі jQuery ви можете прочитати:

jQuery.extend = jQuery.fn.extend = function() { … };

То як це працює? Документація говорить:

Об’єднує вміст двох або більше об’єктів разом у перший об’єкт.

Це просто цикл for-in-loop, який копіює властивості, розкладені прапором для повторення вкладених об'єктів. І ще одна особливість:

Якщо надано лише один аргумент $.extend(), це означає, що цільовий аргумент пропущено

 // then the following will happen:
 target = this;

Отже, якщо функція викликана jQueryсама (без явного призначення), вона розширить простір імен jQuery. І якщо функцію викликано jQuery.fn(без явної цілі), вона розширить об’єкт-прототип jQuery, де знаходяться всі методи (плагіна).


Мій прихильник !!!! до цього . я дивився на вихідний код, щоб побачити, як jQuery поширюється
dekdev

15

Цей запис у блозі має приємний опис:

$.fn.extend({
myMethod: function(){...}
});
//jQuery("div").myMethod();

$.extend({
myMethod2: function(){...}
});
//jQuery.myMethod2();

Цитати:

Як загальне правило, слід розширити об'єкт jQuery для функцій і об'єкт jQuery.fn для методів. Функція, на відміну від методу, не отримує доступ безпосередньо з DOM.


1
Що означає доступ до методу "безпосередньо з DOM" ?
Ден Ніссенбаум,

1
directly from the DOMпосилається на дуже базову концепцію JavaScript виклику функції проти виклику властивості об'єкта / прототипу (на обгортці jQuery навколо власних об'єктів DOM). Дивіться приклад і спробуйте знайти різницю та подумайте, чому код у прикладах не є взаємозамінними.
gavenkoa

10
$.fn.something= function{};

вказує на jQuery.prototype і дозволяє отримати доступ до елементів dom через "this". Тепер ви можете використовувати $(selector).something();Отже, це працює як функція плагіна$(selector).css();

$.something = function{};

додає властивість або функцію до самого об'єкта jQuery, і u не може використовувати "this" для доступу до dom. Тепер u може використовувати це як $.something() ; це працює як функція утиліти як$.trim()

але

$.fn.extend({function1(), function2()}) and  $.extend({function1(), function2()}) 

дозволяє одночасно додавати більше 1 функції. Крім того, їх можна використовувати для об'єднання двох літералів об'єктів, якщо ми надаємо більше одного об'єкта.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.