Question

我需要开发一个纯javascript插件，可以像jquery类型的插件一样访问（r{2,4}

但是我需要使用纯JavaScript，我想的可能是2种支持的格式：

$('.pluginWrapper').pluginInit();

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

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

Answer 1

您可以更安全地开发一个插件接口，只需将插件公开为将元素作为参数的函数。

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');
}

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

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相同），则可以在Plugin的定义中使用document.querySelectorAll。

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();

纯Javascript插件开发

1 个答案: