Javascript шаблоны: Шаблоны проектирования в JavaScript | by Marina Kovalyova

Книга «JavaScript. Шаблоны» — Стоян Стефанов. Цены, рецензии, файлы, тесты, цитаты

Разработчики серверных, клиентских или настольных приложений на JavaScript нередко сталкиваются с проблемами, связанными с объектами, функциями, наследованием и другими особенностями этого языка. Какие же приемы разработки приложений на JavaScript являются наиболее удачными? Данная книга дает ответ на этот вопрос, предлагая большое количество различных шаблонов программирования на JavaScript, таких как «единственный объект» (singleton), «фабрика» (factory), «декоратор» (decorator) и другие. Можн…

Разработчики серверных, клиентских или настольных приложений на JavaScript нередко сталкиваются с проблемами, связанными с объектами, функциями, наследованием и другими особенностями этого языка. Какие же приемы разработки приложений на JavaScript являются наиболее удачными? Данная книга дает ответ на этот вопрос, предлагая большое количество различных шаблонов программирования на JavaScript, таких как «единственный объект» (singleton), «фабрика» (factory), «декоратор» (decorator) и другие. Можно сказать, что они являются не только методами решения наиболее типичных задач разработки ПО, но и заготовками решений для целых категорий таких задач.

Использование шаблонов при программировании на языке JavaScript имеет свои особенности. Некоторые из них, разработанные с позиций языков со строгим контролем типов, таких как C++ и Java, не могут непосредственно применяться в языках с динамической типизацией, таких как JavaScript. Для таких шаблонов в языке JavaScript имеются более простые альтернативы.

Написанная экспертом по языку JavaScript Стояном Стефановым – ведущим специалистом компании Yahoo! и создателем инструмента оптимизации производительности веб-страниц YSlow 2.0, – книга включает практические советы по реализации каждого из рассматриваемых шаблонов с примерами программного кода. Автор также приводит антишаблоны – приемы программирования, которых следует по возможности избегать.

Книга JavaScript. Шаблоны — читать онлайн бесплатно без регистрации, Стоян Стефанов

Язык: Русский

Тип: Текст

Год издания: 2017 год

Аннотация:

Полная версия:

Читать онлайн «JavaScript. Шаблоны»

Другие книги автора:

12 книг для изучения языка программирования JavaScript

На русском языке книг для изучения JavaScript не очень много. Поэтому сайт KV.BY постарался собрать издания, наиболее подробные и качественно переведенные. Однако и тут есть ляпы, а посему рекомендация та же, что в каждый раз: читайте оригинал. Кстати, на Amazon собраны все самые свежие книги и анонсы готовящихся к выходу изданий.

JavaScript для детей. Самоучитель по программированию

Автор: Ник Морган

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

Изучаем программирование на JavaScript

Авторы: Эрик Фримен, Элизабет Робсон

Учебное пособие от O’Reilly для новичков. Изучение материала достаточное легкое из-за непринужденного стиля повествования, а за счет большого количества иллюстраций информация еще и визуально запоминается.

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

JavaScript. Подробное руководство

Автор: Дэвид Флэнаган

Это книга уже 6 раз переиздавалась. Некоторые разделы были полностью переписаны или дополнены новой информацией для работы с Web 2.0. Справочник будет одинаково полезен как для новичков, так и для опытных программистов. Тут вы увидите много практических примеров, доступное объяснение базового языка JavaScript и клиентских прикладных интерфейсов различных браузеров. Также освещены ECMAScript 5 и HTML5.

Книга состоит из четырех частей: в 1-м разделе вы узнаете о JavaScript; во 2-м – о среде сценариев веб-браузеров и разработке при помощи ненавязчивого JS и DOM; 3-й раздел – справочник по базовому языку с описанием классов, объектов, конструкторов, методов, функций и прочего; 4-й – справочник по клиентскому JS (API, DOM API Level 3, WebSockets, WebWorkers, localStorage и sessionStorage, теги).

Выразительный JavaScript

Автор: Марейн Хавербек

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

Вас познакомят с основами языка, расскажут о canvas, SVG, Node.js. После изучения нескольких разделов вам предложат создать пару небольших проектов, один из которых – написание своего языка программирования.

JavaScript: сильные стороны

Автор: Дуглас Крокфорд

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

В книге рассмотрены подробно синтаксис, функции, массивы, объекты, методы и полезные фичи.

Javascript и jQuery. Интерактивная веб-разработка

Автор: Джон Дакетт

Книга для старта в профессии программиста на JS. Для комфортной работы с книгой вам понадобятся лишь базовые знания по HTML и CSS. Чтобы их получить, хватит провести пару часов перед ПК.

Вы научитесь понимать и писать сценарии, узнаете о jQuery (библиотека для работы с HTML), Ajax, API, JSON и как их использовать, сможете сделать сайт интерактивным, внедрить фильтры, поиск и сортировку и все в том же духе.

JavaScript. Карманный справочник

Автор: Дэвид Флэнаган

Переходная книга. Будет полезна тем, кто имеет некоторую базу знаний по этому языку, и тем, кто хочет освежить память. Внутри вы найдете описание синтаксиса JavaScript, примеры использования (первые 9 глав о спецификации ECMAScript 5), модели DOM и HTML5 (с 10 по 14 главы).

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

jQuery. Подробное руководство по продвинутому JavaScript. 2-е издание

Авторы: Бер Бибо, Иегуда Кац

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

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

JavaScript. Шаблоны

Автор: Стоян Стефанов

Этот справочник стоит брать в руки после основательного изучения языка. Здесь объяснены наиболее удачные приемы и методы разработки приложений. Приведено множество шаблонов и примеров решения той или иной задачи. Также вы увидите заготовки для решения целых блоков однотипных задач. К примеру, здесь есть «единственный шаблон» (singleton), «фабрика»(factory) и прочие.

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

Секреты JavaScript ниндзя

Авторы: Джон Резиг, Беэр Бибо, Иосип Марас

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

JavaScript для профессионалов

Авторы: Джон Резиг, Расс Фергюсон, Джон Пакстон

Книга сразу погружает вас в работу: знакомит с методиками программирования, языковыми средствами, повторным применением кода, отладкой и далее по нарастающей. Здесь же рассмотрены плюсы и минусы языка, возможности обновленного ECMAScript, отладка и тестирование существующего кода. Показанные примеры подробно расписаны. Отдельная глава отведена одностраничникам.

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

Изучаем Node. Переходим на сторону сервера

Автор: Шелли Пауэрс

Книга для тех, кто смотрит в сторону серверной разработки. Материал про Node.js и ее модули, образующие основу функциональности технологии. Сама технология Node.js появилась сравнительно недавно, но это не помешало большим корпорация dhjlt Yahoo!, Netflix и прочим взять ее на вооружение.

Книга проведет вас через основы создания сервера, систему модулей, REPL, создание приложений. Также вы пройдетесь по вопросам безопасности, дочерним процессам, приемам разработки и сферам, где Node.js можно применить.

