👧🏽 🌹 🎚️ jQuery.BEM-BEMメソッドを使用してレイアウトを操作するための宣言型アプローチ 🚵🏻 🗨️ 👤

BEMについてはすでに多くのことが言われていますが、なぜそれが良いのか、何が悪いのか、そして今日は繰り返しません。以下は、良心と時間でbem-tools、bem-bl、およびbemhtmlを固定できない小さなプロジェクトでjQueryのBEM DOMを使用する方法についてのストーリーです。ファイル。

詳細と使用例については、katの下で招待した利害関係者。

方法論

BEM（略称Block Element Modifier）は、HTMLレイアウトを整理するための特別な方法で、多かれ少なかれ大規模なサイトやWebアプリケーションの開発とサポートを大幅に促進します。

方法論のコースを完全には紹介しませんが、最近非常に人気が出てきており、情報を得るための資料がたくさんあります。しかし、BEMとその利点についてまだ聞いていないことが起こった場合は、以下をご覧ください。

初心者には講義を視聴することをお勧めします。まず、何も読む必要がなく、ビデオがあります。次に、すべてが最初のオプションよりもはるかによく説明されており、脳は元気づけられています。

なぜ別の実装なのか？

そのようなギズモが非常に多くあることは言うまでもありませんが、密接な類似点はbem-blライブラリのi-bemフレームワークだけですが、ネイティブ環境外で動作させるのは非常に問題です。

Yandex bem-tools、bem-bl、およびコレクターとテンプレートエンジンの大騒ぎは間違いなくクールです。しかし、数百のテンプレートを持つプロジェクトに成熟するまで、これはすべて邪魔になりそうです。ある種の軽量のPHPフレームワーク上に、小さなオンラインストアがあるとします。ここでは、これはすべてスズメの大砲から撮影していますが、常に何かを変えたいと思っている愛する顧客が常にいるでしょう。

この方法論はスケーリングの利便性においてすでに実証されており、jQuery.BEMは、シックで複雑なテクノロジーを使用せずにJavaScriptからBEMレイアウトを操作する最適な機会です。必要なのは、jQuery、jQuery.BEMプラグイン、およびBEMメソッドに従って作成されたページだけです。

jQuery.BEMがこのアクションの最適な実装であるとは主張していません。DOMを移動するのが難しいため、同じi-bemに対するパフォーマンスが低下する可能性がありますが、本質的に、現時点では最も便利です。

要素を操作する

商品にいくつかのブロックがあるとします：

<div class="b-product"> <div class="b-product__name">Coffe</div> <div class="b-product__price">$2</div> </div> <div class="b-product"> <div class="b-product__name">Tea</div> <div class="b-product__price">$1</div> </div>

最初のブロックの子に対して何らかのアクションを実行する必要があります。

 $('.b-product').first().children('.b-product__name'); // jQuery $('.b-product').first().elem('name'); // jQuery.BEM

jQuery.BEMを使用すると、記録が短くなりました。もちろん、数バイトの違いは疑わしい利点ですが、実稼働環境では.elem（）を使用すると、たとえば、ブロックの名前を突然変更する必要がある場合に便利です。

修飾子を使用する

修飾子を追加

 <div class="b-product">...</div>

 $('.b-product').setMod('theme', 'premium'); //  .b-product.b-product_theme_premium $('.b-product').setMod('premium'); //  .b-product.b-product_premium_yes

修飾子を削除

 <div class="b-product b-product_theme_premium">...</div>

 $('.b-product').delMod('theme', 'discount'); //   -    .b-product.b-product_theme_premium $('.b-product').delMod('theme', 'premium'); //   .b-product_theme_premium $('.b-product').delMod('theme'); //   theme

修飾子を取得します

 <div class="b-product b-product_theme_premium">...</div>

 $('.b-product').getMod('theme'); //  "premium" $('.b-product').getMod('discount'); //  null

チェック修飾子

 <div class="b-product b-product_theme_premium">...</div>

 $('.b-product').hasMod('theme'); // true $('.b-product').hasMod('theme', 'premium'); // true $('.b-product').hasMod('theme', 'discount'); // false

修飾子でブロックをフィルタリングします

 <div class="b-product b-product_theme_premium">...</div> <div class="b-product">...</div>

 $('.b-product').byMod('theme', 'premium'); //  $('.b-product.b-product_theme_premium') $('.b-product').byMod('theme'); //  $('.b-product.b-product_theme_premium') $('.b-product').byNotMod('theme'); //  $('.b-product').not('.b-product_theme_premium')

ブロック宣言

クラスの命名システムに加えて、BEMキラー機能は宣言です。少なくとも視覚的にブロックを分離するだけで、ブロックのロジックを使用して作業を大幅に促進することができます。

 bem.decl('b-product', { onInit: function($this) { //   price  size   large   DOM   // $this   —  jQuery  $this.elem('price').setMod('size', 'large'); }, title: { onMouseover: function($this) { //   b-product  state   hover $this.up().setMod('state', 'hover'); //  -   this._customFunction(); }, _customFunction: function() { console.log('I am helper function'); } }, price: { onSetmod: function($this, e, modKey, modVal) { //         price console.log('Modifier set:', modKey, modVal); }, onDelmod($this, e, modKey, modVal) { // } } });

特定の修飾子を持つブロックまたは要素、および個々のブロック要素のみを宣言できます。

 bem.decl({ block: 'b-product', mod: 'theme:premium'}, { // }); bem.decl({ block: 'b-product', elem: 'price' }, { // });

すべてのイベントはポップアップであり、$（document）.on（...）メソッドを使用してドキュメントにハングアップするため、クライアント側でDOMを変更するときに宣言を再定義する必要はありません。

ブロックはイベントによって相互に通信でき、「on ...」で始まる関数はオブジェクトのハンドラーをハングさせるため、$（ '。B-block'）。Elem（ 'title'）。Trigger（ 'on ... '）;

構文オーバーライド

デフォルトでは、構文パラメーターは元のBEMに従います。プレフィックス（b-、l-、g-など）を使用する必要性を取り除く必要がある場合、またはブロックと要素の区切り文字を「__」からより便利なものに変更する場合は、次を使用します。

 bem.setConfig({ namePrefix: '', //  ,   elemPrefix: '-', //   modPrefix: '_', //   modDlmtr: '-' //     });

これで、HTMLのクラス名は少し異なって見えるはずです。

 .block .block-element .block-element_modifier-value

結論として

プラグインは、MITライセンスの条件の下で、 GitHubで入手できます。彼が誰かの生活を楽にし、利益をもたらしてくれたら嬉しいです。論理的な批判や質問にはいつも喜んでいます。

jQuery.BEM-BEMメソッドを使用してレイアウトを操作するための宣言型アプローチ

方法論