Question

我正在尝试构建一个Javascript插件。它将是一个滑块/轮播，能够为每张幻灯片添加选项和操作。我知道已经有类似的插件，但首先我想在构建插件时进行一些练习然后我认为如果我需要它可能更容易按照我想要的方式扩展它。

这是我第一次尝试构建Javascript插件，在阅读了不同的设计模式后，我认为这符合我的需求：http://markdalgleish.com/2011/05/creating-highly-configurable-jquery-plugins/

所以，我的html会是这样的：

<div class="container">
  <div class="item" data-step-in="stepin" data-step-out="stepout">item</div>
  <div class="item" data-step-in="stepin2" data-step-out="stepout2">item</div>
  <div class="item" data-step-in="stepin3" data-step-out="stepout3">item</div>
</div>

理想情况下，我想调用容器元素上的插件并让它为每个元素设置所有选项：

$('.container').slider();

基本的插件结构是：

(function(window, $) {
  var Plugin = function(elem, options) {
    this.elem = elem;
    this.$elem = $(elem);
    this.options = options;
    this.items = {};
  };

  Plugin.prototype = {
    defaults: {
      message: 'Hello world!',
      itemsClass: '.item'
    },
    init: function() {
      this.config = $.extend({}, this.defaults, this.options);

      $(this.config.itemsClass).each(function(i, obj) {
        console.log(i, obj);
        this.items[i][item] = obj;    <--- problem!
      });

      return this;
    },
  };

  Plugin.defaults = Plugin.prototype.defaults;

  $.fn.slider = function(options) {
    return this.each(function() {
      new Plugin(this, options).init();
    });
  };

  window.Plugin = Plugin;
})(window, jQuery);

在init函数中，我想迭代这些项，并将它们与所有选项一起存储在全局对象中。这是我失败的地方。在each周期内this指的是迭代的单个项目。那么，从这里开始，我如何在构造函数中引用this.items？这里最好的方法是什么？该用途的模式是错误的吗？

Answer 1

将您想要的this存储在变量中并从那里调用：

init: function() {
      var that = this;
      that.config = $.extend({}, that.defaults, that.options);

      $(that.config.itemsClass).each(function(i, obj) {
        console.log(i, obj);
        that.items[i][item] = obj;    <--- problem!
      });

      return that;
    },

即使this会根据范围发生变化，that也会与您在函数开头时设置的内容保持一致

高度可定制的插件模式中的Javascript范围问题

1 个答案: