jQuery.BEM - BEM पद्धति का उपयोग करके लेआउट के साथ काम करने के लिए घोषणात्मक दृष्टिकोण

बीईएम के बारे में पहले ही बहुत कुछ कहा जा चुका है कि यह क्यों अच्छा है, क्या बुरा है, और हम आज नहीं दोहराएंगे। नीचे एक कहानी है कि छोटे प्रोजेक्ट्स में jQuery से BEM DOM के साथ कैसे काम करें, जहां विवेक और समय bem-tools, bem-bl और bemhtml को बन्धन की अनुमति नहीं देते हैं, लेकिन आप अभी भी एक सुविधाजनक लेआउट सिस्टम के साथ काम करना चाहते हैं, जो js में लंबे चयनकर्ताओं को पीछे छोड़ देता है। फ़ाइलें।

इच्छुक मैं उपयोग के विवरण और उदाहरण के लिए कैट के तहत आमंत्रित करता हूं।

कार्यप्रणाली

BEM (abbr। ब्लॉक एलीमेंट मॉडिफायर) HTML लेआउट के आयोजन का एक विशेष तरीका है, जो कम या ज्यादा बड़ी साइटों और वेब अनुप्रयोगों के विकास और समर्थन को सुविधाजनक बनाता है।

मैं आपको पूरी तरह से कार्यप्रणाली के पाठ्यक्रम से परिचित नहीं कराऊंगा; हाल ही में यह बहुत लोकप्रिय हो गया है और इसमें बहुत सारी सामग्रियां हैं जिनसे जानकारी प्राप्त की जा सकती है। लेकिन अगर ऐसा होता है कि आपने अभी भी बीईएम और इसके फायदों के बारे में नहीं सुना है, तो मैं एक सलाह देता हूं:

• BEM.info - कार्यप्रणाली का विवरण
• यांडेक्स एसआरआई के साथ व्लादिमीर वरंकिन द्वारा व्याख्यान

मैं एक व्याख्यान को देखने के लिए निर्विवाद रूप से दोहराता हूं, सबसे पहले: आपको कुछ भी पढ़ने की जरूरत नहीं है, एक वीडियो है, दूसरी बात: पहले विकल्प की तुलना में सब कुछ बहुत बेहतर बताया गया है और दिमाग को खुश करने के लिए सेट किया गया है।

एक और कार्यान्वयन क्यों?

यह कहने के लिए नहीं कि इस तरह के बहुत सारे गिज़्म हैं, एकमात्र करीबी एनालॉग, बेम-ब्लो लाइब्रेरी से आई-बीएम फ्रेमवर्क है, लेकिन इसे देशी वातावरण के बाहर काम करने के लिए प्राप्त करना काफी समस्याग्रस्त होगा।

Yandex bem-tools, bem-bl और कलेक्टरों और टेम्पलेट इंजन के साथ सभी उपद्रव निस्संदेह अच्छा है। लेकिन जब तक हम उन परियोजनाओं के लिए परिपक्व नहीं हो जाते हैं, जिनमें कुछ सौ टेम्पलेट होते हैं, तो इस तरह से यह सब संभव हो जाएगा। मान लीजिए हमारे पास हाथ में एक छोटा सा ऑनलाइन स्टोर है, किसी तरह के हल्के PHP ढांचे पर। यहां, यह सब गौरैया पर एक तोप से शूटिंग कर रहा है, हालांकि, हमेशा पास में एक प्रिय ग्राहक होगा, जो हमेशा कुछ बदलना चाहता है।

स्केलिंग की सुविधा में कार्यप्रणाली पहले ही साबित हो चुकी है, और jQuery.BEM मोटी, जटिल तकनीकों के उपयोग के बिना जावास्क्रिप्ट से BEM लेआउट के साथ काम करने का सबसे अच्छा अवसर है। सभी आवश्यक है कि jQuery, jQuery.BEM प्लगइन और पृष्ठ BEM विधि के अनुसार बनाया गया है।

मैं यह दावा नहीं करता कि jQuery.BEM इस कार्रवाई का सबसे अच्छा कार्यान्वयन है, यह डोम के चारों ओर कठिन यात्रा के कारण उसी 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.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' }, { // }); 

सभी ईवेंट पॉप-अप हैं और $ (डॉक्यूमेंट) .on (...) मेथड का उपयोग करके डॉक्यूमेंट पर लटकाए जाते हैं, इसलिए क्लाइंट की ओर से DOM को बदलते समय घोषणाओं को फिर से परिभाषित करने की आवश्यकता नहीं है।

ब्लॉक घटनाओं के द्वारा एक दूसरे के साथ संवाद कर सकते हैं, "पर ..." से शुरू होने वाला एक फ़ंक्शन ऑब्जेक्ट पर एक हैंडलर लटकाता है, इसलिए आप $ ('बी-ब्लॉक') कर सकते हैं। एलिम ('शीर्षक')। ट्रिगर ('पर) ... ');

सिंटेक्स ओवरराइड

डिफ़ॉल्ट रूप से, सिंटैक्स पैरामीटर मूल BEM का अनुसरण करते हैं। यदि आपको उपसर्गों (b-, l-, g-, आदि) का उपयोग करने की आवश्यकता से छुटकारा पाना है या किसी ब्लॉक के विभाजक और "__" से एक तत्व को कुछ और अधिक सुविधाजनक, उपयोग में बदलना है:

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

अब हमारे HTML में क्लास के नाम थोड़े अलग दिखने चाहिए।

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

निष्कर्ष में

GITHub पर MIT लाइसेंस की शर्तों के तहत प्लगइन उपलब्ध है । मुझे खुशी होगी यदि वह किसी के लिए जीवन को आसान बनाये और लाभान्वित हो। हमेशा तर्क और सवालों की वजह से खुशी होती है।