или как уменьшить шаблон Angular формы

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

А это болезненные. Количество стандартного кода, который вам приходится писать, угнетает. Вы начинаете со стандартного, правильного материала html5: вашего идентификатора, вашего ярлыка для, вашего типа и именис. Затем вы добавляете слой Angular: ng-model, директивы проверки и, наконец, что не менее важно, копирование сообщений об ошибках.

Давайте посмотрим на типичный образец:

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

Итак, то, что мы видим здесь, во многом повторяется. Просто посмотрите на строку № 5. Черт, посмотри на все строки и подсчитай появление `username`! И значение для `ng-show=` такое шаблонное, я не верю, что кто-то будет писать его от руки в следующий раз.

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

Войдите в нефрит

Что такое нефрит? Небольшое введение: «Jade — это лаконичный язык для написания HTML-шаблонов». Хорошо, так на что это похоже? Вот наша маленькая форма, написанная нефритом:

Синтаксис прост: строка в начале строки будет преобразована в имя тега, если ей предшествует точка, то это будет div с заданным классом , а знак # соответствует атрибуту id . Вы также можете комбинировать их — как в строке № 4 примера. Если вы когда-либо писали какой-либо CSS, он должен показаться вам знакомым, мы рассматриваем в основном те же правила, что и простые селекторы. Остальные атрибуты html добавляются в скобках.

Кроме этого, вы заметите, что здесь нет закрывающих тегов. Да, jade — один из тех языков, где отступы имеют значение. Вы можете любить его или ненавидеть, я думаю, что в случае обычного html вы, скорее всего, все еще форматируете его аналогичным образом, поэтому мы также можем сделать его обязательным. В этом вопросе нет необходимости допускать какую-либо художественную свободу.

То, что мы получили, — это 3 строки, срезанные с исходной длины разметки.

Хотя это не так уж захватывающе: да, у нас немного меньшая кодовая база, но оправдывает ли это добавление дополнительного инструмента в наш проект? Хорошо, может быть. Но скажем, мы еще не уверены. Помните, у нас все еще есть все эти строки username повсюду. Если бы это был какой-то алгоритм, и мы бы просто сохранили его в переменной, не так ли? Мы, вероятно, также осознаем, что этот шаблон поля формы будет довольно повторяющимся во всех наших формах, и попытаемся поместить его в функцию для СУШКИ нашего кода. К счастью…

У Джейд есть миксины

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

Вау, что теперь? Здесь много нового. Например. внутри миксина у нас есть доступ к объекту attributes, который содержит значения всех атрибутов, определенных в миксине. Хорошо, а теперь давайте разберем код построчно:

  • #1 — мы определяем миксин field-text. Он принимает один аргумент: label.
  • № 2 — он выведет тег label со значением атрибута for, установленным на атрибут id, если мы его предоставим. В противном случае он установит его в значение атрибута name.
    Затем он напечатает (отсюда и знак «=»)значение аргумент label.
  • #3 — он выведет элемент input класса form-control со значением атрибута id, соответствующим для метки. И установите для type значение text.
    Конструкция &attributes(attributes) означает, что она также будет иметь все остальные атрибуты, определяемые при использовании миксина (например, ng-model, required и т. д.)

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

Хорошо, мы зашли так далеко, пришло время заставить эти миксины работать. Вот наша форма после рефакторинга:

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

Эпилог

Теперь то, над чем мы работали, было только одним текстовым полем. Представьте себе более сложную форму: несколько полей, каждое со своим набором классов, идентификаторов, имен, меток, форм… Сколько кода вы сэкономите? Сколько потенциальных опечаток? Кроме того, хотя в течение первых нескольких часов работы с jade вы, вероятно, не увидите его таким — ведь вы много лет просматривали html-код, — на самом деле он более читабелен. Вы привыкнете к этому, поверьте мне.

Да, и еще одна вещь, касающаяся этапа компиляции jade: он добавляет еще одну задачу для вашего grunt/gulp/etc, но взамен он также не пропускает никаких синтаксических ошибок. Таким образом, хотя вы можете оставить «‹» или «/» где-нибудь в своем html и (надеюсь) понять это только при проверке приложения позже в вашем браузере, компилятор jade выдаст вам большую большую ошибку, если вы попытаетесь накормить его чем-то. тупой.

Так что ты думаешь? У вас есть вопросы по предоставленному примеру или реализации в реальном проекте?