enb-bemxjst-7x
Advanced tools
Пакет предоставляет набор ENB-технологий для сборки BEMTREE- и BEMHTML-шаблонов в проектах, построенных по методологии БЭМ.
Технологии пакета enb-bemxjst:
Принципы работы технологий и их API описаны в документе API технологий.
Совместимость: технологии пакета enb-bemxjst используют компилятор BEM-XJST версии 6.2.0.
Установите пакет enb-bemxjst:
$ npm install --save-dev enb-bemxjst
Требования: зависимость от пакета enb версии 0.16.0 и выше.
Подключите необходимые технологии: bemtree, bemhtml.
var BemtreeTech = require('enb-bemxjst/techs/bemtree'),
BemhtmlTech = require('enb-bemxjst/techs/bemhtml'),
FileProvideTech = require('enb/techs/file-provider'),
bemTechs = require('enb-bem-techs');
module.exports = function(config) {
config.node('bundle', function(node) {
// Получаем FileList
node.addTechs([
[FileProvideTech, { target: '?.bemdecl.js' }],
[bemTechs.levels, { levels: ['blocks'] }],
bemTechs.deps,
bemTechs.files
]);
// Создаем BEMTREE-файл
node.addTech(BemtreeTech);
node.addTarget('?.bemtree.js');
// Создаем BEMHTML-файл
node.addTech(BemhtmlTech);
node.addTarget('?.bemhtml.js');
});
};
Для сборки HTML используйте технологию bemjson-to-html.
var BemjsonToHtmlTech = require('enb-bemxjst/techs/bemjson-to-html'),
BemhtmlTech = require('enb-bemxjst/techs/bemhtml'),
FileProvideTech = require('enb/techs/file-provider'),
bemTechs = require('enb-bem-techs');
module.exports = function(config) {
config.node('bundle', function(node) {
// Получаем BEMJSON-файл
node.addTech([FileProvideTech, { target: '?.bemjson.js' }]);
// Получаем FileList
node.addTechs([
[bemTechs.levels, { levels: ['blocks'] }],
[bemTechs.bemjsonToBemdecl],
[bemTechs.deps],
[bemTechs.files]
]);
// Собираем BEMHTML-файл
node.addTech(BemhtmlTech);
node.addTarget('?.bemhtml.js');
// Создаем HTML-файл
node.addTech(BemjsonToHtmlTech);
node.addTarget('?.html');
});
};
По БЭМ-методологии шаблоны к каждому блоку хранятся в отдельных файлах с расширением .bemtree.js и .bemhtml.js в директориях блоков. Чтобы использовать шаблоны, необходимо собрать их исходные файлы.
Отдельные файлы с шаблонами (.bemtree.js или .bemhtml.js) собираются в один общий файл (?.bemtree.js или ?.bemhtml.js) с помощью технологий:
Результат — скомпилированный файл ?.bemhtml.js или ?.bemtree.js — может применяться по-разному в зависимости от наличия модульной системы и ее типа в следующих случаях:
Скомпилированный файл подключается как модуль в формате CommonJS.
var BEMTREE = require('bundle.bemtree.js').BEMTREE, // Путь до скомпилированного BEMTREE-файла
BEMHTML = require('bundle.bemhtml.js').BEMHTML; // Путь до скомпилированного BEMHTML-файла
var bemjson = BEMTREE.apply({ block: 'page', data: { /* ... */ } }),
html = BEMHTML.apply(bemjson); // <html>...</html>
Скомпилированный файл подключается на страницу как JavaScript-файл.
<script src="bundle.bemtree.js"></script>
<script src="bundle.bemhtml.js"></script>
В браузере способы исполнения шаблонов зависят от наличия модульной системы:
Без модульной системы
Шаблоны доступны из глобальной переменной BEMTREE или BEMHTML.
var bemjson = BEMTREE.apply({ block: 'page', data: { /* ... */ } }),
html = BEMHTML.apply(bemjson); // <html>...</html>
С модульной системой YModules
Шаблоны доступны из модульной системы (YModules):
modules.require(['BEMTREE', 'BEMHTML'], function(BEMTREE, BEMHTML) {
var bemjson = BEMTREE.apply({ block: 'page', data: { /* ... */ } }),
html = BEMHTML.apply(bemjson); // <html>...</html>
});
HTML – результат применения скомпилированного шаблона к указанному BEMJSON-файлу.
Сборка HTML (файл ?.html) с помощью технологий enb-bemxjst проходит в два этапа:
?.bemhtml.js собирается с помощью технологии bemhtml.?.bemhtml.js-файл обрабатываются с помощью технологии bemjson-to-html, которая возвращает HTML-файл (?.html).Технологии bemtree и bemhtml поддерживают возможность подключения сторонних библиотек как глобально, так и для разных модульных систем с помощью опции requires.
Для подключения укажите название библиотеки и в зависимости от используемой модульной системы:
{
requires: {
'lib-name': {
globals: 'libName', // Название переменной в глобальной видимости
ym: 'lib-name', // Имя модуля из YModules
commonJS: 'path/to/lib-name' // Путь к модулю CommonJS относительно собираемого файла
}
}
}
В шаблонах модули будут доступны с помощью метода this.require, например:
block('button').content()(function () {
var lib = this.require('lib-name');
return lib.hello();
});
Не обязательно указывать все модульные системы для подключения библиотеки.
Например, можно указать зависимости глобально. В этом случае модуль всегда будет передаваться из глобальной переменной, даже если в среде исполнения будет модульная система.
{
requires: {
'lib-name': {
globals: 'dependName' // Название переменной в глобальной видимости
}
}
}
Пример подключения библиотеки moment
Указывается путь к модулю:
{
requires: {
moment: {
commonJS: 'moment', // Путь к модулю CommonJS относительно собираемого файла
}
}
}
В шаблонах модуль будет доступен с помощью метода this.require('moment'). Код шаблона пишется один раз, одинаково для исполнения в браузере и в Node.js:
block('post').elem('data').content()(function () {
var moment = this.require('moment'), // Библиотека `moment`
// Время в миллисекундах, полученное с сервера
return moment(ctx.param.date).format('YYYY-MM-DD HH:mm:ss');
});
Существует два синтаксиса для BEMHTML-шаблонов:
С момента выпуска библиотеки bem-core сокращенный синтаксис шаблонов считается устаревшим и больше не поддерживается.
О правилах перехода на JS-синтаксис читайте в руководстве по миграции.
Базовая реализация BEM-XJST-технологий не содержит шаблонов для интернационализации (i18n).
Чтобы использовать i18n в шаблонах, следует подключить модуль BEM.I18N по аналогии с другими сторонними библиотеками.
BEM.I18N— библиотека для интернационализации блоков. Ядро находится вkeyset-файлах в одной из базовых библиотек блоков:
После подключения BEM.I18N библиотека будет доступна в шаблонах с помощью метода this.require:
block('button').elem('tooltip').content()(function () {
var i18n = this.require('i18n'), // Библиотека `BEM.I18N`
// Локализованное значение для ключа `tooltip`
return i18n('button', 'tooltip');
});
© 2013 YANDEX LLC. Код лицензирован Mozilla Public License 2.0.
FAQs
bem-xjst support for ENB
The npm package enb-bemxjst-7x receives a total of 2 weekly downloads. As such, enb-bemxjst-7x popularity was classified as not popular.
We found that enb-bemxjst-7x demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.