Javascript — OLX.ua

Шаблоны, CSS и JS — Страницы

Шаблоны, CSS и JS файлы являются средством, с помощью которого администраторы, знакомые с кодом, могут настраивать части сайта, придавая им уникальности.

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

Типы шаблонов

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

• Шаблоны базы данных
  Шаблоны базы данных позволяют изменить отображение практически каждой части вашей базы данных. Эти шаблоны состоят из 4 основных типов:
  1. Список категорий
     Шаблоны, отвечающие за отображение списка категорий вашей базы данных и подкатегорий при просмотре списка записей.
  2. Список записей
     Шаблоны, отвечающие за отображение списка записей базы данных.
  3. Запись
     Эти шаблоны отвечают за отображение записи, включая комментарии и отзывы.
  4. Форма записи
     Шаблоны форм добавления/редактирования записи, позволяя настраивать формы для отдельные базы данных.
• Шаблоны страниц
  По умолчанию, страница будет использовать обложку сайта, включающую хэдер, навигацию, меню пользователя и т.д., оставляя вам контроль над контентом страницы. Тем не менее, вы можете выбрать использование настраиваемой обложки страницы, позволяющую полностью контролировать отображение страницы.
• Шаблоны блоков
  При создании блока плагина, отображающего ленту данных, IPS4 использует стандартный шаблон. Однако, вы можете изменить стандартный шаблон по своему усмотрению, либо создать новый, тем самым позволяя придать уникальный вид для каждого блока.

Что может содержать блок

Блоки могут содержать в себе любой синтаксис шаблонов IPS4, обеспечивая большую гибкость настройки. Доступные для каждого шаблона данные будут зависеть от их типа шаблона (например, шаблон списка записей базы данных получает данные из категории, но шаблон блока получит данные фильтров блока), но все шаблоны могут получить доступ к PHP фреймворку IPS4.

Создание и редактирование шаблонов

Шаблоны база данных и страниц изменяются в редакторе шаблонов приложения, расположенным на странице Страницы > Менеджер страниц > Шаблоны в вашем админцентре.

Стандартные шаблоны блоков также управляются в редакторе шаблонов, но также могут быть изменены непосредственно в настройках блока. Для этого перейдите на страницу Страницы > Менеджер страниц > Блоки и измените какой-либо из существующих боков. 

Файлы CSS и JS

Для полной кастомизации областей, созданных с помощью приложения Страницы, часто желательно добавлять дополнительные CSS и Яваскрипт файлы. Приложение позволяет создать такие файлы и применить каждый файл к необходимой странице.

Область создания нового CSS файла

CSS и JS ресурсы в Страницах настраиваются в Страницы > Менеджер страниц > Шаблоны в админцентре. Для них существуют отдельные вкладки. Добавить ресурсы можно с помощью кнопки «Новый».

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

Применение CSS стиля к странице

Как создавать в JavaScript итераторы: выполнение для генерируемых последовательностей

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

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

Википедия определяет итераторы следующим образом: В компьютерном программировании итератор — это объект, который позволяет программисту перебирать контейнер, особенно списки. Различные типы итераторов часто предоставляются через интерфейс контейнера.

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

Скорее всего, вы не будете использовать последовательность Фибоначчи в повседневном программировании (если вы не проходите собеседование в какой-либо компании, которая хочет проверить ваши знания рекурсии), но идея генерирования последовательности значений по требованию (отложенная оценка) подходит для многих реальных сценариев, таких как:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

обход пользовательских структур данных

потребляемые API-интерфейсы с нумерацией страниц

обработка очереди

обработка построчно длинных файлов

считывание всех записей из таблицы SQL

и т.п.

Последовательность Фибоначчи

Если вы никогда ранее не видели последовательность Фибоначчи (или вы не помните точное определение), вот как она выглядит: 1 1 2 3 5 8 13 21 …

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

F1 = F2 = 1 Fn = F(n-1) + F(n-2)

Несколько моментов, которые стоит отметить:

Последовательность бесконечна (было бы невозможно сохранить ее в списке без верхнего предела).

Она состоит из положительных целых чисел.

Итак, как происходит создание кода JavaScript, который позволяет нам перебирать эту последовательность и вычислять произвольное количество элементов? Ну, есть много способов …

Функции

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

Итак, как мы можем построить последовательность Фибоначчи, используя только функции? Вот пример:

