Сила примесей Jade

Получите СУХОЙ и позвольте Джейд делать тяжелую работу 💪

Если вы не знакомы с Jade, это шаблонизатор для написания разметки HTML. Он имеет множество мощных функций, которые делают код более компактным и понятным. Для меня это круто.

Я написал вступление к Джейд ранее, подробно объясняя, почему я так думаю. Вы можете прочитать это здесь.

Сегодня я собираюсь обсудить примеси Jade.

Миксины похожи на функции, которые позволяют вам определять блоки разметки, которые будут выводиться при вызове. Это помогает придерживаться принципа СУХОЙ.

Например, это базовый миксин, который создает блок контактов для сайта.

mixin contact
  .contact
    h2 Contact Me
      ul
        li [email protected]
        li [email protected]

Затем, где бы нам ни понадобился этот блок контактов, мы просто используем миксин следующим образом

header
  nav
    ul
      li Home
  +contact

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

Однако вы можете создавать более мощные миксины, когда начнете вводить циклы, условные выражения и переменные параметров.

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

.carousel
  .panel
    .image
      img(src="img/cat.png")
    h2 Cat
  .panel
    .image
      img(src="img/dog.png")
    h2 Dog

В этом случае мы могли бы создать миксин для панели карусели.

mixin carouselPanel(name, imageUrl)
  .panel
    .image
      img(src="#{imageUrl}")
    h2= name

И используйте его в нашей разметке карусели следующим образом

.carousel
  +carouselPanel('Cat', 'img/cat.png')
  +carouselPanel('Dog', 'img/dog.png')

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

Это простой пример. Но вы можете себе представить, как при использовании в сложных проектах, где компоненты пользовательского интерфейса требуют более сложной разметки, миксины могут быть полезны.

Более сложные примеры могут включать использование условных выражений и циклов.

mixin group(title, highlighted, disabled)
  if highlighted
    .group.highlighted(is-disabled=”#{disabled}”)= title
      block
  else
    .group(is-disabled=”#{disabled}”)= title
      block
+group(“First”, true, false)
  .content Here is some content
+group(“Second”, false, true)

mixin createTable(numberOfRows)
  — var n = 0; 
  table
    tr
      th Number
    while n < numberOfRows
      tr
        td= n++
+createTable(3)

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

ОБНОВЛЕНИЕ 31/09: Или как насчет этого примера, который я вчера придумал, чтобы создать кнопки github в вашей разметке

mixin githubStats(userName, repoName)
  .row
    .col-md-12
      iframe(src = "http://ghbtns.com/github-btn.html?user=#{userName}&repo=#{repoName}&type=watch&count=true", allowtransparency="true", frameborder="0", scrolling="0", width="90px", height="20")
      iframe(src = "http://ghbtns.com/github-btn.html?user=#{userName}&repo=#{repoName}&type=fork&count=true", allowtransparency="true", frameborder="0", scrolling="0", width="90px", height="20")
      iframe(src = "http://ghbtns.com/github-btn.html?user=#{userName}&repo=#{repoName}&type=follow&count=true", allowtransparency="true", frameborder="0", scrolling="0", width="120px", height="20")
footer
  +githubStats('jh3y', 'whirl')

И это миксины в Jade, довольно мощная функция, которую иногда можно упускать из виду, как и сам язык Jade.

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