Организация JavaScript файлов, модульный подход
Не так давно столкнулся с одним сайтом где один javascript файл содержал больше чем 15 тысяч строк. В нем лежали все модули которые использовал сайт, часть кода была сжатая а другая часть читабельная. При попытке отформатировать код в PHPStorm, в коде появлялось неисчислимое количество ошибок. Было принято решение переделать всю структуру JS кода на сайте. Но как часто бывает, времени на это было очень мало, и поэтому быстрый фикс был — хардкод. Но с оговоркой что когда-нибудь вернемся и все переделаем. И вот наконец-то время это пришло.
Для начала было решено разбить код на части, на отдельные файлы, и каждый кусок функционала выносить в отдельный файл. Так же пригодился модульный подход при работе с JS. Полностью писать статью о том как это все делалось времени не хватит, ибо работы много. Вам лишь приведу в пример заготовку, шаблон, темплейт каждого отдельного JS файла.
Пример JS кода:
/**
* =====================================================================================================================
* App
* =====================================================================================================================
*/
var App = (function (r, $) {
"use strict";
/**
* private options
* =================================================================================================================
*/
var private_option_1;
var private_option_2;
/**
* private method 1
* =================================================================================================================
*/
function private_method_1() {
// code
}
/**
* private method 2
* =================================================================================================================
*/
function private_method_2() {
// code
}
/**
* public options
* =================================================================================================================
*/
r.public_option_1 = 'public_option_1';
r.public_option_2 = 'public_option_2';
/**
* public method 1
* =================================================================================================================
*/
r.public_method_1 = function() {
// code
};
/**
* public method 2
* =================================================================================================================
*/
r.public_method_2 = function() {
// code
};
/**
* return
* =================================================================================================================
*/
return r;
})(App || {}, jQuery);
console.log(App);
Если имеются дополнения пишите в комментариях, будем добавлять.
Читайте также:
- Спецсимволы для использования в HTML коде
- Google jQuery WordPress — как правильно подключить
- is email? javascript verification function
- Клик вне элемента — jQuery click outside
- Full page jQuery plugin scrolling