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發布的代碼。
