Организация JavaScript файлов, модульный подход | Wiki | PWODEV
, 16.11.2017 14:27

Организация 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);

Если имеются дополнения пишите в комментариях, будем добавлять.


Добавить комментарий