WebDesignMagazine.ru – Журнал о веб-дизайне

Как усовершенствовать код при помощи JavaScript

0

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

JavaScript методы и шаблоны

Предположим, что вы уже знакомы с  this и that, call, apply, bind и прототипами…

Длинные условия

Этот первый совет может показаться не совсем очевидным, но он поможет вам сократить длинные if заявления. Идея состоит в том, чтобы заменить логические операторы и сравнения на простой regex(регулярное выражение) тест.

Если вы делаете это…

…то с regex оно будет выглядеть проще:

Еще, возможно, вам придется иметь дело с несколькими переменными и AND логическим оператором, например:

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

Это может быть суммировано для повторного использования:

В случае логического оператора OR нужно использовать some метод, который возвращает true, если хотя бы одно условие было выполнено. Но это мало вероятно, найти такие длинные OR модели; как  правило они  смешиваются с AND’s:

Манипуляция текстом

JavaScript инструменты для строк весьма ограничены по сравнению с другими языками. Рассмотрим случай, когда у нас есть несколько пунктов, разделенных точками, и мы хотим, чтобы первая буква каждого из них была заглавной. Использование циклов (loops) и методов работы со строками, мы сделаем что-то вроде этого:

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

Рассмотрим еще один обычный случай, где вам нужно извлечь все телефонные номера из текста. Давайте предположим, что в нашей строке все телефонные номера имеют префикс tel:, таким образом мы cможем захватить только телефонные номера, а не какие либо другие цифровые значения, которые могут содержаться в строке. Ясное дело, что обычное выражение станет лучшим инструментом для решения этой задачи, и так как в тексте может быть несколько телефонных номеров, мы будем использовать глобальный regex  (обычное выражение). Мы могли бы попробовать использовать match:

Но, как вы видите, output все еще содержит tel:, при всем том, что мы используем группы захвата, чтобы только получить номера. Проблема в том, что match не захватывает группы  в глобальном regex, по этой причине вам нужно использовать exec и  while петли шаблона, который вы видели раньше:

Это код необходимый для извлечения глобальных match, но это не единственный вариант. Mетод replace берет функцию, в котором первым аргументом является сама строка и следующий аргумент указывает на различные группы захвата. Последние два аргумента, в этом случае, тривиальны. Зная это, мы можем улучшить наш код:

Мы даже могли бы сделать этот код доступным для всех строк, как новый метод gmatch:

Генерация HTML разметки

Очень распространенным случаем при работе со строками HTML бывает создание списков таких как li, td, option и другие. Обычно вы бы сделали это:

Этот код кажется достаточно эффективным, но for петли довольно уродливы. Мы можем переделать этот код с помощью join метода:

Это выглядит получше, но что если нам нужен индекс? В этом случае, map метод может быть использован в сочетании с join:

Когда все это становится все более сложным, нам в конечном итоге приходится писать много петель с несвязными HTML кусками, так что все становится небольшим беспорядком. Решение этой проблемы заключается в использовании шаблонов:

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

Полная функциональность

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

Все последние браузеров, включая IE9, имеют поддержку ECMAScript5 массива и методов объекта. Всякий раз, когда есть for или for..in циклы(loops), также есть альтернативное решение с одним из этих методов.

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

Целью здесь является вход  a:0..b:1..c:2 с промежутком в одну секунду, но результат заканчивается этим undefined:3..undefined:3..undefined:3. (неопределенная). Типичная проблема решается путем создания новой области:

Теперь результат выглядет как ожидалось, но немного запутанный. Так как forEach цикл создает новую область и вещи становятся проще:

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

С array методами можно фильтровать пользователей по любым критериям:

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

Мы хотим иметь возможность сделать следующие:

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

Использование Storage подобно тому, как вы бы использовали jQuery, очень интуитивно:

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

Другие более сложные примеры также возможны:

И конечно же, вы можете присоединить все те полезные array методы:   forEachmapsliceeverysomereduce

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

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

Поделиться:

Об Авторе

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