字符串标识符方法调用插件的特定实例答案

【问题标题】：String identifier method calls on specific instantiations of a plugin字符串标识符方法调用插件的特定实例
【发布时间】：2016-11-23 15:22:29
【问题描述】：

所以我的插件界面遇到了一些心理障碍。假设您有一个插件，当在 jQuery 选择器上实例化时，它会遍历选择并为每个选定的元素实例化一个新的对象/实例。假设这是我们必须使用的 html：

<p class='p1'> This is just a simple test paragraph </p>
<p class='p2'> And here is another to show variety! </p>

这就是插件的实例化方式：

$('p').pluginName();

现在，这两个 p 标签都已传递到插件 init 中，每个标签都会收到自己的插件实例。当然，我可以使用这些类作为更具体的标识符，但在这里与我一起滚动。假设我现在想使用一个字符串标识符来调用插件来做一些事情，因为它的 API 允许这样：

$('p').pluginName('set', 'some_style');

但我只希望它适用于class p2，比方说，有没有办法为上面的方法调用提供有关特定实例的信息。或者我觉得更有可能是，我是否必须更具体地使用我的实例化和方法调用才能获得我想要影响的实例？

我问是因为，在小范围内，实例化时从一个插件调用变为两个并不那么糟糕。但是，如果这个插件要操作数百个元素怎么办？如果可以避免的话，我不想强迫潜在用户必须实例化每个元素以保留轻松调用这些实例的能力。

其他一些信息...

每个元素都与 data-cl-uid 属性相关联，以保存该元素/实例的唯一 ID 以及对某些状态内容的引用。除此之外，它还用作分组机制，因此当一个或另一个应用了某些东西时，具有相同 ID 的两个实例都会受到影响。我觉得我的设计让我陷入了困境，但我不是一个经验丰富的插件设计师，无法找到一条清晰的前进道路。

希望这提供了一些上下文，这是处理插件本身的代码以及插件根据传递给它的内容所做的事情，也就是当您使用字符串标识符调用一个实例或一组实例时会发生什么：

  $.fn[pluginName] = function (option) {
    var args = arguments;

    if (typeof option === 'object' || !option) {
      this.each(function() {
        if(!$.data(this, 'plugin_'+pluginName))
          $.data(this, 'plugin_'+pluginName, new Clicklight(this, option, args[1]));
        else {
          console.log('ERROR: Cannot create a duplicate object for ',this);
          return false;
        }
      });

    } else if (typeof option === 'string' && option in pubAPI) {
      this.each(function() {
        var instance = $.data(this, 'plugin_'+ pluginName);

        if (instance instanceof Clicklight && typeof instance[option] === 'function')
          instance[option].apply(instance, Array.prototype.slice.call(args, 1));
        else {
          console.log('ERROR: Internal error from \''+option+ '\'');
          return false;
        }
      });

    } else
      console.log('ERROR: No method found with name \''+option+ '\'');

    return this;
  }

希望这些信息足以解决我的问题以及所有需要的代码来显示问题所在。我很乐意编辑的任何其他信息。

【问题讨论】：

标签： javascript jquery methods plugins

【解决方案1】：

经过深思熟虑，我找到了解决问题的方法。我决定构建一个控制器对象，它本质上充当用户和实例之间的中介。对于每个执行的$(SELECTOR).plugin()，将为该实例创建一个控制器，然后该选择器中的每个元素都将成为子元素，并且可以在给定实例中由控制器调用。再加上 API 现在要求放置强制 ID，获取任何单个实例及其成员都非常容易，而实际实例化过程仍然非常简单，甚至可以是一行代码。当我解决了所有错误并找到我喜欢的模式后，我将在我的代码中进行编辑。

【讨论】：