crel 다운로드 - crel 소스 코드 다운로드

crel

기타 소스코드

1.0.0

다운로드

무엇

작고 간단하며 빠른 DOM 생성 유틸리티

왜

HTML을 작성하는 것은 어리석은 일입니다. 느리고 지저분하며 JavaScript로 수행해서는 안 됩니다.

DOM 요소를 만드는 가장 좋은 방법은 document.createElement 사용하는 것이지만, 이를 사용하여 많은 요소를 만드는 것은 지루합니다.

Crel을 사용하면 이 과정이 더 쉬워집니다.

간결한 것에서 영감을 얻었지만 Crel은 불량한 DOM 내 이벤트 리스너를 망치지 않으며 더 작고 빠릅니다.

변경 내역

변경 로그 보기

설치 중

브라우저의 경우:

npm i crel

 let crel = require ( 'crel' ) ;

AMD의 경우:

 require . config ( { paths : { crel : 'https://cdnjs.cloudflare.com/ajax/libs/crel/4.0.1/crel.min' } } ) ;
require ( [ 'crel' ] , ( crel ) => {
    // Your code
} ) ;

ES6+ 사용:

 import crel from 'crel' ;

표준 스크립트 태그 스타일의 경우:

 < script src =" crel.min.js " > </ script >

용법

통사론:

 // Returns a DOM element
crel ( tagName / domElement , attributes , child1 , child2 , childN ) ;

여기서 childN 다음과 같습니다.

DOM 요소,
textNode 로 삽입될 문자열,
null , 무시됩니다. 또는
위 항목 중 하나를 포함하는 Array

예

 let element = crel ( 'div' ,
    crel ( 'h1' , 'Crello World!' ) ,
    crel ( 'p' , 'This is crel' ) ,
    crel ( 'input' , { type : 'number' } )
) ;

// Do something with 'element'

객체 키에 대한 문자열을 사용하여 이름에 대시나 예약어가 있는 속성을 추가할 수 있습니다.

 crel ( 'div' , { 'class' : 'thing' , 'data-attribute' : 'majigger' } ) ;

속성 객체에 표시된 특정 키에 대한 사용자 정의 기능을 정의할 수 있습니다.

 crel . attrMap [ 'on' ] = ( element , value ) => {
    for ( let eventName in value ) {
        element . addEventListener ( eventName , value [ eventName ] ) ;
    }
} ;
// Attaches an onClick event to the img element
crel ( 'img' , { on : {
    click : ( ) => {
        console . log ( 'Clicked' ) ;
    }
} } ) ;

이미 사용 가능한 요소를 Crel에 전달하여 속성을 수정하거나 하위 요소를 추가할 수 있습니다.

 crel ( document . body , crel ( 'h1' , 'Page title' ) ) ;

생성 중에 변수에 하위 요소를 할당할 수 있습니다.

 let button ;
let wrapper = crel ( 'div' ,
    button  = crel ( 'button' )
) ;

Crel을 사용하여 기존 DOM 요소를 재정렬할 수도 있습니다.

 crel ( someDiv , crel ( someOtherDiv , anotherOne ) ) ;

하지만 그러지 마세요.

프록시 지원

프록시를 지원하는 환경에서 Crel을 사용하는 경우 새 API를 사용할 수도 있습니다.

 let crel = require ( 'crel' ) . proxy ;

let element = crel . div (
    crel . h1 ( 'Crello World!' ) ,
    crel . p ( 'This is crel' ) ,
    crel . input ( { type : 'number' } )
) ;