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 ที่ระดับเทมเพลต ผู้ประกอบการ
Optimizers
การวิเคราะห์รหัส
อื่น
มีหลายวิธีในการเริ่มต้นใช้ bem-components วิธีที่ดีที่สุดขึ้นอยู่กับความต้องการของโครงการของคุณและความเข้ากันได้กับเทคโนโลยีและเครื่องมือของห้องสมุดรวมถึงประสบการณ์ของคุณกับโครงการ BEM
เลือกวิธีที่เหมาะสมที่สุดสำหรับโครงการของคุณ:
| ระยะทาง | แหล่งที่มา | ซึ่งรวบรวม |
|---|---|---|
| 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 รวมรหัส 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 > มีสองขั้นตอนในการทำงานกับห้องสมุด:
ขั้นตอนแรกเหมือนกันเสมอ ขั้นตอนที่สองสามารถทำได้ในสามวิธีซึ่งคุณสามารถรวมกันได้ตามที่คุณต้องการ:
วิธี 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() ใน 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 พิเศษหากคุณสามารถทำงานกับกิจกรรมการเปลี่ยนแปลง Modifier ขึ้นอยู่กับสิ่งที่ใช้สำหรับการเปลี่ยนสถานะของส่วนประกอบ (ตัวดัดแปลงหรือฟิลด์) มีการใช้เหตุการณ์ที่แตกต่างกัน:
value จะใช้เหตุการณ์ changebem-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 )
การทดสอบจะทำงานโดยอัตโนมัติบนเทรวิสสำหรับคำขอดึงแต่ละครั้ง
เฮอร์ไมโอนี่ใช้สำหรับการทดสอบเลย์เอาต์
การทดสอบสำหรับแต่ละบล็อกจะถูกเก็บไว้ในไฟล์ block-name.hermione.js แยกต่างหากใน hermione/ ไดเรกทอรี การทดสอบจะดำเนินการด้วยตนเอง บนเทรวิสการทดสอบจะดำเนินการโดยอัตโนมัติ สำหรับ Selenium Grid ใช้บริการ Saucelabs
สำหรับการดำเนินการทดสอบในพื้นที่คุณต้อง:
SAUCE_USERNAME และ SAUCE_ACCESS_KEY )sc (Sauceconnect) และรอให้เปิดอุโมงค์hermionehermione 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 คุณจะเห็นข้อผิดพลาดในบันทึกที่ระบุว่ามันแตกต่างจากตัวอย่างบล็อกอย่างไร
การทดสอบทั้งหมดจะทำงานโดยอัตโนมัติโดยใช้เทรวิสในแต่ละคำขอดึง
งานปัจจุบันมีการระบุไว้ในบอร์ด Agile พิเศษ
สถานะงาน:
รหัสและเอกสาร© 2012 Yandex LLC รหัสที่เผยแพร่ภายใต้ใบอนุญาตสาธารณะ Mozilla 2.0
