bem components
v5.1.1
bem-components Webインターフェイスを作成するための既製の視覚コンポーネント（ブロック）のセットを提供するオープンソースライブラリです。
ライブラリはデザインのテーマを提供します。このバージョンでは、新しいYandexデザインを実装するislandsテーマを紹介します。機能には、複数のテーマを一度にサポートし、新しいテーマの作成が含まれます。
追加情報
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セクションにコメントを追加します（この例を参照）。テンプレートレベルでインターネットエクスプローラー8のスタイルを有効にすることもできます。 アセンブラー
オプティマイザー
コード分析
他の
bem-componentsの使用を開始する方法はいくつかあります。最良のアプローチは、プロジェクトの要件と、ライブラリのテクノロジーとツールとの互換性、およびBEMプロジェクトの経験に依存します。
プロジェクトに最適な方法を選択してください。
| 区別 | ソース | コンパイル |
|---|---|---|
| 事前に組み立てられたCSSおよびJavaScriptコードおよびライブラリテンプレート。ページにリンクして統合されます。プロジェクトとのアセンブリや互換性は必要ありません。 | ライブラリの完全なソースコード。アセンブリが必要です。プロジェクトは、図書館のテクノロジーとツールと完全に互換性がある必要があります。 | ライブラリの完全なソースコード。アセンブリが必要です。 PostCSSがCSSにコンパイルされるという点で、ソースメソッドとは異なります。 PostCSSが使用されていないプロジェクトに適しています。 |
ライブラリの使用方法は、それをプロジェクトに統合する方法を決定します。
ENBまたはBEM-Toolsを使用してライブラリを統合することをお勧めします。
例として、プロジェクトスタブを使用できます。ここでは、デフォルトでライブラリが有効になっています。また、プロジェクトを作成し、YOジェネレーターを使用してライブラリを接続することもできます（これにより、必要なプロジェクト構成を作成できます）。
ライブラリをプロジェクトに接続する最も簡単な方法は、事前に組み込まれたライブラリファイルをダウンロードし、 <link>および<script>要素を使用してHTMLページに追加することです。これを行うにはいくつかの方法があります：
接続されたライブラリファイルの使用方法については、ライブラリの操作を参照してください。
事前に組み立てられたライブラリの構造
3つのプラットフォームで使用可能なファイルの個別のセットがあります。
各セットには以下が含まれます：
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がすでにあなたのプロジェクトに属している場合は、次のコマンドを実行します。
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 > ライブラリを使用するには2つの手順があります。
最初のステップは常に同じです。 2番目のステップは、3つの異なる方法で実行できます。これを希望どおりに組み合わせることができます。
方法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 。 {BEMHTML,BH}.apply() in node.jsでexecuteを使用し、ブラウザに準備された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ショーケースで視覚的に表されるブロックで構成されています。ブロックには、行動モデルを決定する状態があります。ブロックの状態は、修飾子および専門分野を通じて表現されます。修飾子を変更すると、ブロックの操作に使用できるイベントが作成されます。
修飾子変更イベントを操作できる場合、特別なBEMイベントを作成する必要はありません。コンポーネントの状態（修飾子またはフィールド）の変更に使用されるものに応じて、さまざまなイベントが使用されます。
valueフィールドの「状態」の変更に対応するために、 changeイベントが使用されます。bem-componentsのコントロールbem-componentsのコントロールは、他のライブラリコンポーネントを作成するための基礎として使用できます。このようなコントロールには、HTMLのようなモデルはありません。また、特定のHTMLモデルのセマンティクスを必要としないタスクに使用できます。
例として、データの編集用に特別に設計された高レベルのインターフェイスであるHTMlinputelementの「行動モデル」を考えてください。 bem-componentsブロックの違いは、同じ問題を解決する別のライブラリのブロックの基礎として使用できることです。しかし、それに加えて、 HTML inputセマンティクスを必要としないインターフェイス内の他の目的を果たすことができます。
focusedモディファイアBEMコンポーネントのコントロールには、2種類のフォーカスがあり、これは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でテストは、プル要求ごとにTravisで自動的に実行されます。
ハーマイオニーはレイアウトテストに使用されます。
各ブロックのテストはhermione/ Directoryの別のblock-name.hermione.jsファイルに保存されます。ローカルでは、テストは手動で実行されます。 Travisでは、テストが自動的に実行されます。 Selenium Gridには、Saucelabsサービスが使用されます。
テストをローカルに実行するには、次のことが必要です。
SAUCE_USERNAME and SAUCE_ACCESS_KEY ）。scユーティリティ（sauceconnect）を起動し、トンネルが開くのを待ちます。hermioneを使用してテストを実行します。hermione guiを使用してください。ローカル実行をスピードアップするための新しいテストを開発するとき：
.hermione.conf.jsファイルで、 gridUrlオプションをhttp://localhost:4444/に変更します。さまざまなバックエンドでHermione使用の詳細については、Hermioneのクイックスタート記事を読んでください。
注：リポジトリのソーセラブからスクリーンショットを保存する必要があります。これは、フォントをレンダリングする際の矛盾を回避するのに役立ちます。
新しい参照画像または変更された参照画像をコミットする前に、次のことが必要です。
ライブラリ用のビルドツールを使用すると、BEMHTMLおよびBHブロックテンプレートでテストを構築および実行できます。
ブロックのテストを追加します
[block name].tmpl-specs 。テストファイルはこのディレクトリに保存されます。複数のテストをブロック用に記述できます。したがって、各テストは、同じ名前の2つのファイル（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 Public License 2.0の下でリリースされたコード。
