Написание модульного JavaScript дает вам много преимуществ:
- повторно используемый код
- разделение макета и логики
- предотвращение дублирования кода
- чище и легче читать

Однако есть еще несколько распространенных ошибок, которые можно совершить, даже следуя инструкциям. Я перечислил некоторые из них ниже.

1) Размещение кода JavaScript в нижней части html-страницы предотвращает блокировку рендеринга JavaScript в браузере.

‹!doctype html ›
‹html›
‹head›
‹meta charset=”utf-8” /›
‹title›Пример модуля‹/title›
‹/head ›
‹body›
‹div id="example"›‹/div›
‹script src="js/modules/Module.js"›‹/script›
‹/body›
‹/html›

2) При написании класса JavaScript функция должна содержать только уникальные свойства модуля. Такие вещи, как элемент html dom и его параметры. Они дублируются для каждого экземпляра модуля, поэтому 1000 модулей означают 1000 ссылок на элементы и 1000 наборов параметров.


function Module(id, options) {
this.el = this.getEl(id);
this.options = options;
this.init();
}

3) Прототип должен храните общие свойства модуля. Это важно, так как при добавлении его в прототип объект сохраняется в памяти браузера только один раз, даже если вы создаете 1000 экземпляров модуля!


Module.prototype = {< br /> name: 'Module',
elements: {},
init: function() {
this.el.innerHTML = 'options: ‹pre›'+JSON.stringify( this.options)+'‹/pre›';
},
getEl: function(id) {
if (this.elements[id]) {
вернуть это. elements[id];
}
else {
this.elements[id] = document.getElementById(id);
return this.elements[id];
}
}
}

4) Теперь вы можете создавать экземпляры вашего модуля, что будет очень эффективно и быстро. В этом примере я также добавил к элементам функцию кэширования, чтобы гарантировать, что каждый элемент находится и упоминается только один раз!


var module = new Module('example', {
> тест: 'привет, мир',
параметр: 23476
});