Web components

https://github.com/bluemir/web-components 의 문서입니다.

이 라이브러리는 ES6의 모듈 방식으로 작성 되었습니다.

제가 필요한 툴을 만들면서 작성/개선해 나가기 때문에 부족한 부분이 많습니다.

How to use

<script type="module">
import $ from "/dist/lib/web-components/minilib.module.js";

</script> 

API

API는 크게 $. 의 유틸리티 , 각종 기본 Object 의 Prototype 확장, custom element 의 3가지로 구성되어 있습니다.

$.get([element], query)

query에 맞는 element 를 1개 가져옵니다. return 값은 HTMLElement 입니다.

element 를 명시 하지 않으면 document 를 사용합니다.

query 는 css selector 와 동일하며 내부적으로 Element.querySelector¹를 사용 합니다. 따라서 해당 문서를 참조 하시기 바랍니다.

$.all([element], query)

query에 맞는 element를 전부 가져옵니다. return 값은 NodeList 입니다.

NodeList의 prototype에 이미 map, filter, forEach와 같은 Array 의 편의 기능을 넣어 두었기 때문에 배열 처럼 취급 하여도 무방 합니다.

내부적으로는 Element.querySelectorAll²를 사용 합니다.

$.create(name, opt)

HTML Tag 를 생성 합니다. return 값은 Element 입니다.

opt은 Object 이며 Prefix가 $가 아니라면 모두 Attribute 로 취급 됩니다.

특수한 용도로 사용 되는 key 값은 다음과 같습니다.

• $html: innerHTML 을 설정합니다.
• $child: 해당 Node의 자식 Node를 설정합니다.
• $text: 해당 노드의 Text 값을 설정 합니다.

$.request(method, url, options)

XHR 요청을 합니다.

$.render(template, data)

Templete element에 data를 채워 넣어 새로운 Element 를 만듭니다.

$.template

$.query(data, key)

$.form(formElement)

$.animateFrame(func, {fps = 30})

$.event

$.CustomElement

Object.keyValues

Node.prototype.removeThis

Node.prototype.replaceWith