1. 1. Замыкания для расширения области действия переменной
2. Дальнейшее чтение
3. Дальнейшее чтение
4. Дальнейшее чтение:
5. Дальнейшее чтение:
6. Дальнейшее чтение:
7. Заключение

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

Эта статья не обязательно охватывает все детали описываемых мной методов, но предоставляет обзор, а также примеры кода, некоторые практические методы кодирования JavaScript.

1. Замыкания для расширения области действия переменной

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

Проще говоря, замыкания позволяют расширять область видимости за пределы ограничений общих функций. Мне нравится, как Джереми Кит описывает замыкания в своей книге Пуленепробиваемый Аякс :

«Думайте о замыканиях как о региональной сфере: более широкой, чем локальная, но не столь широкой, как глобальная».

Чтобы создать замыкание, вы вкладываете функцию внутрь функции. Эта внутренняя функция имеет доступ ко всем переменным в области видимости родительской функции. Это удобно при создании методов и свойств в объектно-ориентированных скриптах. Вот простой пример, который демонстрирует использование замыкания:

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

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

См. Ссылки ниже для некоторых более глубоких объяснений замыканий и их связи с областью действия. Я также настоятельно рекомендую вам выбрать хорошую продвинутую книгу по JavaScript, которая предлагает хорошее обсуждение концепций, связанных с замыканиями.

Дальнейшее чтение

2. Объектные литералы для передачи необязательных аргументов

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

Давайте сначала посмотрим, как мы можем сделать это типичным образом, чтобы мы могли увидеть контраст:

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

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

Теперь давайте посмотрим на тот же код, используя объектные литералы для передачи аргументов:

Технически, для второго способа передачи аргументов может потребоваться немного больше кода, но при большом наборе аргументов есть несколько преимуществ.

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

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

Дальнейшее чтение

3. Контекстное нацеливание элементов DOM

Иногда бывают случаи, когда вам нужно пройти через DOM и получить доступ к определенному элементу или группе элементов, но из-за определенных ограничений у вас может не быть прямого доступа к элементам через имя класса CSS или идентификатор в коде HTML. , Это может быть из-за пользовательского контента, созданного с помощью текстового редактора, или динамического контента, извлекаемого из базы данных.

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

Давайте создадим некоторый базовый HTML-код, который будет служить нашей страницей примера:

Используя приведенный выше HTML-код, если мы хотим нацелить все якорные теги на странице, мы можем собрать их и манипулировать ими следующим образом:

Однако, если мы хотим нацелить только теги привязки в нижнем колонтитуле, мы нацеливаем их на их контекст или окружающие элементы, например так:

Первая строка захватывает ссылку на элемент нижнего колонтитула. Вторая строка собирает все теги <a> внутри нижнего колонтитула. Затем мы перебираем их и делаем с ними то, что хотим. Таким образом, они доступны, даже если они не сгруппированы по именам классов.

Вы можете сделать то же самое, используя свойства узла, как показано ниже.

Аналогичный код может быть использован для нацеливания тега lone anchor внутри раздела «content».

Мы также могли бы ограничить наш поиск по тегу привязки, включив в него только теги, для которых установлен атрибут href, чтобы избежать поиска ссылок на странице. Мы делаем это с помощью метода getAttribute:

Наконец, вы заметите, что есть тег <span> со встроенным стилем. Встроенный стиль мог быть создан с помощью системы управления контентом, поэтому у вас может не быть возможности редактировать его напрямую. Вы можете настроить таргетинг на все элементы <span> с помощью встроенных стилей следующим образом:

Возможности бесконечны с контекстным таргетингом, и есть еще больше доступных вариантов, если вы используете библиотеку JavaScript, которая нормализует различия в браузерах и упрощает манипулирование DOM.

Дальнейшее чтение:

4. Использование пространств имен для предотвращения конфликтов

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

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

Вы можете предотвратить все конфликты, создав уникальное пространство имен. Давайте используем функцию showStatistics, чтобы продемонстрировать, как мы можем инкапсулировать код в собственное пространство имен:

Первые несколько строк создают пространство имен, проверяя, существует ли объект «MY». Этот объект может быть тем, кем вы хотите. Просто выберите имя, которое, как вы думаете, никогда не будет использовано снова. После создания объекта MY мы можем создать объект «CUSTOM» как свойство объекта MY. Тогда наша функция пространства имен становится методом объекта MY.CUSTOM. Помните, что «MY», «CUSTOM» и «namespace» могут быть вашими собственными именами. Я выбрал их в демонстрационных целях. Они могут быть CHEESEBURGER.ONIONS.pickles, если хотите!

Функция showStatistics точно такая же, как в предыдущем примере, который использует литерал объекта для передачи значений. Но в этом случае вся функция, включая литерал объекта, инкапсулируется в пространстве my.custom.namespace. Последняя строка вызывает всю функцию с использованием точечной нотации, и функция выполняется точно так же, как обычно, за исключением того, что она защищена от конфликта с другой функцией, называемой «showStatistics».

Дальнейшее чтение:

5. Разработка гибридных приложений

Вы можете создавать мощные приложения JavaScript, если используете комбинацию библиотеки JavaScript и необработанного кода JavaScript. Многие библиотеки JavaScript используются для реализации «красивых» анимаций и других настраиваемых эффектов - иногда с помощью плагинов - которые часто не требуют добавления к ним чего-либо другого, кроме некоторых пользовательских значений.

С другой стороны, могут быть ситуации, когда вы захотите выполнить что-то конкретное, запрошенное клиентом. Может быть, это что-то недоступное в библиотеке и требует обширного кодирования, возможно, с использованием Ajax и различных методов DOM.

Нет смысла изобретать велосипед. Вы можете реализовать свою любимую библиотеку JavaScript и воспользоваться ее упрощенными вызовами Ajax, методами DOM и нормализацией различий в браузерах. Таким образом, вы можете иметь преимущества библиотеки, в то же время создавая собственные сценарии, специфичные для вашего проекта.

Дальнейшее чтение:

6. Рендеринг читаемого HTML

Наконец, этот метод используется в ситуациях, когда требуется, чтобы десятки строк HTML-кода создавались динамически с помощью JavaScript. Возьмите следующий пример:

Обратите внимание на строку, которая объявляет значение переменной HTMLCode. Он генерирует просто find в сгенерированном исходном коде, поскольку использует символ «новой строки», поэтому он выглядит как совершенно хороший HTML. Но если бы эта строка кода была больше, ее было бы чрезвычайно трудно читать и поддерживать в файле .js.

Вот тот же код, что и выше, но реализующий гораздо более организованный метод отображения HTML:

Теперь код стал более читабельным и соответствует способу, которым HTML отображается на реальной HTML-странице. Он даже включает в себя правильное отступление HTML и по-прежнему использует символ новой строки для правильного форматирования выведенного HTML.

Заключение

Хотя я не предоставил подробного объяснения каждой концепции, рассматриваемой в этом сборнике, я надеюсь, что этот список предоставил начинающим и промежуточным кодировщикам JavaScript обзор некоторых довольно продвинутых практических приемов, которые они могут реализовать в будущих проектах или экспериментах.

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

Связанный контент