Почему необходимо использовать пространства имен?

Возьмем, в качестве примера, форум Ext JS, который использует три совершенно различных набора скриптов, созданных разными производителями: Ext JS используется нами для расширения функционала, Google Analytics для отслеживания использования сайта плюс обычные скрипты форума vBulletin. На рисунке представлено каким образом весь этот код из различных источников включается в тело страницы. Вообразите себе количество возможных противоречий с еще большим ростом подключаемых файлов.

Если взглянуть на закладку DOM отладчика Firebug, можно увидеть сотни переменных контекста window, созданных подключенными скриптами. В тоже самое время Ext JS объединяет все свои классы в едином пространстве имен Ext и далее организует их в виде отдельных пакетов.

Когда вы пишете собственный срипт, вам следует помещать все свои классы и синглтоны (singletone) в некие пространства имен чтобы предотвратить противоречия с кодом других разработчиков. Термин «пространство имен» определяется в Википедии (EN, RU) следующим образом: «… абстрактный контейнер предоставляющий контекст для содержащихся в нем элементов (имена, термины или слова) и позволяющий предотвратить возникновение неоднозначностей в случае существования элементов с одинаковыми именами…».

Пространства имен это важный инструмент разработчика, гарантирующий невозможность перезаписи одного кода другим. Ведь если иной разработчик определит переменную с таким же, как у вас именем, то существовавшее до этого определение будет перезаписано. Последний подключенный, в таком случае, фрагмент кода будет всегда одерживать верх.

Так как JavaScript является языком с функциональными областями видимости^*, то создание функции или/и переменной не «обернутых» в функцию приводит к появлению их в глобальной области видимости (в контексте window). Чтобы предотвратить это разработчики помещают свои классы в объекты.

^* примечание переводчика:

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

Пространства имен без Ext JS

Без Ext JS вы можете создать пространство имен следующим образом:

if (!App) App = {};
if (!App.form) App.form = {};
if (!App.data) App.data = {};

Ext.namespace

Объект Ext предоставляет метод Ext.namespace (или его шоткат Ext.ns), который проверяет создаваемое пространство имен на существование и создает его, если такового еще нет. Сначала следует определить первоначальный уровень пространства, а затем можно создавать различные подуровни-пакеты. Например, создадим пространство имен App и входящие в него пакеты form и data:

/* Ext.namespace создаст объекты с переданными именами, если они еще не существуют */
Ext.namespace('App', 'App.form', 'App.data');

/* Теперь можно определять новый класс, например SampleForm, внутри пакета App.form */
App.form.SampleForm = Ext.extend(Ext.form.FormPanel, {
    initComponent: function() {
        /* код настройки компонента */
       App.form.SampleForm.superclass.call(this);
   }
});
/* Определение MySingleton внутри пакета App.data */
App.data.MySingleton = function() {
    return {
        sampleStaticMethod: Ext.emptyFn
    };
}();

В завершение

Используемый в web-приложениях на стороне клиента код JavaScript становится все более сложным и сложным. Поэтому важность правильной организация совместной работы вашего кода и кода третьих сторон также вырастает. Использование пространств имен гарантирует защиту вашему коду от перезаписи другим, находящимся в глобальной области видимости, кодом.

От переводчика

Автор оригинала: Aaron Conran

Оригинал статьи: Use Namespaces to organize your JavaScript code

Представим, что история предшественников ничему нас не научила и украсим document.body со всей жестокостью, на которую способен человеческий разум в погоне за прекрасным — заставим страничку откликаться всплеском как от хорошо булькнувшего в болоте камешка.

Нам понадобится Mootools, редактор Flash, чувство меры, руки и непредвзятое отношение ко всему, что будет дальше.

Что необходимо получить

Нет нужды перебирать достоинства или недостатки flash. Как в случае со многими технологиями необходимо просто прийти к решению использовать его или отказаться. В этом примере мы решили закрыть глаза на все минусы и применить в качестве фундамента.

Озадачимся созданием анимационного эффекта всплеска от клика на канве страницы с поддержкой полупрозрачности.

следует заметить

Эффект надо бы назвать псевдовсплеском ввиду того, что он не деформирует поверхность как это есть при реальных кругах на воде.

