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对象只是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"

我真的建议你阅读constructor functions，这里有一些很好的资源：

如何在raphael / jquery中完成javascript插件架构？

1 个答案: