Пространство имен необходимо знать любому разработчику JavaScript, особенно когда вы изучаете основы, важно, чтобы вы сформировали прочную основу и знали, как защитить свой код . Я думаю, что хороший способ начать это — объяснить, что это такое, и дать вам несколько примеров пространства имен в JavaScript / jQuery.
Что такое пространство имен?
В двух словах, пространство имен — это способ защитить ваш код, используя буквенную нотацию объекта javascript для обеспечения инкапсуляции . Минимизация площади вашего кода в этой корневой области путем структурирования ваших методов / данных в едином пространстве имен должна быть целью каждого достойного разработчика. Преимущества в том, что вы можете называть свои переменные как угодно, и вам не нужно беспокоиться о каком-то другом коде, перезаписывающем его значение. В этой статье я покажу вам пространство имен вложенных объектов, потому что это наиболее распространенная форма пространства имен в jQuery.
Хорошо, давайте сразу углубимся в несколько примеров.
Вы можете вставить любой из этих примеров прямо в консоль Firebug, чтобы посмотреть, что он делает, и поиграть с ним.
Это обычный способ объявления функции в JavaScript.
myFunction = function() { console.log('running myFunction...'); }; myFunction(); //function call Теперь проблема в том, что любой другой код может также объявить вызов функции «myFunction», и это перезапишет ваш! Не хорошо. Так в чем же решение? Вы догадались, пространство имен!
Основное пространство имен
Вот как вы можете создать простое пространство имен для защиты вашей функции:
;MYNAMESPACE = { myFunction: function() { console.log('running MYNAMESPACE.myFunction...'); } } MYNAMESPACE.myFunction(); //function call
Теперь ничто не может перезаписать вашу функцию, и все содержится в пространстве имен «MYNAMESPACE». Для вызова вашей функции вы просто включаете пространство имен перед функцией.
Наименование вашего пространства
Итак, вы посмотрели приведенный выше код и поинтересовались, почему пространство имен все прописные. Я предпочитаю хранить пространства имен в столицах, потому что они являются объектами, на которые ссылается JavaScript, но это зависит от ваших личных или рабочих практик кодирования . Также хорошо, чтобы они были как можно более короткими, поэтому мне, вероятно, следовало бы назвать свое пространство имен «NS» или что-то подобное (это потому, что пространства имен могут становиться длинными, когда они объединены в цепочку, мы рассмотрим это позже в этой статье).
Пространство имен с несколькими функциями
Вы также можете объявить переменные и другие функции, сколько захотите. Все они «локальны» для этого пространства имен (это как контроллер для этого кода). Просто запомните изменения синтаксиса в пространствах имен, потому что вы ссылаетесь на литерал объекта, поэтому вам нужно добавлять запятые после каждого оператора вместо точек с запятой .
;MYNAMESPACE = { name: 'MYNAMESPACE', myFunction1: function() { console.log('running MYNAMESPACE.myFunction...'); }, myFunction2: function() { console.log('running MYNAMESPACE.myFunction...'); } } console.log(MYNAMESPACE.name); //variable call MYNAMESPACE.myFunction1(); //function call MYNAMESPACE.myFunction1(); //function call
Пространства имен внутри пространства имен
Теперь вы думаете о пространстве имен внутри пространства имен , что-то вроде подпространства имен. Да, это также возможно, вам просто нужно убедиться, что ваше основное пространство имен объявлено заранее, например так:
;var MYNAMESPACE = {}; MYNAMESPACE.SUBNAME = { myFunction: function() { console.log('running MYNAMESPACE.SUBNAME.myFunction...'); } } MYNAMESPACE.SUBNAME.myFunction(); //function call
Самоинкапсулированная структура пространства имен jQuery
Хорошо, теперь предположим, что вы хотите использовать само инкапсулированную функцию jQuery (также известную как « анонимная функция » или «самозаполняющаяся функция»), чтобы обернуть ваше пространство имен, но вы хотите иметь возможность ссылаться на свои объекты, функции и переменные, хранящиеся в.
Во-первых, вам нужно объявить пространство имен вне функции включения, чтобы сделать объект доступным для оценки извне, например:
;var MYNAMESPACE = {};
Если вы не создадите переменную во внешней области видимости, вы обязательно увидите следующую ошибку: «ReferenceError: MYNAMESPACE не определен».
Это полная структура кода, который полностью инкапсулируется с использованием пространства имен и включает знак доллара ($) для использования с кодом jQuery только внутри вложенной функции jQuery, чтобы предотвратить конфликты имен с другими платформами .
;var MYNAMESPACE = {}; ;(function($) { MYNAMESPACE.SUBNAME = { myFunction: function() { console.log('running MYNAMESPACE.SUBNAME.myFunction...'); } } })(jQuery); MYNAMESPACE.SUBNAME.myFunction(); //function call
Использование альтернативы области окна
Передача параметров через анонимные функции, такие как jQuery, — это здорово, потому что в вашем случае это позволяет вам использовать $, даже если установлена функция jQuery.noConflict (). Так что в этом смысле было бы разумно, если бы ваш код в вашем пространстве имен использовал ‘$’.
На самом деле вы все еще можете вставить весь код в самореализующуюся функцию, просто назначив MYNAMESPACE для области окна (тот же эффект, что и для var в глобальной области действия выше). Тогда у вас есть инкапсуляция и вы можете свободно использовать $.
;(function($) { // declare var in global scope window.MYNAMESPACE = {}; MYNAMESPACE.SUBNAME = { myFunction: function() { console.log('running MYNAMESPACE.SUBNAME.myFunction...'); } } })(jQuery); MYNAMESPACE.SUBNAME.myFunction(); //function call
Это оно! Я надеюсь, что вы узнали что-то о пространстве имен в JavaScript / jQuery. Если нет, пожалуйста, не стесняйтесь оставлять комментарии. В следующем посте я рассмотрю пространство имен событий, и это здорово.