分离模块并通过事件在模块之间传递参数的最佳方法

Question

我在我的网络应用程序中使用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。它们有很多作为模块可用。

流很简单，customizer监听由sorting触发的事件。

也许可以用jQuery实现这一点，但我不是jQuery专家:)