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

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

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

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

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

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

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

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
    }
  }
}

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

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

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

dom 작업

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

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

생성자

데이터 응답성의 원리

 view -> dispatch -> action -> changeStore -> state -> view

로그인 후 복사

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

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

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