Как сделать плагинную архитектуру javascript в Raphael / JQuery?

Question

Я ищу простой пример javascript, который демонстрирует, как архитектура плагина javascript работает с большими библиотеками javascript (такими как Raphael или JQuery). В любом случае вы создаете плагины, следя за тем, чтобы ваш пользовательский плагин следовал этому шаблону: jQuery.fn.pluginName - поэтому предположим, что у меня есть библиотека:

myLibrary = (function() {
    //my fancy javascript code
    return function() {
        //my return object
    };
});

Как fn будет включен в вышеупомянутый myLibrary объект, чтобы гарантировать, что его полученный плагин будет вызываться? Я создаю экземпляр myLibrary вот так:

var lib = new myLibrary();

А теперь я включил ссылку на мой плагин на своей странице:

myLibrary.fn.simplePlugin = function() { //more fancy code }

Итак, наконец, я могу просто позвонить:

lib.simplePlugin();

В сущности, какая магия на самом деле происходит, когда .fn используется при создании плагина?

Answer 1

Объект fn в jQuery - это просто псевдоним для свойства prototype конструктора jQuery, вот как выглядит базовая структура:

(function() {
  var myLibrary = function(arg) {
    // ensure to use the `new` operator
    if (!(this instanceof myLibrary))
      return new myLibrary(arg);
    // store an argument for this example
    this.myArg = arg;
    //..
  };

  // create `fn` alias and define some "core" methods
  myLibrary.fn = myLibrary.prototype = {
    init: function () {/*...*/}
    //...
  };
  // expose the library
  window.myLibrary = myLibrary;
})();

Тогда, поскольку myLibrary является функцией конструктора, вы можете расширить ее prototype (или fn в этом примере это тот же объект):

// a "plugin"
myLibrary.fn.myPlugin = function () {
  alert(this.myArg);
  return this; // return `this` for chainability
};

myLibrary("foo").myPlugin(); // alerts "foo"

Очень рекомендую прочитать о функциях конструктора , вот несколько полезных ресурсов:

• Объектно-ориентированное программирование в JavaScript
• Наследование прототипов JavaScript
• Считается, что конструкторы слегка сбивают с толку