bem components
v5.1.1
bem-components是一个开源库，提供了一组用于创建Web接口的现成的视觉组件（块）。
图书馆提供设计主题。此版本介绍了islands主题，该主题实现了新的Yandex设计。功能包括一次支持多个主题，并创建新主题。
附加信息
common.blocks - 任何设备和浏览器的支持。desktop.blocks - 支持桌面浏览器。touch.blocks - 触摸平台的特定功能的实现。touch-phone.blocks - 实现智能手机的特定功能。touch-pad.blocks - 平板电脑的特定功能的实现。design/<common|desktop|touch|touch-phone|touch-pad>.blocks - 各种设计的实现（主题）。 桌面
触碰
要支持Internet Explorer 8，您必须添加：
*.ie.styl扩展名的样式文件。为此，请在构建配置中指定它们（请参阅此示例），然后在page部分中添加注释（请参阅此示例）。您还可以在模板级别启用Internet Explorer 8的样式。 汇编者
优化器
代码分析
其他
有几种开始使用bem-components方法。最佳方法取决于您项目的要求以及其与图书馆的技术和工具的兼容性以及您在BEM项目中的经验。
选择最适合您项目的方法：
| 区 | 来源 | 编译 |
|---|---|---|
| 预组装CSS和JavaScript代码和库模板。通过链接到页面进行集成。不需要与项目的组装或兼容性。 | 库的完整源代码。需要组装。您的项目必须与图书馆的技术和工具完全兼容。 | 库的完整源代码。需要组装。与源方法不同的是，邮政编码被编译到CSS中。适用于未使用邮政信箱的项目。 |
您使用库的方式确定如何将其集成到项目中：
我们建议使用ENB或BEM工具整合库。
例如，您可以使用project-stub，默认情况下启用了库。您还可以创建一个项目并使用YO Generator连接库（这允许您创建必要的项目配置）。
将库连接到项目的最简单方法是下载预组装的库文件，并使用<link>和<script>元素将它们添加到HTML页面中。有几种方法可以做到这一点：
有关如何使用连接的库文件的信息，请参见与库一起工作。
预组装库的结构
有三个平台可用的单独的文件集：
每组包括：
bem-components.css样式；bem-components.ie.css - IE8的样式（更多信息）；bem-components.js - javaScript;bem-components.bemhtml.js - bemhtml模板；bem-components.bh.js - BH模板；bem-components.js+bemhtml.js - 结合了JavaScript代码和BEMHTML模板，用于在浏览器中使用模板；bem-components.js+bh.js - 结合了JavaScript代码和BH模板，用于在浏览器中使用模板；bem-components.no-autoinit.js javaScript无自动初始化。如果您需要在i-bem.js中编写自己的代码，请使用它；bem-components.no-autoinit.js+bemhtml.js ;bem-components.no-autoinit.js+bh.js 。每组还包括相同文件的开发版本（保留原始格式和注释）。
将库连接到项目的最快，最简单的方法是将<link>和<script>元素添加到HTML页面：
< link rel =" stylesheet " href =" https://yastatic.net/bem-components/latest/desktop/bem-components.css " >
< script src =" https://yastatic.net/bem-components/latest/desktop/bem-components.js+bemhtml.js " > </ script >从cdn： //yastatic.net/library-name/version/platform/file-name连接文件的模式。
示例： //yastatic.net/bem-components/latest/desktop/bem-components.dev.js+bemhtml.js 。
选择适当的库版本并下载存档。解开它。使用<link>和<script>元素将文件添加到页面上：
< link rel =" stylesheet " href =" desktop/bem-components.css " >
< script src =" desktop/bem-components.js+bemhtml.js " > </ script > 库代码在GitHub上：https：//github.com/bem/bem-components。
要运行构建，请使用以下命令：
# Clone the library source code
git clone https://github.com/bem/bem-components.git
# Switch to the library folder
cd bem-components
# Install the required dependencies
npm install
# Build Dist
npm run dist
由于构建，这些文件将在bem-components-dist文件夹中可用。连接页面HTML中的文件：
< link rel =" stylesheet " href =" bower_components/bem-components-dist/desktop/bem-components.css " >
< script src =" bower_components/bem-components-dist/desktop/bem-components.js+bemhtml.js " > </ script > 只要鲍尔已经在您的项目中，请运行以下命令：
bower i bem/bem-components-dist
由于构建，这些文件将在bem-components-dist文件夹中可用。以与先前的方法相同的方式连接文件：
< link rel =" stylesheet " href =" bower_components/bem-components-dist/desktop/bem-components.css " >
< script src =" bower_components/bem-components-dist/desktop/bem-components.js+bemhtml.js " > </ script > 与图书馆合作有两个步骤：
第一步始终是相同的。第二步可以以三种不同的方式执行，您可以根据需要结合使用：
方法1。从示例复制HTML。为此，请转到示例标题中的HTML选项卡。
这是最简单的方法，但是如果模板在库的未来版本中更新，则必须在每个更新的块中手动进行更改。
方法2。在浏览器中使用模板。组装Dist库包括预组装的BEMHTML和BH模板可供选择。
为此，请从文档中复制示例bemjson代码，然后将其粘贴到页面的HTML代码中。在示例的标题中使用BEMJSON选项卡。
页面的HTML代码看起来像这样：
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " >
< title > bem-components as a library </ title >
< link rel =" stylesheet " href =" https://yastatic.net/bem-components/latest/desktop/bem-components.css " >
</ head >
< body class =" page page_theme_islands " >
< form class =" form " action =" / " > </ form >
< script src =" https://yastatic.net/bem-components/latest/desktop/bem-components.no-autoinit.js+bemhtml.js " > </ script >
< script >
modules . require ( [ 'i-bem__dom' , 'BEMHTML' , 'jquery' , 'i-bem__dom_init' ] , function ( BEMDOM , BEMHTML , $ , init ) {
var html = BEMHTML . apply ( {
block : 'select' ,
mods : { mode : 'check' , theme : 'islands' , size : 'm' } ,
name : 'select1' ,
val : [ 2 , 3 ] ,
text : 'Conference programme' ,
options : [
{ val : 1 , text : 'Report' } ,
{ val : 2 , text : 'Master class' } ,
{ val : 3 , text : 'Round Table' }
]
} ) ;
BEMDOM . append ( $ ( '.form' ) , html ) ;
// NOTE: explicitly call `init();` if you need to initialize blocks from HTML markup
} ) ;
</ script >
</ body >
</ html >与第一个方法相反，当库更新为新版本时，此代码不需要对标记进行任何更改。但是，搜索引擎也可能不会对客户生成的标记也索引。
方法3 。在node.js中执行{BEMHTML,BH}.apply() ，并给浏览器准备好的HTML：
var BEMHTML = require ( './dist/desktop/bem-components.bemhtml.js' ) . BEMHTML ;
BEMHTML . apply ( {
block : 'select' ,
mods : { mode : 'check' , theme : 'islands' , size : 'm' } ,
name : 'select1' ,
val : [ 2 , 3 ] ,
text : 'Conference programme' ,
options : [
{ val : 1 , text : 'Report' } ,
{ val : 2 , text : 'Master class' } ,
{ val : 3 , text : 'Round Table' }
]
} ) ; // returns HTML line该库由块组成，您可以在bem-components Showcase中看到视觉表示。块的状态可以确定行为模型。块的状态通过修饰符和专业领域表示。更改修饰符会创建一个可用于与块一起工作的事件。
如果您可以使用修改器更改事件，则无需创建特殊的BEM事件。根据用于更改组件状态（修饰符或字段）的使用方法，使用了不同的事件：
value字段的“状态”，使用了change事件。bem-components中的控件bem-components中的控件可以用作创建其他库组件的基础。此类控件没有HTML中的模型，并且可以用于不需要特定HTML模型语义的任务。
例如，想想HTMLinputelement的“行为模型”，该元素是专门设计用于编辑数据的高级接口。 bem-components块的不同之处在于，它们可以用作另一个库中一个可以解决相同问题的块的基础。但是，除此之外，它们可以在不需要HTML input语义的接口中提供其他目的。
focused修饰符BEM组件中的控件具有两种类型的焦点，这些焦点是使用focused和focused-hard修饰符设置的。焦点的类型决定了控制的外观。
根据设置焦点的方式自动选择修饰符：
focused - 设置鼠标单击控件。focused-hard - 使用键盘或通过JavaScript选择控件时设置。当组件获得焦点时，它更明显地突出显示了组件。例如，在Islands主题中， focused-hard集中的大多数控件会获得额外的边界。 获取资源：
$ git clone git://github.com/bem/bem-components.git
$ cd bem-components安装依赖项（工具）：
$ npm install要运行本地安装的工具，请使用export PATH=./node_modules/.bin:$PATH或任何替代方法。
安装依赖库：
$ bower install建立示例和测试：
$ npm run build-all启动开发服务器：
$ npm start
$ open http://localhost:8080/注意：有关组装单个块的信息，请参见模板的“测试”部分。
代码分析：
$ npm run lintnpm run test-specs命令在JS上启动单元测试。
要启动基于点的程序集，请使用命令enb make specs desktop.specs/<block-name> （例如， enb make specs desktop.specs/input ）。
测试将在Travis上自动运行，每次拉动请求。
赫敏用于布局测试。
每个块的测试存储在hermione/ Directory中的单独的block-name.hermione.js文件中。在本地，测试将手动执行。在Travis上，测试将自动执行。对于硒网格，使用索环列布斯服务。
对于本地执行测试，您需要：
SAUCE_USERNAME和SAUCE_ACCESS_KEY ）。sc实用程序（SauceConnect），并等待隧道打开。hermione进行测试。hermione gui 。开发新测试以加快本地执行的速度时：
.hermione.conf.js文件中，将gridUrl选项更改为http://localhost:4444/ 。有关将Hermione与各种后端使用的更多信息，请阅读Hermione快速启动文章。
注意：您需要在存储库中的索环节保存屏幕截图。这有助于避免呈现字体时差异。
在提交新的或修改的参考图像之前，您必须：
为库构建工具，您可以在BEMHTML和BH块模板上构建和运行测试。
添加一个块测试
[block name].tmpl-specs在必要级别中的目录。测试文件将存储在此目录中。可以为一个块编写多个测试，因此，每个测试由两个具有相同名称的文件（Bemjson和HTML）组成。
desktop.blocks
└── myblocks
├── myblock.bemhtml.js
├── myblock.bh.js
├── ...
└── myblock.tmpl-specs
├── 10-default.bemjson.js
├── 10-default.html
├── 20-advanced.bemjson.js
└── 20-advanced.html
要构建和运行测试，请使用：
magic run tmpl-specs要在所需的定义级别上构建测试，请使用：
magic make desktop.tmpl-specs要仅针对特定块构建测试，请使用：
magic make desktop.tmpl-specs/button如果构建过程成功，则可以自动运行测试，您将看到所有测试结果。如果应用模板的结果与HTML中的块样本不匹配，则会在日志中看到一个错误，指示其与块样本有何不同。
所有测试均在每个拉请求上使用Travis自动运行。
当前的任务在特殊的敏捷板上列出。
任务状态：
代码和文档©2012 Yandex LLC。根据Mozilla公共许可证2.0发布的代码。
