8개의 경량급 VanillaJS 웹 구성 요소를 사용하여 이벤트 구동 TodoMVC 응용 프로그램 구축
데모
먼저 TodoMVC 애플리케이션을 사용해 무엇을 할 수 있는지 알아보십시오.https://mits-gossau.github.io/event-driven-web-components-todomvc-app/src/
브라우저 호환성에 대한 고려 사항: 이 예에서는 IOS가 지원되지 않는 경우attribute "is"를 사용합니다.웹 구성 요소 포장 요소를 사용하면 이 문제를 간단하게 피할 수 있습니다.우리 사이트Real World Example에서 볼 수 있습니다.
HTML 개요
todomvc 응용 프로그램 템플릿부터 HTML:https://github.com/tastejs/todomvc-app-template/blob/master/index.html와 #attr-is 표시가 있는 확장 HTML:https://github.com/mits-gossau/event-driven-web-components-todomvc-app/blob/master/src/index.html를 살펴보고 어떤 요소가 논리를 가지고 있는지 알아보자.
웹 구성 요소 로드
웹 구성 요소를 불러오는 것은 상당히 간단합니다.
import('./es/components/TodoList.js').then(module => ['todo-list', module.default, { extends: 'ul' }])
export default class TodoList extends HTMLUListElement {
이벤트 구동
이벤트 구동 시스템 구조는 이러한 웹 구성 요소가 이벤트를 통해만 통신하는 것을 의미한다.TodoList.js를 불러오고 값을 구조 함수에 전달할 때 TodoItem.js에서 두 가지 이상만 발견됩니다.
this.appendChild(new TodoItem(event.detail.value))
<input class="edit" value="${this.value}" is="new-todo" new-todo="edit" allow-empty allow-escape>
각 웹 구성 요소에 대한 개요
1. "input. new todo"는 New Todo를 받습니다.js가 그것에 적용됩니다.
connectedCallback () {
this.addEventListener('blur', this.valueListener)
this.addEventListener('keyup', this.valueListener)
}
2. "section.main"은 제한되지 않습니다.js가 그것에 적용됩니다.
connectedCallback () {
self.addEventListener('all-items', this.allItemsListener)
}
3. "input.toggle all" Toggall에 들어갑니다.js가 그것에 적용됩니다.
connectedCallback () {
this.addEventListener('click', this.clickListener)
self.addEventListener('all-items', this.allItemsListener)
}
4. "ul 대기사항 목록"은 대기사항 목록이 됩니다.js가 그것에 적용됩니다.
connectedCallback () {
this.addEventListener('edit', this.updateListener)
this.addEventListener('toggle', this.updateListener)
this.addEventListener('destroy', this.updateListener)
self.addEventListener('new-todo', this.newTodoListener)
self.addEventListener('toggle-all', this.toggleAllListener)
self.addEventListener('clear-completed', this.clearCompletedListener)
this.loadAllItems().then(() => this.dispatchAllItems())
}
오늘 오후가 좋아요.js 5. "경계 대기 사항 계수"는 대기 사항을 획득한다.js가 그것에 적용됩니다.
connectedCallback () {
self.addEventListener('all-items', this.allItemsListener)
}
6. "ul 필터"가 삭제됩니다.js가 그것에 적용됩니다.
connectedCallback () {
self.addEventListener('hashchange', this.hashchangeListener)
this.hashchangeListener()
}
7. "button.clear completed(버튼 지우기 완료)"에서 ToDoFilter(필터)를 가져옵니다.js가 그것에 적용됩니다.
connectedCallback () {
this.addEventListener('click', this.clickListener)
self.addEventListener('all-items', this.allItemsListener)
}
8. 정리 작업이 완료되었습니다.js 통과 loadAllItems가 localStorage에서 로드되거나 new todo 이벤트에서 로드될 때
connectedCallback () {
if (this.shouldComponentRender()) this.render()
this.hashchangeListener()
this.addEventListener('input', this.inputListener)
this.addEventListener('click', this.clickListener)
this.addEventListener('dblclick', this.dblclickListener)
this.addEventListener('edit', this.editListener)
self.addEventListener('toggle-all', this.toggleAllListener)
self.addEventListener('hashchange', this.hashchangeListener)
}
아이. ShadowDOM 및 캡슐화된 CSS
너는 반드시 이 용어NewTodo.js를 만났을 것이다. 이것은 CSS를 봉인하는 가장 좋은 기능이다.TodoMVC 응용 프로그램 템플릿은 전역 CSS를 제공합니다.이러한 정신에 따라 CSS를 분해하여 웹 구성 요소에 봉인하는 것은 무의미하다.예를 들어 다음과 같은 기능을 사용했습니다.
https://github.com/mits-gossau/web-components 결론
나는 본고가 https://github.com/mits-gossau/web-components-cms-template와 그것을 어떻게 구축하는지 개술하기를 바란다.나는 이벤트 구동의 체계 구조가 모든 전단 창고/응용 프로그램의 미래라고 믿는다. 그리고 이것은 일반적으로 일부 프레임워크 논리적인 프레임워크에서 응용되고 있다. 만약 당신이 DOM에 몰입하는 방법을 배운다면 이것은 쓸데없는 것일 수도 있다.
관련 비디오 자습서
https://github.com/mits-gossau/event-driven-web-components-todomvc-app
Reference
이 문제에 관하여(8개의 경량급 VanillaJS 웹 구성 요소를 사용하여 이벤트 구동 TodoMVC 응용 프로그램 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/weedshaker/build-an-event-driven-todomvc-app-with-8-lightweight-vanillajs-web-components-5b65텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
