element creator

요소 생성자

대화형 HTML 요소(가상 돔)를 쉽게 생성하는 데 도움이 되는 라이브러리입니다. MithrilJs 프레임워크에서 영감을 받았습니다.

• 설치
• 예
• 선적 서류 비치

설치

element-creator는 NPM 및 Javascript 라이브러리로 사용할 수 있습니다.

NPM에 설치

 npm install element-creator

또는 unpkg의 html 파일에 포함

 < script  type =" text/javascript " src =" https://unpkg.com/[email protected]/build/element-creator.min.js " > </ script > 

예:

build/index.html 에 있는 한 페이지 콘텐츠 예제입니다. 또는 아래의 간단한 데모

 // using node with es6, otherwise var e = require('element-creator');
import e from 'element-creator' ;

var myDiv = e ( 'div#myElement.class__1[name=awesome-div]' , 'My awesome div' , {
    on : { 'click' : function ( e ) {
        alert ( 'You have clicked on My awesome div' ) ;
    } }
} )

위의 myDiv 변수는 경고 메시지를 전달하는 click 이벤트가 있는 div html 요소를 생성합니다.

 < div id =" myElement " class =" class__1 " name =" awesome-div " > My awesome div </ div > 

선적 서류 비치

element-creator에는 .find , .all 과 같은 대화형 기능을 표준 요소에 래핑/추가하는 Elementextended (또는 래퍼)와 HTML 요소를 생성한 다음 ElementExtended 요소를 래핑하고 반환하는 ElementCreator가 포함되어 있습니다.

요소 생성자

 // vdom return new element
var vdom = e ( elementString , children , options )

어디:

• elementString 은 다음 패턴으로 요소 매개변수 생성을 지정하는 문자열입니다.

{elementType}{(*)elementId}{(*)elementClasses}{(*)elementAttributes}

(*)는 선택사항입니다.

매개변수	기본	설명	예
요소 유형	div	요소 유형 또는 요소의 태그 유형	p 또는 h1 . 비어 있는 경우 기본 사용
요소 ID		요소의 ID	#firstParagraph
요소클래스		요소 클래스	.class__1 또는 여러 클래스 .class__1.class_2
요소속성		요소 속성	[name=title] 또는 여러 속성 [name=title,ref=titleRef]

• children은 요소 내부에 있는 텍스트 노드 또는 html 요소입니다.

• 옵션 os 기타 구성:

  • on: 이벤트 리스너 추가
  • attrs: 요소의 속성
  • 데이터: 요소의 데이터

요소확장

 // wrappedElement return a html element within the html body with more interactive functions
var wrappedElement = e . wrap ( querySelector , isMultiple )

어디:

• querySelector 는 표준 쿼리 선택기 문자열입니다. 예를 들어 h1 제목 h1 찾고, .class__1 클래스가 .class__1 인 모든 요소를 ​​찾습니다.
• isMultiple은 기본적으로 false 입니다. true 로 설정하면 querySelector와 일치하는 요소 배열이 반환됩니다.