jquery AMD 插件 - each() 不循环？答案

【问题标题】：jquery AMD plugin - each() does not loop?jquery AMD 插件 - each() 不循环？
【发布时间】：2015-03-07 20:54:03
【问题描述】：

我试图用 AMD 模式制作一个 jquery 插件，但似乎我无法让 each() 循环。它只返回 第一个 项目，但我有三个项目。

index.html,

<body>
    <div class="element">
        1
    </div>

    <div class="element">
        2
    </div>

    <div class="element">
        3
    </div>
</body>

在html中head，

$(document).ready(function(){
    $(".element").plugin2().data('plugin_plugin2').someMethod();
});

plugin.js，

!function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(root.jQuery);
    }
}(this, function($) {

    var pluginName = 'plugin2',
        defaults = {
            param1:       'param1',
            param2:       'param2'
        };

    var Plugin = function(element, options) {
        this.element    = element;
        this.options    = options;
    };

    Plugin.prototype = {
        constructor: Plugin,

        someMethod: function(options) {
            var rootScope = this;

            return rootScope.element.each(function(e){

                console.log(e); // you get 0 only
                console.log(this); // the first <div class="element"> only

            });
        }
    };

    $.fn[pluginName] = function(options) {
        options = $.extend(true, {}, defaults, options);

        return this.each(function() {
            var $this = $(this);
            $this.data('plugin_' + pluginName, new Plugin($this, options));
        });
    };

    $.fn[pluginName].defaults = defaults;
    $.fn[pluginName].Plugin   = Plugin;
});

任何想法我做错了什么？

【问题讨论】：

标签： javascript jquery each js-amd jquery-1.9

【解决方案1】：

像所有 jQuery 的 getter/setter 方法一样，data 是不对称的：当 setting 时，它会设置 jQuery 集合中的所有元素，但当得到，它只从第一个得到。

所以这一行：

$(".element").plugin2().data('plugin_plugin2').someMethod();

...只会为您提供集合中第一个元素的数据。如果你想查看所有三个的数据，你也需要循环那里：

$(".element").plugin2().each(function() {
    $(this).data('plugin_plugin2').someMethod();
});

但从根本上说，您的代码所做的并不是您如何在插件中实现方法（尤其是因为这个原因）。相反，在插件中实现方法的常用方法是让主插件方法接受一个字符串（方法名称），例如：

$(".element").plugin2().plugin2("someMethod");

谢谢。那么它如何寻找样板来执行此操作 -$(".element").plugin2().plugin2("someMethod");

这是一个非常简单的例子：

(function($) {
  var methods = {
    init: function() {
      // If you have to do different things on different
      // elements, use this.each(...) or similar
      this.css("color", "red");
      return this;
    },
    color: function(color) {
      // If you have to do different things on different
      // elements, use this.each(...) or similar
      this.css("color", color);
      return this;
    },
    increment: function(color) {
      // For example, this is effectively a `this.each(...)`:
      this.text(function() {
        return +$(this).text() + 1;
      });
      return this;
    }
  };
  var slice = Array.prototype.slice;
  $.fn.foo = function(method) {
    var f = methods[method || "init"];
    if (!f) {
      throw "Unknown method for plugin `foo`: '" + method + "'";
    }
    return f.apply(this, slice.call(arguments, 1));
  };
})(jQuery);

setTimeout(function() {
  $(".element").foo();
}, 500);
setTimeout(function() {
  $(".element").foo("color", "green");
}, 1000);
setTimeout(function() {
  $(".element").foo("increment");
}, 1500);

<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【讨论】：

谢谢。那么它如何寻找样板来执行此操作 -$(".element").plugin2().plugin2("someMethod");？
@tealou：大约有 350,000 个 jQuery 插件教程将向您展示该模式。我将尝试在上面添加一个 minimal 示例，但我的时间很短。
谢谢。当你有时间的时候，你能看看这个样板有什么问题吗 - gist.github.com/simonsmith/4353587 ？