const genFib = (max = Number.MAX_SAFE_INTEGER) => { // инициализируем значения по умолчанию в диапазоне let n1 = 0 let n2 = 0 // возвращаем анонимную функцию, которая возвращает следующий элемент // при каждом вызове return () => { // вычисляем следующее значение const nextVal = n2 === 0 ? 1 : n1 + n2 // переопределяем n1 и n2 to в соответствии с новыми значениями const prevVal = n2 n2 = nextVal n1 = prevVal // если мы достигли верхнего предела (итерация завершена), возвращаем ноль if (nextVal >= max) { return null } // возвращаем новое значение return nextVal } }

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

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

Первое, что происходит в функции — это инициализация области действия функции. n1и n2 являются единственными значениями, которые нам нужны для вычисления элемента последовательности. Они представляют последние 2 вычисляемых числа. Мы устанавливаем для них по умолчанию 0.

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

Обратите внимание, что genFib будет инициирована новая изолированная область, содержащая n1и n2. Эти значения будут доступны (и могут быть изменены) только анонимной функции, возвращаемой genFib. Это означает, что вы можете генерировать несколько «итераторов», и каждый из них будет независимым друг от друга.

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

const f = genFib(6) // лимит последовательности для чисел меньше 6 f() // 1 f() // 1 f() // 2 f() // 3 f() // 5 f() // null f() // null f() // null // или с помощью цикла // выводим все числа последовательности меньше MAX_SAFE_INTEGER const f2 = genFib() let current while ((current = f2()) !== null) { console.log(current) }

Протокол Iterator

В предыдущем примере мы придумали собственный способ определить, как перебирать элементы (возвращенная анонимная функция) и как понять, была ли последовательность закончена (возврат null).

ECMAScript 2015 предоставляет стандартный и совместимый способ определения объектов итераторов. Это называется протоколом Iterator.

Проще говоря, объект JavaScript является итератором, если он реализует метод next() со следующей семантикой:

next() не принимает никаких аргументов.

next() должен вернуть объект с 2 свойствами: done и value.

done является логическим значением, и для него будет установлено true в том и только в том случае, если в последовательности больше нет элементов.

value будет содержать фактическое значение, вычисленное в последней итерации (может быть undefined, когда done равно true).

Хорошо, теперь давайте перепишем нашу последовательность Фибоначчи для реализации протокола Iterator:

const genFibIterator = (max = Number.MAX_SAFE_INTEGER) => { let n1 = 0 let n2 = 0 // на этот раз мы возвращаем объект итератора (вместо функции) return { // логика, которая нужна для вычисления следующего элемента находится в методе `next` next: () => { // вычисляем следующее значение let nextVal = n2 === 0 ? 1 : n1 + n2 // переопределяем n1 и n2 в соответствии с новыми значениями const prevVal = n2 n2 = nextVal n1 = prevVal // если мы достигли верхнего предела (итерация завершена), // задаем для done — true, а для nextVal — undefined let done = false if (nextVal >= max) { nextVal = undefined done = true } // возвращаем объект итератора в качестве протокола итерации return { value: nextVal, done } } } }

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

const it = genFibIterator(6) // { next: [Function: next] } it.next() // { value: 1, done: false } it.next() // { value: 1, done: false } it.next() // { value: 2, done: false } it.next() // { value: 3, done: false } it.next() // { value: 5, done: false } it.next() // { done: true } // или const it2 = genFibIterator(6) let result = it2.next() while (!result.done) { console.log(result.value) result = it2.next() } // 1 // 1 // 2 // 3 // 5

Протокол Iterable

В предыдущем разделе мы увидели, как определять объекты Iterator, которые соответствуют протоколу Iterator. В действительности, мы могли бы захотеть выразить понятие «итеративность» в более общем виде, чтобы для любого объекта мы могли сказать, является ли такой объект итеративным или нет.

По этой причине ECMAScript 2015 определяет также протокол Iterable. Объект называется итеративным, если он предоставляет вызываемое свойство Symbol.iterator, которое является функцией, возвращающей объект итератора. Вы можете интроспективно проверить, является ли объект итеративным, с помощью следующего кода:

function isIterable(obj) { return Boolean(obj) && typeof obj[Symbol.iterator] === ‘function’ }

ECMAScript 2015 также предоставляет новую конструкцию for ( for…of), которая позволяет легко перебирать элементы итерируемого объекта:

for (let current of someIterable) { console.log(current) }

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

const allValues = […someIterable]

Хорошо, теперь давайте перепишем нашу последовательность Фибоначчи для реализации протокола Iterable:

const genFibIterable = (max = Number.MAX_SAFE_INTEGER) => { let n1 = 0 let n2 = 0 // возвращаем объект iterable return { [Symbol.iterator] () { // возвращаем итератор return { next() { let nextVal = n2 === 0 ? 1 : n1 + n2 const prevVal = n2 n2 = nextVal n1 = prevVal let done = false if (nextVal >= max) { nextVal = undefined done = true } return { value: nextVal, done } } } } } }

Здесь мы просто переместили реализацию итератора, описанную в предыдущем разделе, в функцию Symbol.iterator. Обратите внимание, что можно предложить реализацию, которая будет одновременно удовлетворять протоколам Iterator и Iterable:

const genFib = (max = Number.MAX_SAFE_INTEGER) => { let n1 = 0 let n2 = 0 return { // сначала удовлетворяем протоколу Iterator next: () => { let nextVal = n2 === 0 ? 1 : n1 + n2 const prevVal = n2 n2 = nextVal n1 = prevVal let done = false if (nextVal >= max) { nextVal = undefined done = true } return { value: nextVal, done } }, // это удовлетворяет протоколу Iterable [Symbol.iterator] () { // возвращаем `this`, потому что сам объект и является итератором return this } } }

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

// выводим все числа в последовательности меньше MAX_SAFE_INTEGER const f = genFibIterable() for (let n of f) { console.log(n) } // создаем массив со всеми числами Фибоначчи меньше 17 const f2 = genFibIterable(17) const lowerThan17 = […f2] // [ 1, 1, 2, 3, 5, 8, 13 ]

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

iterable является объектом, который вы можете итерировать.

iterator — это объект курсора , который позволяет перебирать iterable.

Генераторы

Еще одно замечательное дополнение, появившееся в ECMAScript 2015 для JavaScript — это Генераторы. Более конкретно, ECMAScript 2015 определяет функцию генератора и объекты генератора.

Объявление function* (ключевое слово function со звездочкой) определяет функцию генератора, которая возвращает объект генератора.

Генераторы — это функции, которые можно завершить, а затем снова ввести. Их контекст (привязка переменных) будет сохранен при повторном вхождении.

Чтобы немного упростить эту концепцию, вы можете представить функции генератора как функции, которые могут «возвращать» (или «выдавать») несколько раз. Давайте рассмотрим синтаксис генератора на простом примере:

// функция генератора function* countTo3() { yield 1 yield 2 return 3 }

В этом примере мы определяем counter, который генерирует числа от 1 до 3. Мы можем использовать его следующим образом:

// c — это объект генератора const c = countTo3() c.next() // { value: 1, done: false } c.next() // { value: 2, done: false } c.next() // { value: 3, done: true } c.next() // { done: true } c.next() // { done: true } // …

Итак, генератор работает следующим образом:

При вызове функции генератора , возвращается объект генератора.

У объектов генератора есть метод next().

Когда вы вызываете метод next() объекта генератора, код генератора будет выполняться до тех пор, пока не встретится первый yield (или return).

Если найден yield, код останавливается, и выданное значение будет передано в вызывающий контекст через объект со следующей формой: { value: yieldedValue, done: false }.

При следующем вызове next() выполнение будет возобновлено с того места, где оно было первоначально приостановлено, до появления нового найденного yield или return.

Если найден оператор return (или функция завершена), возвращаемый объект будет выглядеть так: { value: returnedValue, done: true } (обратите внимание, что для done сейчас установлено значение true).

Когда генератор завершит работу next(), всегда будут выполняться последовательные вызовы { done: true }.

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

function* Fib (max = Number.MAX_SAFE_INTEGER) { // инициализируем переменные состояния let n1 = 0 let n2 = 0 // теперь мы можем предварительно инициализировать nextVal со значением 1, как часть состояния let nextVal = 1 // выполняем цикл, пока не достигнем максимального числа while (nextVal <= max) { // выдаем текущее значение yield nextVal // смещаем nextVal -> n2 и n2 -> n1 const prevVal = n2 n2 = nextVal n1 = prevVal // вычисляем следующее значение nextVal = n1 + n2 } }

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

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

const fib = Fib(6) fib.next() // { value: 1, done: false } fib.next() // { value: 1, done: false } fib.next() // { value: 2, done: false } fib.next() // { value: 3, done: false } fib.next() // { value: 5, done: false } fib.next() // { done: true } // или const fib2 = Fib(6) let result = fib2.next() while (!result.done) { console.log(result.value) result = fib2.next() } // 1 // 1 // 2 // 3 // 5

В этот момент вы можете спросить: Является ли объект-генератор итератором или итераторируемым? Что ж, получается, что объект-генератор является итератором и итераторируемым!

Таким образом, вы можете также использовать нашу последнюю реализацию с for…of и расширенным синтаксисом:

const fib = Fib(6) for (let current of fib) { console.log(current) } // 1 // 1 // 2 // 3 // 5 // or const fib2 = Fib(6) […fib2] // [ 1 1 2 3 5 ]

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

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

Заключение

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

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

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

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

Автор: Luciano Mammino

Источник: //loige.co/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

литералов шаблона (строки шаблона) — JavaScript

Шаблонные литералы — это строковые литералы, позволяющие встроить выражения. Вы можете использовать многострочные строки и функции интерполяции строк с их.

В предыдущих выпусках спецификации ES2015 они назывались «шаблонными строками».

  `текст строки`

`строка текста строка 1
 строка текста строка 2`

`строковый текст $ {выражение} строковый текст`

tag`string text $ {выражение} string text`
  

Литералы шаблона вместо этого заключаются в обратную кавычку («) (серьезное ударение). двойных или одинарных кавычек.

Литералы шаблона могут содержать заполнители. Они обозначены знаком доллара и фигурные скобки ( $ { выражение } ). Выражения в заполнители и текст между обратными кавычками («) передаются в функцию.

Функция по умолчанию просто объединяет части в одну строку. Если есть выражение, предшествующее литералу шаблона (здесь тег ), это называется шаблон с тегами .В этом случае выражение тега (обычно функция) вызывается с помощью литерала шаблона, которым вы можете манипулировать перед вывод.

Чтобы избежать обратной кавычки в литерале шаблона, поместите обратную косую черту ( \ ) перед обратная кавычка.

  `\` `=== '' ' 

Многострочные строки

Любые символы новой строки, вставленные в исходный текст, являются частью литерала шаблона.

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

  консоль.log ('строка текста 1 \ n' +
'строка текста 2');

  

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

  console.log (`строка текста строка 1
строка текста 2`);

  

Интерполяция выражений

Чтобы встроить выражения в обычные строки, вы должны использовать следующие синтаксис:

  пусть а = 5;
пусть b = 10;
console.log ('Пятнадцать - это' + (a + b) + 'и \ nnot' + (2 * a + b) + '.');

  

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

  пусть а = 5;
пусть b = 10;
консоль.log (`Пятнадцать - это $ {a + b} и
не $ {2 * a + b} .`);

  

Вложенные шаблоны

В некоторых случаях вложение шаблона — самый простой (и, возможно, более читаемый) способ иметь настраиваемые строки. В шаблоне с обратной кавычкой просто разрешить внутреннюю обратные кавычки, используя их внутри заполнителя $ {} в шаблоне.

Например, если условие a истинно , тогда вернет это шаблонный буквальный.

В ES5:

  let classes = 'заголовок';
классы + = (isLargeScreen ()?
  '' : элемент.isCollapsed?
    'icon-expander': 'icon-collapser');
  

В ES2015 с шаблонными литералами и без вложенности:

  const classes = `заголовок $ {isLargeScreen ()? '':
  (item.isCollapsed? 'icon-expander': 'icon-collapser')} `;  

В ES2015 с вложенными шаблонными литералами:

  const classes = `заголовок $ {isLargeScreen ()? '':
  `icon - $ {item.isCollapsed? 'расширитель': 'коллапсер'} `}`;  

Шаблоны с тегами

Более продвинутая форма литералов шаблонов — это шаблоны с тегами .

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

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

Имя функции, используемой для тега, может быть любым.

  let person = «Майк»;
пусть возраст = 28;

function myTag (strings, personExp, ageExp) {
  пусть str0 = строки [0];
  пусть str1 = strings [1];
  пусть str2 = строки [2];

  let ageStr;
  if (ageExp> 99) {
    ageStr = 'долгожитель';
  } еще {
    ageStr = 'молодой человек';
  }

  
  return `$ {str0} $ {personExp} $ {str1} $ {ageStr} $ {str2}`;
}

let output = myTag`Что $ {person} - это $ {age} .`;

console.log (вывод);
  

Функции тегов даже не должны возвращать строку!

  шаблон функции (строки,...keys) {
  return (function (... values) {
    let dict = values ​​[values.length - 1] || {};
    пусть результат = [строки [0]];
    keys.forEach (function (key, i) {
      let value = Number.isInteger (ключ)? значения [ключ]: dict [ключ];
      result.push (значение, строки [i + 1]);
    });
    вернуть result.join ('');
  });
}

let t1Closure = template` $ {0} $ {1} $ {0}! `;

t1Closure ('Y', 'A');

let t2Closure = template` $ {0} $ {'foo'}! `;

t2Closure ('Привет', {foo: 'Мир'});

let t3Closure = template`I'm $ {'name'}.Мне почти $ {'age'} лет.`;

t3Closure ('foo', {имя: 'MDN', возраст: 30});
t3Closure ({имя: 'MDN', возраст: 30});
  

Необработанные строки

Специальное свойство raw , доступное для первого аргумента тега функция, позволяет получить доступ к необработанным строкам в том виде, в котором они были введены, без обработки побег последовательности.

  тег функции (строки) {
  console.log (strings.raw [0]);
}

tag`string text line 1 \ n string text line 2`;


  

Кроме того, строка .raw () существует для создания необработанных строк — просто как функция шаблона по умолчанию и конкатенация строк.

  let str = String.raw`Hi \ n $ {2 + 3}! `;


стр. длина;


Array.from (str) .join (',');

  

Шаблоны с тегами и управляющие последовательности

Поведение ES2016

Начиная с ECMAScript 2016, шаблоны с тегами соответствуют правилам следующего escape-кода последовательности:

• Экраны Unicode, начинающиеся с « \ u «, например \ u00A9
• экранирование кодовой точки Unicode, обозначенное как « \ u {} «, например \ u {2F804}
• Шестнадцатеричные escape-последовательности, начинающиеся с « \ x », например \ xA9
• Восьмеричные буквальные переходы, начинающиеся с « \ 0o «, за которыми следует один или несколько цифры, например \ 0o251

Это означает, что шаблон с тегами, подобный следующему, является проблематичным, потому что, согласно Грамматика ECMAScript, синтаксический анализатор ищет допустимые escape-последовательности Unicode, но находит искаженный синтаксис:

  латекс \ юникод

  

ES2018 ревизия незаконного побега последовательности

Шаблоны с тегами должны позволять встраивание языков (например, DSL или LaTeX), где другие экранирующие последовательности общие.Литерал шаблона предложения ECMAScript В редакции (стадия 4, которая должна быть интегрирована в стандарт ECMAScript 2018) удаляется ограничение синтаксиса escape-последовательностей ECMAScript из шаблонов с тегами.

Однако недопустимые escape-последовательности должны быть представлены в «приготовленных» представление. Они будут отображаться как элемент undefined в «приготовленном» массив:

  функция латекс (str) {
  return {"приготовлено": str [0], "raw": str.raw [0]}
}

латекс \ юникод

  

Обратите внимание, что ограничение escape-последовательности снимается только с с тегами шаблоны — не из немаркированных литералов шаблона:

  let bad = `плохая escape-последовательность: \ unicode`;  

Таблицы BCD загружаются только в браузере

Топ-17 шаблонов для JavaScript 2020

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

Плагины расширились за пределы понимания среднестатистического разработчика, и мы также увидели — долгожданный — выпуск ECMAScript 6; новый стандарт JavaScript. Честно говоря, ES6 уже был на подходе, все, что нужно было сделать, — это доработать его. Обязательно ознакомьтесь с полной спецификацией, если вы еще этого не сделали. Улучшения ECMAScript 6 включают улучшенный синтаксис для классов, а также новые методы для строк и массивов, обещаний, карт и наборов.

Мы продолжаем наблюдать стремительный рост Node.js. Такие фреймворки, как Meteor.js, Angular.js и React.js, также проникли в глобальную экосистему JavaScript. Излишне говорить, что это были действительно революционные дополнения к уже сложившейся системе развития.

Механизм создания шаблонов — это, по сути, способ разработчикам эффективно вставлять строки. Если вы интенсивно разрабатываете интерфейсный JavaScript, использование механизма шаблонов сэкономит вам бесчисленные часы ненужной работы.А из-за огромного количества доступных сегодня движков шаблонов бывает сложно сделать правильный выбор в нужное время. Тем не менее, мы рассмотрим самые популярные и признанные лучшими (сообществом) движки шаблонов для JavaScript на сегодняшний день.

Mustache — одна из наиболее широко известных систем шаблонов, которая работает для ряда языков программирования, включая JavaScript, Node.js, PHP и многие другие. Поскольку Mustache — это шаблонизатор без логики, его можно буквально использовать для любого вида разработки.Он работает путем расширения тегов в шаблоне с использованием значений, предоставленных в хеш-коде или объекте. Отсутствие логики в названии связано с тем, что Mustache работает исключительно с помощью тегов. Все значения устанавливаются и выполняются в соответствии с тегами, так что в конечном итоге вы сэкономите часы «неприятной» работы по разработке. Используйте стратегический ярлык, если хотите.

Handlebars — это близкий преемник Mustache с возможностью замены тегов там, где это необходимо. Единственное отличие состоит в том, что Handlebars больше ориентирован на помощь разработчикам в создании семантических шаблонов без необходимости запутывать и тратить время.Вы можете легко опробовать Handlebars самостоятельно (есть также возможность попробовать Mustache на той же странице) и убедиться, что именно этот тип движка шаблонов вам нужен. И последнее, но не менее важное: Handlebars настроен для безупречной работы в любой среде ECMAScript 3. Другими словами, Handlebars работает с Node.js, Chrome, Firefox, Safari и другими.

doT.js — это небольшой, эффективный, быстрый и легкий механизм создания шаблонов, который поддерживает себя (без зависимостей) и отлично работает с Node.js и встроенная интеграция с браузером. Вы знаете, что при полной совместимости с Node.js и браузерами производительность будет выдающейся. Сверхбыстрое кодирование, управление пробелами, оценка во время компиляции и настраиваемые разделители — вот лишь некоторые из возможностей doT.js. К вашему сведению, doT.js вдохновлен плагинами jQote2 и underscore.js. Он очень удобен и идеально подходит как для начинающих, так и для профессиональных веб-разработчиков. Вы можете найти различные примеры, установку и другие инструкции на GitHub для плавной и беспроблемной интеграции.

Нет, мы еще не закончили представлять вам фантастические и самые популярные движки шаблонов JavaScript. Следующими в нашем списке будут шаблоны встроенного JavaScript (EJS). Легкое решение для создания разметки HTML с помощью простого кода JavaScript. Не беспокойтесь о правильной организации ваших вещей; это просто чистый JavaScript. Быстрое выполнение кода и простота отладки делают этот механизм создания шаблонов идеальным для тех, кто хочет работать с HTML на своем любимом языке, предположительно JavaScript.Что касается выполнения, вы можете ожидать, что он будет впечатляюще быстрым при работе с EJS. Возьмите в руки встроенные шаблоны JavaScript и начните уверенно.

Nunjucks — это богатый и мощный язык шаблонов для JavaScript, созданный Mozilla, который мы все знаем по их работе над Firefox. Короче говоря, Nunjucks богат и удобен, очень удобен в использовании как для новичков, так и для экспертов. Благодаря легкой конструкции вы уже знаете, что выполнение Nunjucks будет быстрым и безупречным.Инструмент также является гибким и расширяемым с помощью настраиваемых фильтров и расширений, которые вы можете вводить по своему желанию. Вы можете использовать Nunjucks в узле или в любом другом современном популярном браузере. На странице Nunjucks есть много разных примеров, чтобы вы могли понять суть.

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

Когда люди говорят, что Python похож на письмо по-английски, они недооценивают значение этого утверждения, когда дело доходит до программирования синтаксиса Pug.Механизм шаблонов Pug (для Node.js) буквально позволяет разработчикам писать код, который выглядит как абзацы, прямо из книги. Это не только улучшает общую продуктивность кода, но также может помочь оптимизировать работу над проектом, который состоит из нескольких членов команды. Кстати, с превосходным Pug вы также можете заняться созданием темы WordPress, но вам нужно использовать плагин под названием Wordless. Как круто это звучит?

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

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

Hogan — это шаблонизатор для JavaScript, упрощающий процедуру. Вы можете использовать этот инструмент как часть своих ресурсов даже в браузере для управления динамическими шаблонами. Имейте в виду, что Hogan работает, если вы работаете с Node.js, вам просто нужно использовать NPM, чтобы добавить его.Вы найдете все коды и все, что вам нужно для бесперебойной работы, на официальном сайте Hogan или перейдя на GitHub. У вас также есть все необходимое для компиляции и рендеринга. Более того, Hulk — это командная утилита Hogan, которая помогает компилировать ваши шаблоны в виде файлов JS. Наслаждайтесь тестированием и добавлением новых функций без изменения парсера.

Swig может быть очень простым в использовании, тем не менее, он имеет множество функций, которые вам пригодятся. Это шаблонизатор JavaScript, который достаточно гибкий и расширяемый, чтобы без проблем обслуживать ваш проект.Swig доступен для node.js, а также для всех популярных веб-браузеров и работает аналогично Dhang, Twig и Jinja2. Некоторые другие особенности Swig включают отличное покрытие кода, надежную структуру, фильтры, преобразования и множество итераций и условных выражений. Вы можете скачать Swig прямо сейчас, следовать исчерпывающей документации и начать с правильного пути с самого начала. Вы также можете просмотреть очень много вопросов и ответов, если вам понадобится дополнительная поддержка и помощь.

Marko — это простой в использовании и очень практичный шаблонизатор для JavaScript. Кто бы ни был знаком с HTML, CSS и, конечно же, JavaScript, он или она будет легко использовать возможности Марко. Этот инструмент также очень быстрый и удобный, идеально подходит для преобразования простого и простого HTML во что-то продвинутое. Имейте в виду, что Марко работает с некоторыми из лучших веб-сайтов, а это означает, что он с легкостью справится и с вашим. К вашему сведению, Marko также полностью поддерживает редактор Atom, Autocomplete, Hyperclick и Pretty Printing.Последнее помогает содержать код в чистоте и порядке. И последнее, но не менее важное: у Марко нет проблем с анимацией до 60 кадров в секунду.

Jade Language — это немного другой движок шаблонов для JavaScript по сравнению со всеми остальными, которые вы найдете в этом списке. Однако это все равно помогает; Фактически, он эффективен и удобен, позволяя вам завершить создание полного кода в нем. Вы можете найти Jade Language несколько необычным в использовании, но вы наверняка привыкнете к нему раньше, чем позже.Очевидно, что предварительные знания необходимы для успешного создания проекта с помощью Jade Language и поэкспериментировать с различными функциями и функциями, которые он поддерживает. Более того, Jade Language также упрощает написание встроенного кода JavaScript в вашем шаблоне, и существует три типа кодов.

Если вы ищете лучшие и самые простые движки для создания шаблонов для JavaScript, вы, несомненно, попали в нужное место. Здесь у нас есть обширная коллекция инструментов, которые подойдут вам и вашему проекту.Еще одна фантастическая альтернатива — JsRender. С помощью этого инструмента вы можете делать самые разные вещи, а также он позволяет отображать шаблоны на сервере или непосредственно в браузерах. Все, что делает JsRender, он делает мощно, достаточно и интуитивно. Для вашего удобства производительность также невероятно высокая. JsRender также позволяет использовать с jQuery или без него.

Не ищите в Интернете лучший и самый совершенный шаблонизатор для JavaScript. Если вы зашли так далеко, вы уже знаете, что у вас есть все необходимое, а затем еще немного для создания мощных, быстрых и легких шаблонов.И Squirrelly — еще один пример того, что наша тщательно подобранная коллекция инструментов никогда вас не подведет. Все шаблоны, которые вы напишете с помощью Squirrelly, будут молниеносными и первоклассными по производительности. Кроме того, Squirrelly не ограничивает вас только HTML; фактически, он работает с любым языком. Интересный факт: Squirrelly также очень маленький, всего около 2,5 КБ. Другие функции включают отсутствие чувствительности к пробелам, поддержку фильтров и партиалов, совместимость настраиваемых тегов и настраиваемые теги — разделители.

Шаблоны jQuery предоставляет все необходимое для создания шаблонов для JavaScript. Это инструмент, с которым вы не найдете проблем. Мало того, он быстрый, использует действительный HTML5 и использует только чистый HTML для шаблонов. С другой стороны, вы также можете выбрать объект jQuery в качестве шаблона. Вы можете быстро заполнить шаблоны, просто вызвав jQuery.loadTemplate. jQuery Templating также обеспечивает чистый конечный продукт, а это означает, что данные будут передаваться плавно.Зайдите на официальный сайт jQuery Templating, узнайте, как это работает и как применять, чтобы добиться успеха.

CoffeeScript — это транспилятор языка для JavaScript. Механизмы шаблонов, такие как ECT, позволяют разработчикам CoffeeScript очень легко иметь собственный небольшой синтаксис механизма шаблонов. Благодаря выдающейся производительности и таким функциям, как кэширование, автоматическая перезагрузка и интегрированная поддержка Node.js, ECT отличается скоростью, эффективностью и надежностью. Он работает «из коробки» с такими фреймворками, как Express, Require и PhoneGap.На веб-сайте ECT вы также можете найти различные методы использования с примерами, чтобы вы никогда не заблудились. Как будто этого уже недостаточно, поиграйте с демо и посмотрите, что возможно с ECT — короче говоря, много.

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

Выбор лучшего механизма создания шаблонов для JavaScript

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

Какие механизмы шаблонов для JavaScript вы предпочитаете и почему вы выбираете их над другими?

Язык шаблонов — JavaScript | Eleventy, более простой генератор статических сайтов.

Панировочные сухари:

Raw Values ​​#

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

Строка #

Синтаксис JavaScript

  module.exports = "
 Zach 
";  

Или шаблонные литералы:

Синтаксис JavaScript

  module.exports = `
 Они могут 
 охватывать 
 нескольких 
 строк! 
`;  

Buffer #

Некоторые библиотеки шаблонов возвращают буферы (например, viperHTML).

Синтаксис JavaScript

  module.exports = Buffer.от ("
 Zách 
");  

Promise #

Syntax JavaScript

  module.exports = new Promise ((resolve, reject) => {
 setTimeout (function () {
 resolve ("
 Zach 
") ; 
}, 1000); 
});  

Функция #

Может возвращать любое необработанное значение (например, String, Buffer, Promise). Используйте шаблонные литералы для встраивания значений данных без объединения строк!

Синтаксис JavaScript

  модуль.export = function (data) {
 return `
 $ {data.name} 
`; 
};  

Синтаксис деструктуризации немного легче читать:

Синтаксис JavaScript

  module.exports = function ({name}) {
 return `
 $ {name} 
` ; 
};  

Может быть, вам нравятся стрелочные функции:

Синтаксис JavaScript

  module.exports = ({name}) => `
 $ {name} 
`;  

async функций тоже работают:

Синтаксис JavaScript

  const getAnAsyncThing = require ("./ lib / asyncThing "); 
 module.exports = async function (data) {
 return` 
 $ {await getAnAsyncThing ()} 
 `; 
}; 
  

Classes #

Eleventy look для классов, которые имеют метод render и используют render для возврата содержимого шаблона. render методы могут быть async .

render может возвращать любое необработанное значение (например, String, Buffer, Promise) .

Синтаксис JavaScript

  class Test {
 render ({name}) {
 return `
 $ {name} 
`; 
} 
} модуль 
.экспорт = Тест; 
  

Дополнительные данные

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

Синтаксис JavaScript

  class Test {
 data () {
 return {
 name: "Ted", 
 layout: "teds-rad-layout", 
}; 
} 
 render ({name}) {
 return `
 $ {name} 
`; 
} 
} 
 
 модуль.экспорт = Тест; 
  

Permalinks #

Здесь будет работать ключ данных permalink . Постоянные ссылки могут быть необработанным значением (например, String, Buffer, Promise) или функцией, возвращающей любое исходное значение.

Строка постоянной ссылки #

Синтаксис JavaScript

  class Test {
 data () {
 return {
 permalink: "/ my-permalink /" 
}; 
} 
 render (данные) {} 
} 
 
 module.exports = Test; 
  

Функция постоянной ссылки #

Функции постоянной ссылки могут возвращать любое необработанное значение (например,грамм. Строка, буфер, обещание).

Синтаксис JavaScript

  class Test {
 data () {
 return {
 key: "hello", 
 permalink: data => `/ my-permalink / $ {data.key} /` 
}; 
} 
 render (данные) {} 
} 
 
 module.exports = Test; 
  

Функция постоянной ссылки с использованием фильтра #

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

Синтаксис JavaScript

  class Test {
 data () {
 return {
 title: «Это заголовок моего сообщения в блоге», 
 permalink: function (data) {
 return `/ $ {this.slug ( data.title)} / `; 
} 
}; 
} 
 render (данные) {} 
} 
 
 module.exports = Test; 
  

Markdown и JavaScript #

Да, вы можете использовать JavaScript в качестве языка препроцессора для Markdown. Подробнее о шаблоне EngineOverride .

Синтаксис JavaScript и Markdown

  class Test {
 data () {
 return {
 myName: "Zach", 
 templateEngineOverride: "11ty.js, md" 
}; 
} 
 render (data) {
 return `# Это $ {data.myName}`; 
} 
} 
 
 module.exports = Тест; 
  

Функции шаблона JavaScript #

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

Имя файла .eleventy.js

  module.exports = function (eleventyConfig) {
 eleventyConfig.addJavaScriptFunction ("myFunction", function (a, b) {…}); 
};  

Имя файла js-fn-example.11ty.js

  module.exports = function (data) {
 return `
 $ {this.myFunction (data.a, data.b)} 
 `; 
};  

Функции шаблона асинхронного JavaScript #

Работает так же, как любая функция или функция async JavaScript, которая возвращает Promise .

То же, что и в примере выше, но добавляет async перед функцией .

Имя файла .eleventy.js

  module.exports = function (eleventyConfig) {
 eleventyConfig.addJavaScriptFunction ("myAsyncFunction", async function (a, b) {…}); 
};  

Это то же самое, что и в примере выше, но добавляет await перед вызовом функции.

Имя файла js-async-fn-example.11ty.js

  module.exports = async function (data) {
 return `
 $ {await this.myAsyncFunction (data.a, data.b)} 
 `; 
};  

Предупреждение о стрелочных функциях #

Имя файла js-arrow-fn-example.11ty.js

  module.exports = (data) => {
 return `
 $ {this.myFunction (data.a, data.b)} 
< / h2> `; 
};  

Связь с фильтрами и шорткодами #

Любые универсальные фильтры или шорткоды также будут доступны как функции шаблона JavaScript.

Имя файла .eleventy.js

  module.exports = function (eleventyConfig) {
 eleventyConfig.addFilter ("myFilter", function (myVariable) {…}); 
 
 eleventyConfig.addShortcode ("пользователь", функция (firstName, lastName) {…}); 
 
 
 eleventyConfig.addPairedShortcode ("pairedUser", function (content, firstName, lastName) {…}); 
}; 
  

Имя файла universal-examples.11ty.js

  module.export = function (data) {
 return `
 
 $ {this.myFilter (data.myVar)} 
 
 
 $ {this.user (data.firstName, data.lastName)}  
 
 $ {this.pairedUser (`Вот еще кое-что`, data.firstName, data.lastName)} 
 
`; 
};  

Доступ к

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

  module.exports = function (eleventyConfig) {
 eleventyConfig.addJavaScriptFunction ("myFunction", function () {
 console.log (this.page); 
 
 console.log (this.page.url); 
 console .log (this.page.inputPath); 
 console.log (this.page.fileSlug); 
}); 
}; 
  

Другие страницы на языках шаблонов:

Связанные документы

Использование литералов шаблонов и шаблонов с тегами • JavaScript для нетерпеливых программистов (версия ES2021)

(Объявление, не блокируйте.)

21 Использование шаблонных литералов и шаблонов с тегами

Прежде чем мы углубимся в две особенности , литерал шаблона и тегированный шаблон , давайте сначала рассмотрим множественные значения термина шаблон .

21.1 Значение: «шаблон»

Следующие три вещи значительно отличаются, несмотря на то, что все они содержат шаблон в своих именах и несмотря на то, что все они выглядят одинаково:

• Текстовый шаблон - это функция преобразования данных в текст.Он часто используется в веб-разработке и часто определяется с помощью текстовых файлов. Например, следующий текст определяет шаблон для библиотеки Handlebars:

    
  
     
   {{title}} 
   
    
  
      {{тело}}
    
    

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

    // Первый шаг: получить текст шаблона, например из текстового файла.
  const tmplFunc = Рули.компилировать (TMPL_TEXT); // компилируем строку
  const data = {title: 'Моя страница', body: 'Добро пожаловать на мою страницу!'};
  const html = tmplFunc (данные);  

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

    const num = 5;
  assert.equal (`Count: $ {num}!`, 'Count: 5!');  

• Синтаксически тегированный шаблон - это литерал шаблона, который следует за функцией (или, скорее, за выражением, оценивающим функцию).Это приводит к вызову функции. Его аргументы выводятся из содержимого литерала шаблона.

    const getArgs = (... args) => args;
  assert.deepEqual (
    getArgs`Count: $ {5}! `,
    [['Count:', '!'], 5]);  

  Обратите внимание, что getArgs () получает как текст литерала, так и данные, интерполированные через $ {} .

21.2 Шаблонные литералы

Литерал шаблона имеет две новые функции по сравнению с обычным строковым литералом.

Во-первых, он поддерживает интерполяцию строки . : если мы помещаем динамически вычисляемое значение в $ {} , оно преобразуется в строку и вставляется в строку, возвращаемую литералом.

  const MAX = 100;
function doSomeWork (x) {
  if (x> MAX) {
    выбросить новую ошибку (`Максимальное допустимое значение $ {MAX}: $ {x}!`);
  }
  // ···
}
assert.throws (
  () => doSomeWork (101),
  {message: 'Разрешено не более 100: 101!'});  

Во-вторых, литералы шаблона могут занимать несколько строк:

  const str = `это
текст с
несколько строк`;  

Шаблонные литералы всегда создают строки.

21.3 Шаблоны с тегами

Выражение в строке A - это шаблон с тегами . Это эквивалентно вызову tagFunc () с аргументами, перечисленными в массиве в строке B.

  function tagFunc (... args) {
  вернуть аргументы;
}

const setting = 'темный режим';
значение константы = истина;

assert.deepEqual (
  tagFunc`Setting $ {setting} равен $ {value}! `, // (A)
  [['Setting', 'is', '!'], 'Dark mode', true] // (B)
);  

Функция tagFunc перед первым обратным апострофом называется функцией тега .Его аргументы:

• Строки шаблона (первый аргумент): массив с фрагментами текста, окружающими интерполяции $ {} .
  • В примере: ['Setting', 'is', '!']
• Подстановки (оставшиеся аргументы): интерполированные значения.
  • В примере: «темный режим» и истинный

Статические (фиксированные) части литерала (строки шаблона) хранятся отдельно от динамических частей (подстановок).

Функция тега может возвращать произвольные значения.

21.3.1 Готовые и необработанные строки шаблона (расширенный)

До сих пор мы видели только обработанную интерпретацию строк шаблона. Но на самом деле функции тегов имеют две интерпретации:

• Готовая интерпретация , где обратная косая черта имеет особое значение. Например, \ t создает символ табуляции. Эта интерпретация строк шаблона сохраняется как массив в первом аргументе.

• Необработанная интерпретация , где обратная косая черта не имеет особого значения. Например, \ t дает два символа - обратную косую черту и t . Эта интерпретация строк шаблона хранится в свойстве .raw первого аргумента (массива).

Необработанная интерпретация позволяет использовать необработанные строковые литералы через String.raw (описано ниже) и аналогичные приложения.

Следующая функция тега cookedRaw использует обе интерпретации:

  функция cookedRaw (templateStrings,...замены) {
  возвращаться {
    cooked: [... templateStrings], // копируем только элементы массива
    raw: templateStrings.raw,
    замены,
  };
}
assert.deepEqual (
  cookedRaw` \ tab $ {'subst'} \ newline \\ `,
  {
    приготовлено: ['\ tab', '\ newline \\'],
    raw: ['\\ tab', '\\ newline \\\\'],
    замены: ['subst'],
  });  

Мы также можем использовать escape-символы кодовой точки Unicode ( \ u {1F642} ), escape-символы Unicode ( \ u03A9 ) и escape-символы ASCII ( \ x52 ) в шаблонах с тегами:

  assert.deepEqual (
  приготовленноеRaw` \ u {54} \ u0065 \ x78t`,
  {
    приготовлено: ['Text'],
    raw: ['\\ u {54} \\ u0065 \\ x78t'],
    замены: [],
  });  

Если синтаксис одного из этих escape-символов неправильный, соответствующая строка готового шаблона будет undefined , тогда как исходная версия все еще дословно:

  assert.deepEqual (
  cookedRaw` \ uu \ xx $ {1} после`,
  {
    приготовлено: [undefined, 'после'],
    raw: ['\\ uu \\ xx', 'после'],
    замены: [1],
  });  

Неправильные escape-последовательности вызывают синтаксические ошибки в литералах шаблона и строковых литералах.Почему JavaScript по-разному обрабатывает шаблоны с тегами? Это позволяет нам использовать шаблоны с тегами для текста, который нельзя помещать в строковые литералы, например:

  windowsPath`C: \ uuu \ xxx \ 111`
латекс \ юникод  

21.4 Примеры шаблонов с тегами (предоставленные через библиотеки)

Шаблоны с тегами отлично подходят для поддержки небольших встроенных языков (так называемые предметно-ориентированные языки ). Продолжим несколько примеров.

21.4.1 Библиотека функций тегов: lit-html

lit-html - это библиотека шаблонов, основанная на шаблонах с тегами и используемая фреймворком внешнего интерфейса. Polymer:

  импорт {html, render} из "lit-html";

const template = (элементы) => html`
  

    $ {
      повторить (пункты,
        (элемент) => элемент.я бы,
        (элемент, индекс) => html` 
 $ {индекс}. $ {item.name} 
 `
      )
    }
  
`;  

repeat () - это настраиваемая функция для цикла. Его 2-й параметр создает уникальные ключи для значений, возвращаемых 3-м параметром. Обратите внимание на вложенный шаблон с тегами, используемый этим параметром.

21.4.2 Библиотека функций тегов: тег re-template

re-template-tag - это простая библиотека для составления регулярных выражений. Шаблоны с тегами и создают регулярные выражения.Основное преимущество заключается в том, что мы можем интерполировать регулярные выражения и простой текст через $ {} (строка A):

  const RE_YEAR = re` (? <Год> [0-9] {4}) `;
const RE_MONTH = re` (? <месяц> [0-9] {2}) `;
const RE_DAY = re` (?  [0-9] {2}) `;
const RE_DATE = re` / $ {RE_YEAR} - $ {RE_MONTH} - $ {RE_DAY} / u`; // (А)

const match = RE_DATE.exec ('2017-01-27');
assert.equal (match.groups.year, '2017');  

21.4.3 Библиотека функций тегов: graphql-tag

Библиотека graphql-tag позволяет нам создавать запросы GraphQL с помощью шаблонов с тегами:

  импортировать gql из 'graphql-tag';

const query = gql`
  {
    user (id: 5) {
      имя
      фамилия
    }
  }
  `;  

Кроме того, существуют плагины для предварительной компиляции таких запросов в Babel, TypeScript и т. Д.\ .`);

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

Необработанные строковые литералы также полезны для указания путей к именам файлов Windows:

  const WIN_PATH = String.raw`C: \ foo \ bar`;
assert.equal (WIN_PATH, 'C: \\ foo \\ bar');  

21,6 (продвинутый)

Все остальные разделы расширены

21.7 Многострочные литералы шаблона и отступ

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

Например:

  функция div (текст) {
  return `
    

      $ {text}
    
  `;
}
console.log ('Вывод:');
console.log (
  div ('Привет!')
  // Заменим пробелы средними точками:
  .заменить (/ / g, '·')
  // Заменить \ n на # \ n:
  .replace (/ \ n / g, '# \ n')
);  

Из-за отступов литерал шаблона хорошо вписывается в исходный код. Увы, вывод тоже с отступом. И мы не хотим возврата в начале и возврата плюс два пробела в конце.

  Выход:
#
···· 
 #
······Привет!#
···· 
 #
··  

Есть два способа исправить это: с помощью шаблона с тегами или путем обрезки результата литерала шаблона.

21.7.1 Исправление: тег шаблона для удаления зубов

Первое исправление — использовать настраиваемый тег шаблона, который удаляет нежелательные пробелы. Он использует первую строку после начального разрыва строки, чтобы определить, в каком столбце начинается текст, и сокращает отступ везде. Он также удаляет разрыв строки в самом начале и отступ в самом конце. Один из таких тегов шаблона — dedent от Desmond Brand:

  импорт dedent от dedent;
function divDedented (text) {
  возвращение dedent`
    

      $ {text}
    
  `.заменить (/ \ n / g, '# \ n');
}
console.log ('Вывод:');
console.log (divDedented ('Привет!'));  

  Выход:
 #
  Привет!#
  

  function divDedented (text) {
  return `

  $ {text}

  `.trim (). replace (/ \ n / g, '# \ n');
}
console.log ('Вывод:');
console.log (divDedented ('Привет!'));  

  Выход:
 #
  Привет!#
  

  const tmpl = (data) => `Привет, $ {data.name}!`;
assert.equal (tmpl ({имя: 'Джейн'}), 'Привет, Джейн!');  

  постоянных адресов = [
  {первая: '', последняя: 'Связь'},
  {первый: 'Ларс', последний: ''},
];  

  const tmpl = (addrs) => `
<таблица>
  $ {addrs.карта(
    (адрес) => `
      

  console.log (tmpl (адреса));  

  <таблица>
  
         & lt; Джейн & gt; 
         Облигация 
       
         Ларс 
         & lt; Croft & gt; 
      
  

  function escapeHtml (str) {
  return str
    .replace (/ & / g, '& amp;') // сначала!
    .replace (/> / g, '& gt;')
    .replace (/ '), '& lt; пустой & gt;');  

 
var data = {
  first_name: "Хенрик",
  last_name: "Joreteg"
}


html = ich.данные пользователя)