RequireJS: Как передавать обновленные данные между модулями

Question

Это первый раз, когда я смотрю в requirejs. Я делаю это, портируя старый проект. Пока все идет хорошо. До сих пор.

Что я всегда делал, это сохранить объект настроек сайта, содержащий такие параметры системы, как высота окна, ширина окна, высота документа, scrolltop и т. Д. Там я обновлял эти значения с помощью изменений размера и прокрутки. Это всегда были глобальные переменные, к которым я мог получить доступ.

Например (используя JQuery)

var mySettingsObject = {}; 
 
mySettingsObject.Init = function() { 
 
    this.winWidth = $(window).width(); 
 

 
    $(window).resize(function(e) { 
 
    mySettingsObject.winWidth = $(window).width(); 
 
    }); 
 
}; 
 

 
$(document).ready(function) { 
 
    mySettingsObject.Init(); 
 
});

Теперь я могу получить доступ к этой переменной, вызвав mySettingsObject.winWidth в любое время из любой функции и она всегда будет в курсе ,

Что я пытаюсь понять, так это то, как я могу иметь такое же поведение, используя зависимость модуля в requirejs?

Это мои два примера модули

define('system', function() { 
 
    // Window settings 
 
    var winWidth = $(window).width(); 
 
    $(window).resize(function(e) { 
 
    winWidth = $(window).width(); 
 
    } 
 

 
    return { 
 
    winWidth: winWidth 
 
    }; 
 
\t \t 
 
}); 
 

 

 
// (is run on dom load) 
 
define('myModule', ['system'], function(system) { 
 
    $(window).on('resize', function() { 
 
    if (system.winHeight === xyz) { 
 
     // do something 
 
    } 
 
    }); 
 
});

system.winHeight работает, как ожидалось, и дает мне высоту окна, как это было на йот нагрузки. Теперь, если я изменил размер браузера, как я могу получить это обновление переменной в пределах myModule, то есть как я могу подключить два модуля.

Answer 1

Вы можете назначить значения, которые вы хотите экспортировать в объект, здесь называемые exports и обновлять новые значения, обновляя соответствующее поле на этом объекте:

define('system', function() { 
    // Window settings 
    var exports = {}; 
    exports.winWidth = $(window).width(); 
    $(window).resize(function(e) { 
    exports.winWidth = $(window).width(); 
    } 

    return exports;  
});