이번에는 커스텀 라이브러리를 개발하는 방법과 커스텀 라이브러리를 개발할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.
물론 이 라이브러리는 아직 초기 단계이며 기능 구현이 비교적 간단합니다. 누구나 이를 기반으로 개선할 수 있습니다. 프로젝트 주소: Hoz.js, 누구나 시작하고, 포크하고, 문제를 제기할 수 있습니다.式 특징
Redux, Flux 등의 아이디어를 배우고 상태 관리를 소개합니다
state
<p id = "app"> <p> <img src="{{moveImage}}" /> <p>{{moveName}}</p> </p> </p>
var hoz = new Hoz('app', state, changeStore) var state = { moveName: '', moveImage: '' } function changeStore (state, action) { switch (action.type) { case 'SET_NAME': { state.moveName = action.data break } case 'SET_IMAGE': { state.moveImage = action.data break } } } hoz.store.dispatch({ type: 'SET_NAME', data: '后来的我们' })
var state = { moveName: '', moveImage: '' }
function changeStore (state, action) { switch (action.type) { case 'SET_NAME': { state.moveName = action.data break } case 'SET_IMAGE': { state.moveImage = action.data break } } }
그래서 hoz는 가상 DOM 알고리즘을 도입하고 기본 JavaScript 개체를 사용하여 dom 개체를 매핑했습니다. 기본 JavaScript 개체의 작업이 더 빠르고 간단하기 때문입니다.
지도를 작성하는 방법은 무엇입니까? 예를 들어 hoz.store.dispatch({
type: 'SET_NAME',
data: '后来的我们'
})
생성자
에 전달된 id가 가리키는 요소를 루트 요소로 기반으로 가상 dom 트리를 구축합니다. 데이터가 변경되면 dom이 직접 조작되지 않고 가상 dom 트리가 수정됩니다. 그런 다음 diff 알고리즘을 사용하여 기존 가상 DOM 트리와 새 가상 DOM 트리를 비교하고 실제 DOM을 가장 작은 단위로 수정합니다. hoz는 어떻게 데이터 응답성을 달성하나요? 여기서는 주로 Object.defineProperty 메서드를 사용하여 게시/구독 모드를 구현합니다. Object.defineProperty를 통해 해당 상태의 데이터에 대한 getter 및 setter 속성을 수정합니다. Go, 데이터가 변경되면 setter의 데이터에 해당하는 topic 객체의 inform 메서드를 호출하여 각 구독자에게 업데이트를 알리는 메시지를 게시합니다.view -> dispatch -> action -> changeStore -> state -> view
Webkit-font-smoothing 글꼴 앤티앨리어싱 렌더링 사용 사례 자세한 설명
위 내용은 맞춤형 라이브러리를 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!