맞춤형 라이브러리를 개발하는 방법

이번에는 커스텀 라이브러리를 개발하는 방법과 커스텀 라이브러리를 개발할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

물론 이 라이브러리는 아직 초기 단계이며 기능 구현이 비교적 간단합니다. 누구나 이를 기반으로 개선할 수 있습니다. 프로젝트 주소: Hoz.js, 누구나 시작하고, 포크하고, 문제를 제기할 수 있습니다.式 특징

템플릿 문법 선언
Redux, FLUX 등의 아이디어를 빌려 상태 관리 도입
Virtual DOM 도입, Diff 알고리즘, 성능 향상
Rreereeeeee

입니다. 간결한 템플릿 구문을 통해 DOM 시스템에 데이터를 선언적으로 렌더링하는 hoz 애플리케이션입니다.

그리고 모든 것이 반응합니다.

Redux, Flux 등의 아이디어를 배우고 상태 관리를 소개합니다

상태 관리 측면에서 Redux의 아이디어를 배우고 단방향 데이터 흐름 관리를 구현합니다.

주로 State, Action, ChangeStore, Dispatch 4가지 개념을 정의합니다.

state

데이터 저장

  <p id = "app">
      <p>
          <img src="{{moveImage}}" />
          <p>{{moveName}}</p>
      </p>
  </p>

changeStore

은 redux의 리듀서와 동일하며 모든 작업을 데이터에 저장합니다.

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: '后来的我们'
})

는 작업을 수신하고 해당 메서드를 실행하며 상태의 데이터를 수정합니다. redux와 다르게 redux는 새로운 상태를 되돌리고, 현재 상태를 직접 조작하는데, 그 이유는 나중에 설명할 Object.defineProperty 메소드를 통해 상태의 데이터를 추적했기 때문입니다.

action and dispatch

데이터를 수정하려면 action을 제출하여 ChangeStore의 상태를 수정해야 합니다

var state = {
  moveName: '',
  moveImage: ''
}

이것이 hoz

function changeStore (state, action) {
  switch (action.type) {
    case 'SET_NAME': {
      state.moveName = action.data
      break
    }
    case 'SET_IMAGE': {
      state.moveImage = action.data
      break
    }
  }
}

Benefits

의 상태 관리 전략입니다. 데이터의 복잡성과 증가하는 양에 따라 그에 따른 데이터 관리 없이는 변화하는 상태를 관리하기가 매우 어렵습니다. 언제, 어떤 이유로 상태가 변하는지 관찰하기는 어렵습니다.

즉, 애플리케이션의 모든 데이터가 동일한

수명주기
1. 를 따르므로 애플리케이션을 더욱 예측 가능하고 이해하기 쉽게 만듭니다.
   changeStore에서 상태에 발생할 수 있는 모든 변경 사항을 볼 수 있습니다

2. 상태를 수정하는 유일한 방법은 ChangeStore에 작업을 제출하는 것입니다. 따라서 데이터의 모든 변경 사항은 한 곳에서 전달됩니다. 디버깅을 용이하게 하기 위해 작업을 기다립니다.

3. 가상 DOM 및 diff 알고리즘 소개

우리 모두 알고 있듯이 DOM 요소의 크기가 크고

dom 작업

으로 인해 페이지 재배치가 쉽게 발생할 수 있다는 사실로 인해 직접 DOM을 운영하는 성능은 매우 낮습니다. .

그래서 hoz는 가상 DOM 알고리즘을 도입하고 기본 JavaScript 개체를 사용하여 dom 개체를 매핑했습니다. 기본 JavaScript 개체의 작업이 더 빠르고 간단하기 때문입니다.
지도를 작성하는 방법은 무엇입니까? 예를 들어

hoz.store.dispatch({
  type: 'SET_NAME',
  data: '后来的我们'
})

는 dom 요소를 나타내는 JavaScript 개체일 뿐입니다.

hoz

생성자

에 전달된 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

이를 토대로 모두가 함께 개선할 수 있었으면 좋겠습니다. 프로젝트 주소: Hoz.js, 누구나 시작하고, 포크하고, 문제를 제기할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

프런트엔드, HTT, 컴퓨터 및 네트워크

Webkit-font-smoothing 글꼴 앤티앨리어싱 렌더링 사용 사례 자세한 설명

위 내용은 맞춤형 라이브러리를 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!