* РБК — новости

* *

6 продвинутых техник JavaScript, которые вы должны знать

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

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

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

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

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

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

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

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

function myObject () {this.property1 = "value1"; this.property2 = "value2"; var newValue = this.property1; this.performMethod = function () {myMethodValue = newValue; вернуть myMethodValue; }; } var myObjectInstance = new myObject (); Оповещение (myObjectInstance.performMethod ());

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

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

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

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

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

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

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

function showStatistics (имя, команда, позиция, среднее, homeruns, rbi) {document.write ("<p> <strong> Name: </ strong>" + arguments [0] + "<br />"); document.write ("<strong> Team: </ strong>" + arguments [1] + "<br />"); if (typeof arguments [2] === "string") {document.write ("<strong> Position: </ strong>" + position + "<br />"); } if (typeof arguments [3] === "number") {document.write ("<strong> Средний уровень: </ strong>" + средний + "<br />"); } if (typeof arguments [4] === "number") {document.write ("<strong> Home Runs: </ strong>" + homeruns + "<br />"); } if (typeof arguments [5] === "number") {document.write ("<strong> Runs Batted In: </ strong>" + rbi + "</ p>"); }} showStatistics ("Марк Тейшейра"); showStatistics («Марк Тейшейра», «Нью-Йорк Янкиз»); showStatistics («Марк Тейшейра», «Нью-Йорк Янкиз», «1-я база», .284, 32, 101);

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

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

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

function showStatistics (args) {document.write ("<p> <strong> Name: </ strong>" + args.name + "<br />"); document.write ("<strong> Team: </ strong>" + args.team + "<br />"); if (typeof args.position === "string") {document.write ("<strong> Position: </ strong>" + args.position + "<br />"); } if (typeof args.average === "number") {document.write ("<strong> Среднее: </ strong>" + args.average + "<br />"); } if (typeof args.homeruns === "number") {document.write ("<strong> Home Runs: </ strong>" + args.homeruns + "<br />"); } if (typeof args.rbi === "number") {document.write ("<strong> Runs Batted In: </ strong>" + args.rbi + "</ p>"); }} showStatistics ({имя: «Марк Тейшейра»}); showStatistics ({имя: «Марк Тейшейра», команда: «Нью-Йорк Янкиз»}); showStatistics ({имя: «Марк Тейшейра», команда: «Нью-Йорк Янкиз», позиция: «1-я база», средняя: .284, homeruns: 32, rbi: 101});

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

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

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

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

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

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

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

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

<div id = "header"> <h1> Название сайта </ h1> </ div> <div id = "sidebar"> <ul> <li> <a href="#"> Тестирование </a> </ li> <li> <a href="#"> Тестирование </a> </ li> <li> <a href="#"> Тестирование </a> </ li> <li> <a href = " # "> Тестирование </a> </ li> <li> <a href="#"> Тестирование </a> </ li> <li> <a href="#"> Тестирование </a> </ li> </ ul> </ div> <div id = "content"> <h2> Заголовок страницы </ h2> <p> <a href="#"> Ссылка Lorum Ipsum здесь </a>. Пеллетентный обитатель Morbi Tristique Senectus et netus и malesuada славится ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Anean ultricies mi vitae est. Mauris placerat eleifend leo. Пеллетентный обитатель Morbi Tristique Senectus et netus и malesuada славится ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Anean ultricies mi vitae est. Mauris placerat eleifend leo. </ P> <p> <span style = "color: red;"> обитатель пеллентеков морби </ span> трилистик сенект и нетус и малесуада славятся ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Anean ultricies mi vitae est. Mauris placerat eleifend leo. Пеллетентный обитатель Morbi Tristique Senectus et netus и malesuada славится ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Anean ultricies mi vitae est. Mauris placerat eleifend leo. </ P> </ div> <div id = "footer"> <p> Авторское право | <a href="#"> контакт </a> | <a href="#"> политика </a> | <a href="#"> конфиденциальность </a> </ p> </ div>

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

