bem components
v5.1.1
bem-components هي مكتبة مفتوحة المصدر توفر مجموعة من المكونات المرئية الجاهزة (الكتل) لإنشاء واجهات الويب.
توفر المكتبة موضوعات التصميم. يقدم هذا الإصدار موضوع 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.
اختر الطريقة الأنسب لمشروعك:
| dist | مصدر | تم تجميعها |
|---|---|---|
| تم تجميعها مسبقًا CSS وقوالب JavaScript وقوالب المكتبة. متكامل من خلال الارتباط بالصفحة. لا يتطلب التجميع أو التوافق مع مشروعك. | رمز المصدر الكامل للمكتبة. يتطلب التجميع. يجب أن يكون مشروعك متوافقًا تمامًا مع تقنيات وأدوات المكتبة. | رمز المصدر الكامل للمكتبة. يتطلب التجميع. يختلف عن طريقة المصدر في أن postcss يتم تجميعها في CSS. مناسبة للمشاريع حيث لا يتم استخدام postCSS. |
تحدد الطريقة التي تستخدم بها المكتبة كيفية دمجها في مشروعك:
نوصي باستخدام eNB أو BEM Tools لدمج المكتبة.
على سبيل المثال ، يمكنك استخدام Project-Stub ، حيث يتم تمكين المكتبة افتراضيًا. يمكنك أيضًا إنشاء مشروع واستخدام مولد YO لتوصيل المكتبة (يتيح لك ذلك إنشاء تكوين المشروع اللازم).
أسهل طريقة لتوصيل المكتبة بالمشروع هي تنزيل ملفات المكتبة المسبقة قبل التجميع واستخدام عناصر <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 المتصفح ؛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 > هناك خطوتان للعمل مع المكتبة:
الخطوة الأولى هي نفسها دائمًا. يمكن تنفيذ الخطوة الثانية بثلاث طرق مختلفة ، يمكنك الجمع بينكما كما تتمنى:
الطريقة 1. انسخ HTML من المثال. للقيام بذلك ، انتقل إلى علامة تبويب HTML في رأس المثال.
هذا هو أسهل النهج ، ولكن إذا تم تحديث القوالب في الإصدارات المستقبلية من المكتبة ، فسيتعين عليك إجراء التغييرات يدويًا في كل كتلة محدثة.
الطريقة 2. استخدم templating في المتصفح. يتضمن تجميع مكتبة 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() في node.js وإعطاء المتصفح 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 لها نوعان من التركيز ، والتي يتم تعيينها باستخدام المعدلات 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 lint يقوم أمر npm run test-specs بإطلاق اختبارات الوحدة على JS.
لإطلاق التجميع القائم على النقطة ، استخدم الأمر enb make specs desktop.specs/<block-name> (على سبيل المثال ، enb make specs desktop.specs/input ).
سيتم تشغيل الاختبارات تلقائيًا على Travis لكل طلب سحب.
يستخدم هيرميون لاختبار التخطيط.
يتم تخزين اختبارات كل كتلة في ملف منفصل block-name.hermione.js في hermione/ الدليل. محليا ، يتم تنفيذ الاختبار يدويًا. على Travis ، يتم تنفيذ الاختبارات تلقائيًا. لشبكة السيلينيوم ، يتم استخدام خدمة Saucelabs.
لتنفيذ الاختبارات محليا ، تحتاج إلى:
SAUCE_USERNAME و SAUCE_ACCESS_KEY ).sc (SauceConnect) وانتظر فتح النفق.hermione .hermione gui .عند تطوير اختبارات جديدة لتسريع التنفيذ المحلي:
.hermione.conf.js ، قم بتغيير خيار gridUrl إلى http://localhost:4444/ . لمزيد من المعلومات حول استخدام Hermione مع العديد من الخلفية ، اقرأ مقالة Hermione Quick Start.
ملاحظة: تحتاج إلى حفظ لقطات شاشة من Saucelabs في المستودع. هذا يساعد على تجنب التناقضات عند تقديم الخطوط.
قبل الارتباط بالصور المرجعية الجديدة أو المعدلة ، يجب عليك:
تتيح لك إنشاء أدوات للمكتبة بناء وتشغيل اختبارات على قوالب 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. رمز صدر تحت رخصة موزيلا العامة 2.0.
