bem components
v5.1.1
bem-components 웹 인터페이스를 만들기위한 기성기 시각적 구성 요소 (블록) 세트를 제공하는 오픈 소스 라이브러리입니다.
도서관은 디자인 테마를 제공합니다. 이 버전은 새로운 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 섹션에 주석을 추가하십시오 (이 예제 참조). 템플릿 수준에서 Internet Explorer 8 용 스타일을 활성화 할 수도 있습니다. 어셈블러
최적화기
코드 분석
다른
bem-components 사용을 시작하는 방법에는 여러 가지가 있습니다. 최상의 접근 방식은 프로젝트의 요구 사항과 도서관의 기술 및 도구와의 호환성뿐만 아니라 BEM 프로젝트 경험에 달려 있습니다.
프로젝트에 가장 적합한 방법을 선택하십시오.
| dist | 원천 | 편집 |
|---|---|---|
| 사전 조립 된 CSS 및 JavaScript 코드 및 라이브러리 템플릿. 페이지에 링크하여 통합됩니다. 프로젝트와의 어셈블리 또는 호환성이 필요하지 않습니다. | 라이브러리의 전체 소스 코드. 조립이 필요합니다. 프로젝트는 라이브러리의 기술 및 도구와 완전히 호환되어야합니다. | 라이브러리의 전체 소스 코드. 조립이 필요합니다. PostCS가 CSS로 컴파일된다는 소스 방법과 다릅니다. PostCS가 사용되지 않는 프로젝트에 적합합니다. |
라이브러리를 사용하는 방식은 프로젝트에 통합하는 방법을 결정합니다.
라이브러리를 통합하기 위해 ENB 또는 BEM-TOOLS를 사용하는 것이 좋습니다.
예를 들어, 라이브러리가 기본적으로 활성화되는 Project-Stub을 사용할 수 있습니다. 프로젝트를 만들고 Yo Generator를 사용하여 라이브러리를 연결할 수 있습니다 (필요한 프로젝트 구성을 만들 수 있음).
라이브러리를 프로젝트에 연결하는 가장 쉬운 방법은 사전 조립 된 라이브러리 파일을 다운로드하고 <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 Library에는 사전 조립 된 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 . node.js에서 {BEMHTML,BH}.apply() 실행하고 준비된 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 쇼케이스에서 시각적으로 표현할 수 있습니다. 블록에는 행동 모델을 결정하는 상태가 있습니다. 블록의 상태는 수정 자 및 특수 필드를 통해 표현됩니다. 수정자를 변경하면 블록 작업에 사용할 수있는 이벤트가 생성됩니다.
Modifier Change 이벤트로 작업 할 수 있다면 특별한 BEM 이벤트를 만들 필요가 없습니다. 구성 요소의 상태를 변경하는 데 사용되는 내용 (수정 자 또는 필드)에 따라 다른 이벤트가 사용됩니다.
value 필드의 "상태"변경에 응답하기 위해 change 이벤트가 사용됩니다.bem-components 제어 bem-components 의 컨트롤은 다른 라이브러리 구성 요소를 생성하기위한 기초로 사용될 수 있습니다. 이러한 컨트롤에는 HTML과 같은 모델이 없으며 특정 HTML 모델의 의미를 필요로하지 않는 작업에 사용할 수 있습니다.
예를 들어, 데이터 편집을 위해 특별히 설계된 HTMLINPUTELENTE의 "행동 모델"을 생각해보십시오. 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에서 단위 테스트를 시작합니다.
Point 기반 어셈블리를 시작하려면 enb make specs desktop.specs/<block-name> 사용하십시오 (예 : enb make specs desktop.specs/input )를 사용하십시오.
각 풀 요청에 대해 Travis에서 테스트가 자동으로 실행됩니다.
헤르미온느는 레이아웃 테스트에 사용됩니다.
각 블록에 대한 테스트는 hermione/ Directory의 별도의 block-name.hermione.js 파일에 저장됩니다. 로컬에서 테스트는 수동으로 실행됩니다. 트래비스에서는 테스트가 자동으로 실행됩니다. 셀레늄 그리드의 경우 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. Mozilla Public License 2.0에 따라 발표 된 코드.