var myLinkCollection = document. getElementsByTagName ("a") ; for (i = 0; i <myLinkCollection.length; i ++) {// сделать что-то с тегами привязки здесь}

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

var myFooterElement = document .getElementById ("нижний колонтитул") ; var myLinksInFooter = myFooterElement .getElementsByTagName ("a") ; for (i = 0; i <myLinksInFooter.length; i ++) {// сделать что-то с тегами привязки нижнего колонтитула здесь}

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

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

var myLinkCollection = document. getElementsByTagName ("a"); for (i = 0; i <myLinkCollection.length; i ++) {if ( myLinkCollection [i] .parentNode.parentNode.id === "footer") {// сделать что-то с тегами привязки нижнего колонтитула здесь}}

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

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

var myLinkCollection = document.getElementsByTagName ("a"); for (i = 0; i <myLinkCollection.length; i ++) {if (myLinkCollection [i]. getAttribute ("href") ) {// сделать что-то с тегами привязки здесь}}

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

var myLinkCollection = document. getElementsByTagName ("span") ; for (i = 0; i <myLinkCollection.length; i ++) {if (myLinkCollection [i] .getAttribute ("style")) {// сделать что-то со всеми якорями, имеющими встроенные стили}}

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

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

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

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

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

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

if (typeof MY == "undefined") {MY = new Object (); MY.CUSTOM = new Object (); } MY.CUSTOM.namespace = function () {function showStatistics (args) {document.write ("<p> <strong> Name: </ strong>" + args.name + "<br />"); document.write ("<strong> Team: </ strong>" + args.team + "<br />"); if (typeof args.position === "string") {document.write ("<strong> Position: </ strong>" + args.position + "<br />"); } if (typeof args.average === "number") {document.write ("<strong> Среднее: </ strong>" + args.average + "<br />"); } if (typeof args.homeruns === "number") {document.write ("<strong> Home Runs: </ strong>" + args.homeruns + "<br />"); } if (typeof args.rbi === "number") {document.write ("<strong> Runs Batted In: </ strong>" + args.rbi + "</ p>"); }} showStatistics ({name: "Mark Teixeira", команда: "New York Yankees", позиция: "1st Base", средняя: .284, homeruns: 32, rbi: 101}); } MY.CUSTOM.namespace ();

Первые несколько строк создают пространство имен, проверяя, существует ли объект «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. Возьмите следующий пример:

var pageContainer = document.getElementById ("container"); var pageTitle = "Заголовок содержимого"; var authorBio = "Mr. Lorum Ipsum"; var pageContent = "Текст строки ipsum Lorum здесь. Текст строки ipsum Lorum здесь. Текст строки ipsum Lorum здесь. Текст строки ipsum Lorum здесь. Текст строки ipsum Lorum здесь. Текст строки ipsum Lorum здесь. Текст строки ipsum Lorum здесь. Lorum ipsum line text here. "; var footerContent = "Авторские права 2009"; var HTMLCode = '\ n <h1>' + pageTitle + '</ h1> \ n <div id = "content"> \ n <p>' + pageContent + '</ p> \ n <div id = "author_bio "> \ n <p> '+ authorBio +' </ p> \ n </ div> \ n </ div> \ n <div id =" footer "> <p> '+ footerContent +' </ p> \ n </ div> \ n '; pageContainer.innerHTML = HTMLCode;

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

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

var pageContainer = document.getElementById ("container"); var pageTitle = "Заголовок содержимого"; var authorBio = "Mr. Lorum Ipsum"; var pageContent = "Текст строки ipsum Lorum здесь. Текст строки ipsum Lorum здесь. Текст строки ipsum Lorum здесь. Текст строки ipsum Lorum здесь. Текст строки ipsum Lorum здесь. Текст строки ipsum Lorum здесь. Текст строки ipsum Lorum здесь. Lorum ipsum line text here. "; var HTMLCode = '\ n' + '<h1>' + pageTitle + '</ h1> \ n' '<div id = "content"> \ n' + '<p>' + pageContent + '</ p> \ n '+' <div id = "author_bio"> \ n '+' <p> '+ authorBio +' </ p> \ n '+' </ div> \ n '' </ div> \ n ' + '<div id = "footer">' + '<p>' + footerContent + '</ p> \ n' + '</ div> \ n'; pageContainer.innerHTML = HTMLCode;

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

Заключение

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

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

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

Реклама

Популярные новости

Агентство по эскорт услугам
У многих слово «эскорт» ассоциируется с элитным сопровождением, дорогими машинами и длинноногими красавицами-моделями, которых богатые владельцы крупных фирм берут с собой на светские рауты в качестве

Франшиза страхового агентства
К Вашему вниманию франшиза страхового агентства — Точка Страхования. Основными направлениями деятельности являются реализация полисов ОСАГО и КАСКО. Что входит в франшизу• Техническая поддержка наших

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

Федеральное агентство по техническому регулированию
В 2003 году, 1 июля, вступил в действие ФЗ, определяющий основы технического регулирования. В рамках закона создана новая система установления норм для производственных процессов, продукции, услуг и работ.

Btl агентство полного цикла
Нередко рекламные услуги заказываются одновременно у нескольких поставщиков: одна фирма выполняет полиграфию, другая проводит исследование рынка, третья следит за общей успешностью проводимых мероприятий.

Русское агентство новостей
Русское Агентство Новостей (РуАН) создано, как альтернатива разнузданному, повсеместному шабашу, развёрнутому в СМИ равнодушными, недалёкими, продажными и недружественными к нормальным людям персонажами,

Мегаполис сервис агентство недвижимости
Агентство недвижимости «Мегаполис Сервис», предлагает все виды риэлторских услуг на рынке недвижимости. Купля-продажа, обмен квартир, домов, комнат, земельных участков, коттеджей, коммерческой недвижимости.

Сдать квартиру через агентство
Почему стоит держаться подальше от агентств недвижимости Что бы ответить на первый вопрос и понять почему идея сдать квартиру через агентство не самая блестящая, мне придется процитировать книгу “6

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


Реклама

Календарь новостей

Реклама

Архив новостей

Реклама