Шаблон дизайна плагинов Javascript, такой как jQuery - PullRequest
Новая
       23

Шаблон дизайна плагинов Javascript, такой как jQuery

7 голосов
/ 20 мая 2010

Может ли кто-нибудь написать очень простой базовый пример в javascript, чтобы осмыслить (и, надеюсь, дать мне понять), как создается шаблон проектирования плагинов jQuery и как он работает?

Меня не интересует, как создать плагин для jQuery (поэтому здесь вообще нет кода jQuery ). Я заинтересован в простом объяснении (возможно, с небольшим количеством кода Javascript), чтобы объяснить , как это делается, концепция плагина .

Плз, не отвечайте мне, чтобы пойти и прочитать код jQuery, я пытался, но я слишком сложен, иначе я бы не стал публиковать здесь вопрос.

Спасибо!

Ответы [ 3 ]

5 голосов
/ 20 мая 2010

jQuery имеет библиотеку функций, хранящуюся во внутреннем объекте с именем fn. Это те, которые вы можете вызывать для каждого объекта jQuery.

Когда вы делаете $("div.someClass"), вы получаете объект jQuery, содержащий все <div> элементы этого класса. Теперь вы можете сделать $("div.someClass").each( someFunction ), чтобы применить someFunction к каждому из них. Это означает, что each() является одной из функций, хранящихся в fn (в данном случае встроенной).

Если вы расширяете (добавляете) внутренний объект fn, то вы автоматически делаете доступной пользовательскую функцию с тем же синтаксисом. Предположим, у вас есть функция, которая записывает все элементы в консоль, которая называется log(). Вы можете добавить эту функцию к $.fn, а затем использовать ее как $("div.someClass").log().

Каждая функция, добавленная к объекту fn, будет вызываться таким образом, что внутри тела функции, ключевое слово this будет указывать на используемый вами объект jQuery.

Обычная практика - возвращать this в конце пользовательской функции, чтобы цепочка методов не нарушалась: $("div.someClass").log().each( someFunction ).

Существует несколько способов добавления функций к объекту $.fn, некоторые из которых безопаснее других. Достаточно безопасно это сделать: 

jQuery.fn.extend({
  foo: function() {
    this.each( function() { console.log(this.tagName); } );
    return this;
  }
})
1 голос
/ 20 мая 2010

Томалак уже выложил практически все, что нужно знать.

Есть еще одна вещь, которая помогает jQuery справиться с ключевым словом this .

это метод называется apply () 

var somefunction=function(){
alert(this.text);
}
var anObject={text:"hello"};

somefunction.apply(anObject);
//alert "hello" will happen

Это действительно помогает в создании абстракций, так что пользователи фреймворка / плагина будут просто использовать this , как подсказывает им интуиция, все, что находится внутри вашего кода

0 голосов
/ 20 мая 2010

Работает, как и многие другие js-фреймворки, используя ориентацию прототипа javascript.

Например, вы можете объявить простую функцию 

var alertHelloWorld = function() {
    alert('hello world');
}

А затем привязать его к существующему объекту (включая узлы DOM) 

document.doMyAlert = alertHelloWorld;

Если вы сделаете это 

document.doMyAlert();

Функция alertHelloWorld будет выполнена

Вы можете узнать больше о прототипировании javascript объекта здесь

...