Question

我正在为一个可重复使用的项目编写一个小插件，但它需要启动，我只是坚持如何。我把它剥掉了以显示裸骨（下图）：

( function ( window, document, undefined ) {

  var Plugin = function ( elem ) {
    this.elem = elem;
  };

  Plugin.prototype = {

    init : function () {
        // init stuff
    }

  };

  var inputs = document.querySelectorAll('input');
  for ( var i = 0; i < inputs.length; i++ ) {
    new Plugin(inputs[i]).init();
  }

})( window, document );

我要说这已经完成了大约80％，我很困惑在哪里'调用'插件，简单来说，脚本运行，但我没有调用它。

我需要这样做：

for ( var i = 0; i < inputs.length; i++ ) {
    inputs[i].Plugin();
}

哪个会调用它，目前我只是在对象上调用'new'。任何关于正确设置（jQuery样式但没有jQuery）的帮助都会很棒。谢谢！

如果需要，请

Fiddle：

Answer 1

请不要试图让它看起来很棒。

for ( var i = 0; i < inputs.length; i++ ) {
    new Plugin(inputs[i]).init();
}

是一个美丽而严重低估的API。但是，如果你坚持，你可以在.Plugin()上放置HTMLElement.prototype（这就是这个），这会在IE7-8中破坏它。

另外，将undefined传递给IIFE是一个坏主意。

Answer 2

Extending the DOM is a bad idea

但为了使其更简单，将初始化内容移动到构造函数 - 这就是构造函数的构造：

(function (window, document, undefined) {
  function Plugin(elem) {
    this.elem = elem;
    // init stuff
  }
  Plugin.prototype.otherFunctions = …;

  var inputs = document.querySelectorAll('input');
  for (var i = 0; i < inputs.length; i++)
    new Plugin(inputs[i]);

})(window, document);

使用原型构建原始JS'插件'

2 个答案: