Question

试图了解OLOO模式。这里有一个小提琴，可以更容易解释：https://jsfiddle.net/t0o5jnyL/

(function() {

  return PushdownProto = {
    init: function(elem) {
      this.element = $(elem);
      this.btn = this.element.find('.js-pushdown-btn');
      this.bindEvents();
    },
    open: function open() {
      var panel = this.btn.data('panel');
      this.btn.addClass('is-active');
      $('#' + panel).addClass('is-active');
    },
    close: function close() {
      var panel = this.btn.data('panel');
      this.btn.removeClass('is-active');
      $('#' + panel).removeClass('is-active');
    },
    toggle: function toggle(e) {
      console.log(e);
      if ($(e.target).hasClass('is-active')) {
        this.close();
      } else {
        this.open();
      }
    },
    bindEvents: function bindEvents() {
      var self = this;
      this.element.find('.js-pushdown-btn').on('click', $.proxy(self.toggle, this));
    }
  };

})();

(function() {

  return PickerProto = {
    init: function init(sector) {

      var origin = sector + ' .js-pushdown1';
      var destination = sector + ' .js-pushdown2';

      Pushdown1 = Object.create(PushdownProto);
      Pushdown1.init(origin);

      Pushdown2 = Object.create(PushdownProto);
      Pushdown2.init(destination);

    }
  }

})();

(function() {

  var SectorPicker1 = Object.create(PickerProto);
  SectorPicker1.init('.sector1');

  var SectorPicker2 = Object.create(PickerProto);
  SectorPicker2.init('.sector2');

})();

我创建了一个名为pushdown的简单对象，并创建了多个对象（Pushdown1和Pushdown2）链接到下推对象。这些对象创建一个名为PickerProto的新对象，我想从中创建新对象。

如果你看一下这个小提琴，你可以看到第2区的下推不会起作用并控制第1区的下推。

我想这是因为它使用相同的对象。所以我的问题是如何使用允许模块化的OLOO模式构建我的代码。

希望这是有道理的。并提前感谢任何建议。

Answer 1

这是因为：

1st - ＆gt;你正在使用IIFE

第二 - ＆gt;在HTML中你有＆＃34; sector1＆＃34;两次而不是＆＃34; sertor1＆＃34;和＆＃34; sector2＆＃34;

https://jsfiddle.net/49rnyu7u/1/

JS：

var PushdownProto = {
    init: function(elem) {
      this.element = $(elem);
      this.btn = this.element.find('.js-pushdown-btn');
      this.bindEvents();
    },
    open: function open() {
      var panel = this.btn.data('panel');
      this.btn.addClass('is-active');
      $('#' + panel).addClass('is-active');
    },
    close: function close() {
      var panel = this.btn.data('panel');
      this.btn.removeClass('is-active');
      $('#' + panel).removeClass('is-active');
    },
    toggle: function toggle(e) {
      console.log(e);
      if ($(e.target).hasClass('is-active')) {
        this.close();
      } else {
        this.open();
      }
    },
    bindEvents: function bindEvents() {
      var self = this;
      this.element.find('.js-pushdown-btn').on('click', $.proxy(self.toggle, this));
    }
  };

var PickerProto = {
    init: function init(sector) {

      var origin = sector + ' .js-pushdown1';
      var destination = sector + ' .js-pushdown2';

      Pushdown1 = Object.create(PushdownProto);
      Pushdown1.init(origin);

      Pushdown2 = Object.create(PushdownProto);
      Pushdown2.init(destination);

    }
  }

      var SectorPicker1 = Object.create(PickerProto);
  SectorPicker1.init('.sector1');

  var SectorPicker2 = Object.create(PickerProto);
  SectorPicker2.init('.sector2');

HTML：

<div class="sector1">

  <h2>Sector 1</h2>

  <div class="js-pushdown1">
    <button class="js-pushdown-btn" data-panel="panel1">Panel 1</button>
    <div id="panel1" class="js-pushdown-panel">This is panel 1</div>
  </div>

  <div class="js-pushdown2">
    <button class="js-pushdown-btn" data-panel="panel2">Panel 2</button>
    <div id="panel2" class="js-pushdown-panel">This is panel 2</div>
  </div>

</div>

<div class="sector2">

  <h2>Sector 2</h2>

  <div class="js-pushdown1">
    <button class="js-pushdown-btn" data-panel="panel3">Panel 3</button>
    <div id="panel3" class="js-pushdown-panel">This is panel 3</div>
  </div>

  <div class="js-pushdown2">
    <button class="js-pushdown-btn" data-panel="panel4">Panel 4</button>
    <div id="panel4" class="js-pushdown-panel">This is panel 4</div>
  </div>

</div>

PS：我在开玩笑说IIFEs :)一般来说，如果你删除不需要的代码会更好。它将在未来缓解您的发展。

如何使用OLOO模式的多个对象

1 个答案: