Лучший способ развязать модули и передавать параметры между модулями по событиям - PullRequest
Новая
       6

Лучший способ развязать модули и передавать параметры между модулями по событиям

0 голосов
/ 13 марта 2020

Я использую Require JS в своем веб-приложении. Я нашел немного пошаговой информации о том, как модули должны взаимодействовать на практике. В основном теория. Или несколько слишком сложных примеров, которые я пока не могу понять из-за моего текущего опыта работы с модулями.

Структура каталогов: 

| 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();
    }
  }
});

1 Ответ

1 голос
/ 16 марта 2020

Вы можете использовать какой-нибудь EventBus. Их множество в виде модулей.

Поток очень прост, customizer прослушивает событие, которое вызывается sorting.

Возможно, этого можно достичь с помощью jQuery но я не jQuery эксперт:)

...