Понимание Mustache.js с помощью Дарта Вейдера.

Переход от внешнего интерфейса к усам или даже от node.js к усам поначалу может быть немного сложным. Особенно, если у вас нет контекста для онлайн-документации. Чтобы помочь всем, кто только знакомится с Усиками, я заручился поддержкой Дарта Вейдера и штурмовиков. Штурмовики сыграли жизненно важную роль в подавлении восстания и помогли сохранить власть Империи. Во многом это было связано с огромным количеством доступных штурмовиков, которых Империя могла быстро рассредоточить по любой части галактики, какой они хотели. Однако еще одним ключом к их успеху была организация.

Я не знаю, использовала ли Империя усы как способ организовать свои войска, но они должны были. Давайте быстро посмотрим, как это могло бы сработать. Для этого им потребовалось бы создать файловую структуру с файлом javascript, файлом усов, а затем базой данных. Давайте посмотрим, как эта файловая структура выглядела бы в текстовом редакторе Atom:

Файл stormtrooper.js будет объектом JSON, и каждый штурмовик в галактике будет своим собственным объектом JSON. Если бы Империя хотела разместить где-то штурмовиков, они могли бы пройтись по этим данным, используя усы, и найти штурмовиков, близких к тому месту, где их нужно было развернуть. Или, может быть, если им понадобится развертывание на Хоте, очевидно, они будут перебирать данные, чтобы найти только снежных штурмовиков, чтобы они случайно не отправили вместо этого магматических штурмовиков на Хот. Я точно знаю? Давайте посмотрим, как может выглядеть этот файл stormtrooper.js.

Это просто пример, который я нашел в Интернете, но вы поняли идею. Дарт Вейдер мог бы использовать что-то очень похожее. Эта база данных будет содержать много полезной информации, такой как возраст, местонахождение, специальности и т. д., чтобы помочь поддерживать порядок в империи. Теперь, если вы уже знакомы с Javascript, вы, вероятно, думаете в своей голове: «Хорошо, поэтому нам нужно выполнить итерацию по этим данным, используя цикл for или метод map. Так Вейдер сможет найти нужную ему информацию». Если это то, о чем вы думаете, ПРЕКРАТИТЕ ЭТО! Усы делают все это за вас. Самое замечательное в усах то, что они делают всю тяжелую работу. В вашем файле javascript вам просто нужно указать две вещи: 1) откуда брать данные и 2) куда отправлять данные. Здесь нет циклов или чего-то еще. Усы — это механизм шаблонов без логики, поэтому вместо их использования он использует серию тегов. Мы вернемся к этому через секунду. Давайте посмотрим, как будет выглядеть Javascript-часть этого файла:

В строке 20 похоже, что Дарт Вейдер допустил серьезную ошибку. Он должен был закончить набирать «штурмовик» вместо «штурмовик». Ничего страшного, надеюсь, один из его младших разработчиков обнаружит ошибку до того, как попытается ее запустить. Но в любом случае здесь видно, что он пытается отправить данные в свой «индекс» и берет их из своей базы данных штурмовиков. Итак, давайте предположим, что ему нужно отправить своих солдат на несколько разных планет. Взгляните на его файловую структуру еще раз. У него есть разные файлы усов для каждой планеты, на которую ему нужно отправить солдат. горячие.усы, татуинские.усы и набу.усы. Вот где усы действительно показывают свое волшебство. Подтянем усики:

Это показывает основной синтаксис типичного файла усов. Данные между скобками {{}} сообщают усам, какую часть файла stormtrooper.js нужно просмотреть, чтобы он мог перебирать эти данные. все итерации выполняются здесь, в HTML, а не в Javascript.

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