Также необходим механизм выборочного отключения эффекта для различных элементов и их групп.

Эффект в действии

Если вы хотите что-либо изучить, а не выучить, то лучший способ этого добиться — смотреть код самостоятельно. Документация это замечательно, код — лучше. Поэтому рекомендуется просто заглянуть в код этой страницы. Для нетерпеливых выборочные участки кода приведены ниже.

В самом простом случае включение эффекта осуществляется подключением pellet.js и созданием объекта эффекта:

<html>
	<head>
	//…
	<script type="text/javascript" src="/js/pellet.js"></script>
	//…
	</head>
	<body>
		<script type="text/javascript">
			var myPellet;
			window.addEvent('domready', function(){
				myPellet = new pellet();
			});
		</script>
	</body>
</html>

Смысл заключается в создании объекта после загрузки всего дерева элементов страницы. Реализуется это силами Mootools в теле обработчика нестандартного события onDomReady. Это все.

Подгонка эффекта

Как изменить цвет всплеска, его размеры, фактуру? Просто откройте pellet.fla и рисуйте. Стоит, однако, помнить, что если вы изменили габариты flash-ролика, то об этом надо сообщить и js-части.

Для того чтобы задать элементы при клике на которых эффект воспроизводиться не будет, используется один из параметров конструктора exclude. Параметр представляет собой строку, где через запятую в синтаксисе CSS перечислены правила для исключаемых элементов.

на заметку

Mootools — правильный «браузер» и поддерживает большинство из всех мыслимых комбинаций селекторов. Обратитесь к шпаргалке по CSS, если хотите узнать о них больше. Это автоматически расширит ваши возможности в исключении элементов из «поля видимости» эффекта.

Немного примеров:

var myPellet = new pellet();
/*
все параметры по умолчанию:
	ролик находится по /flash/pellet.swf
	ширина: 50px
	высота: 50px
	исключаемые элементы: *[disabled], input[type=text], input[type=checkbox], input[type=radiobutton], textarea, select
*/

myBluePellet = new pellet({flash: '/flash/bluePellet.swf'});
/*
ролик находится по /flash/bluePellet.swf
все остальные параметры по умолчанию:
	ширина: 50px
	высота: 50px
	исключаемые элементы: *[disabled], input[type=text], input[type=checkbox], input[type=radiobutton], textarea, select
*/

myCustomPellet = new pellet({flash: '/flash/customPellet.swf', width: 40, height: 40, exclude: '#header, div.blackHole, input[type~=submit]'});
/*
все параметры переопределены:
	ролик находится по /flash/customPellet.swf
	ширина: 40px
	высота: 40px
	исключаемые элементы: #header, div.blackHole, input[type~=submit]
*/

Подводные камни и нюансы

1. Когда начинать? Создание объекта должно произойти только после полной загрузки объектной модели документа. IE, например, имеет дурную привычку выводить сообщение о невозможности загрузить страницу при попытке писать в еще не загрузившийся document.body.
2. IE и фоновое изображение. IE иногда глючит, забывая обновить фоновую картинку после того как всплеск исчез. В этом можно убедиться, кликнув на грани градиентного фона внизу страницы.
3. Linux. В большинстве дистрибутивов Linux и Unix наблюдается отвратительная поддержка прозрачного фона flash-ролика — ее попросту нет. Ужасное зрелище, особенно на темных страницах. Рекомендуется определять тип платформы чтобы не использовать эффект который плохо поддерживается.
   

   примечание

   В Mootools 1.2dev имеется набор свойств Client.Platform который поможет в детектировании платформы. К сожалению, это полезное семейство отсутствует в версии 1.11 которая является стабильной веткой фреймворка.

4. Когда лучше? В случае светлой странички — мелкие цветовые артефакты эффекта заметны менее, да и оттенки видны лучше.
5. Минус. Заключается он в перекрытии собой на время проигрывания всего, что находится под ним. Например, в случае сгруппированных рядом чекбоксов не всегда получится с должной скоростью прощелкать по всем ним — клик будет попадать по «всплеску».

Заключение

В качестве вкусного напоследок будет архив с примерами, исходниками двух «плюх», их swf версиями и самим js-классом. Приятного аппетита чтения.