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

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


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