javascript - 纯 Javascript 插件开发

Question

我需要开发一个纯 javascript 插件，它可以像 jquery 类型的插件一样访问($('.pluginWrapper').pluginInit();

但是我需要使用纯 javascript，我在考虑可能支持的 2 种格式:

document.getElementById('pluginWrapper').pluginInit();
pluginInit(document.getElementById('pluginWrapper'));

我知道你必须做一个 IIFE 来包装它并通过对象方法调用它，但我不知道如何将它绑定(bind)到一个元素。

我提到我是一个初学者，所以请有人解释一下这件事。干杯!

Answer 1

开发一个插件接口(interface)会更安全，该接口(interface)只是将插件公开为以元素作为参数的函数。

function MyPlugin(element) {
  // do stuff with element
  element.setAttribute('data-plugin-id', 'pluginName');
}

另一种方法涉及扩展 Element.prototype。这可能是 a dangerous action在生产软件中。

不过，还是有可能的。

Element.prototype.pluginInit = function() {
  // the element is accessible as `this`
  this.setAttribute('data-plugin-id', 'pluginName');
}

一个功能，大家很容易理解。插件编写者不必了解任何用于创建和注册插件的接口(interface)，他们只需要知道他们应该编写将元素作为参数的函数。

Rich Hickey(Clojure 的创造者)有一个很棒的演讲 Simplicity Matters他在其中强调，您能做的最糟糕的事情就是在简单的解决方案可行的情况下增加额外的复杂性。

在这种情况下，您不需要比将元素作为参数的函数更复杂的东西。

---

如果您必须控制该功能，您可以编写一个简单的界面来注册和启动插件。

function Plugin(element) {
  if(element === null) {
    throw new TypeError("Element must not be null!");
  }

  // get all the plugin names from the store
  var pluginNames = Object.keys(Plugin.store);

  // make sure `this` is set to the element for each plugin
  var availablePlugins = pluginNames.reduce(function(plugins, name) {
    plugins[name] = Plugin.store[name].bind(element);
    return plugins;
  }, {});

  // return an object containing all plugins
  return availablePlugins;
}

// we'll store the plugins in this object
Plugin.store = {};

// we can register new plugins with this method
Plugin.register = function(name, pluginFn) {
  Plugin.store[name] = pluginFn;
};

你可以这样使用。

Plugin.register('myPlugin', function() {
  this.setAttribute('data-plugin-id', 'myPlugin');
});

Plugin(document.getElementById('pluginWrapper')).myPlugin();

---

如果你想让插件函数带一个选择器，就像jQuery一样，那么你可以使用document.querySelectorAll。在您对 Plugin 的定义中。

function Plugin(selector) {
  var element = document.querySelectorAll(selector);

  if(element === null) {
    throw new TypeError("Element must not be null!");
  }

  // get all the plugin names from the store
  var pluginNames = Object.keys(Plugin.store);

  // make sure `this` is set to the element for each plugin
  var availablePlugins = pluginNames.reduce(function(plugins, name) {
    plugins[name] = Plugin.store[name].bind(element);
    return plugins;
  }, {});

  // return an object containing all plugins
  return availablePlugins;
}

然后你会像这样使用它。

Plugin.register('myPlugin', function() {
  this.setAttribute('data-plugin-id', 'myPlugin');
});

Plugin('#pluginWrapper').myPlugin();