Компиляция разоблачающего шаблона модуля - PullRequest
Новая
       19

Компиляция разоблачающего шаблона модуля

0 голосов
/ 23 сентября 2019

Я пишу приложение, которое использует шаблон модуля выявления-иш.Я использую Gulp для компиляции, поэтому я могу установить порядок компиляции.Кроме некоторых jQuery, нет никаких других фреймворков или библиотек.

Я пытаюсь разбить файлы:

  • Основной файл JS сайта,
  • , один для общих настроек соответствующей функции,
  • один для пользовательского интерфейса функции
  • и другой для данных функции.

Я пытаюсь использовать пространство имен следующим образом: 

myApp
myApp.dashboard
myApp.dashboard.ui
myApp.dashboard.data

Проблема заключается ввложение пространства имен, потому что (например) на мой dashboard.ui.js файл ссылаются в dashboard.js

Я получаю Uncaught TypeError: Cannot set property 'ui' of undefined при попытке доступа к myApp.dashboard.ui.

Я пыталсякаждый порядок компиляции, который я могу придумать.Я предполагаю, что что-то не так с моим шаблоном, но я не уверен, что.Вот пример кода.

// app.js 

let myApp = (function(){

    const $els = {
        menu: $('#menu')
        // etc.
    };

    const eventHandlers = () => {
        //site-wide click event handlers (for example)
    };

    const utils = {
        // utility functions
    };

    const init = () => {
        // set some site variables, etc.
        eventHandlers();
    };

    return {
        init,
        utils
    };
})(myApp || {});

// dashboard.js 

myApp.dashboard = (function (parent){

    // ! need access to the UI
    let ui = parent.dashboard.ui;

    const eventHandlers = () => {
        ...
    };

    const init = () => {
        eventHandlers();
    };

    return {
        init
    };

})(myApp || {});

// dashboard.ui.js 

myApp.dashboard.ui = (function (parent){

    // ! need access to the DATA
    let ui = parent.dashboard.data;

    const htmlTemplate = (content) => {
        return `<h1>${content}</h1>`;
    };

    const setValidationFlags = () => {
        ...
    };

    return {
        setValidationFlags
    };

})(myApp || {});

// dashboard.data.js 

myApp.dashboard.data = (function (parent){

    const getData = (dataObject) => {
        // do XHR look up
        // call setter, etc.
    };

    const parseForm = () => {
        // collect form data.
    };

    return {
        parseForm
    };

})(myApp || {});

Может кто-нибудь дать несколько советов о том, как исправить свой код, чтобы я мог вкладывать части пользовательского интерфейса и данных в myApp.dashboardпространство имен и есть три доступны друг другу?

Если этот шаблон далеко от базы, указатели на то, как его улучшить, также приветствуются.

1 Ответ

0 голосов
/ 23 сентября 2019

dashboard требует ui требует data, поэтому вам необходимо загрузить их в обратном порядке.И пусть каждый модуль устанавливает целое дерево имен, которое ему нужно, когда оно еще не доступно: 

// data.js
var myApp;
if (!myApp) myApp = {};
if (!myApp.dashboard) myApp.dashboard = {};
myApp.dashboard.data = (function(){
    …
    return { parseForm };
})();

// ui.js
var myApp;
if (!myApp) myApp = {};
if (!myApp.dashboard) myApp.dashboard = {};
myApp.dashboard.ui = (function(){
    // need access to the DATA
    const data = myApp.dashboard.data;
    …
    return {setValidationFlags};
})();

// dashboard.js
var myApp;
if (!myApp) myApp = {};
if (!myApp.dashboard) myApp.dashboard = {};
myApp.dashboard.init = (function(){
    // need access to the UI
    const ui = parent.dashboard.ui;
    …
    return () => {
        eventHandlers();
    };
})();

Альтернативой может быть не использование ссылок на другие модули внутри IIFE, которые выполняются немедленно, аотложите их до вызова init, когда все модули должны быть загружены.

...