javascript - raphael/jquery中的javascript插件架构如何实现？

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

jQuery 中的fn 对象只是jQuery 构造函数的prototype 属性的别名，这是一个非常基本的结构怎么样它有效:

(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"

我真的建议您阅读有关 constructor functions 的内容, 这里有一些很好的资源:

• Object Oriented Programming in JavaScript
• JavaScript Prototypal Inheritance
• Constructors considered mildly confusing