javascript - 模块解耦、模块间通过事件传递参数的最佳方式

Question

我在我的 Web 应用程序中使用 RequireJS。我发现关于模块在实践中如何交互的分步信息很少。主要是理论。或者一些太难的例子，以我目前的模块经验还无法理解。

目录结构:

| application
| -- app/
    | -- customizer.js
    | -- sorting.js
| -- config.js
| -- require.js

解耦模块和传递参数的正确方法是什么如果事件触发，模块之间？

config.js:

requirejs.config({
  baseUrl: "...",
  paths: {
    customizer: 'app/customizer',
    sorting: 'app/sorting'
  },
  config: {
    '_@r6': {
      view: view,
      selector: {
        sorting: {
          main: ".sort-bar",
          items: ".sorting-item"
        }
      }
    }
  }
});

require(['module', 'customizer', 'sorting'],
  function(module, customizer, sorting) {
  // Variables
  var config = module.config();
  // Modules init data
  var init_data = {
    // Customizer module settings
    customizer: {
      config: config
    },
    // Sorting module settings
    sorting: {
      config: config
    }
  };
  // Init modules
  customizer.init(init_data.customizer);
  sorting.init(init_data.sorting);
});

sorting.js:

define(['jQuery', 'customizer'], function($, customizer) {
  var config;
  var facade = {};
  var selector = {};
  var callbacks = {
    // Events
    sortItems: function() {
      var selector = callbacks.getSelector();
      $(selector.items).find("a").on("click", function(e) {
        e.preventDefault();
        // some actions with DOM
        // then call function from "customizer.js" module
        // or change some properties in the module
        // How to decouple modules there?
        customizer.itemsReload();
      });
    },
    setConfig: function(value) {
      config = value;
    },
    getConfig: function() {
      return config;
    },
    setSelector: function(value) {
      selector = value;
    },
    getSelector: function() {
      return selector;
    }
  };
  return {
    init: function(atts) {
      facade = this;
      callbacks.setConfig(atts.config);
      callbacks.setSelector(config.selector.sorting);
      callbacks.sortItems();
    }
  }
});

customizer.js:

define(['lodash', 'templates'], function(_, templates) {
  var config = {};
  var isLoaded;

  var callbacks = {
    setConfig: function(value) {
      config = value;
    },
    itemsLoad: function() {
      // Some code
      isLoaded = true;
    }
  };
  return {
    init: function(atts) {
      facade = this;
      // Pre Setup
      callbacks.setConfig(atts.config);
      items.itemsLoad();
    },
    itemsReload: function() {
      callbacks.itemsLoad();
    }
  }
});

Answer 1

您可以使用某种EventBus。其中有很多可用作模块。

流程非常简单，定制器监听由排序触发的事件。

也许这可以通过 jQuery 实现，但我不是 jQuery 专家:)