カスタムライブラリの開発方法

今回はカスタムライブラリの開発方法と、カスタムライブラリを開発する際の注意点を紹介します。実際のケースを見てみましょう。

もちろん、このライブラリはまだ初期段階にあり、関数の実装は比較的単純です。これを改善するための基礎として使用してください。プロジェクトのアドレス: Hoz.js、誰でも開始、フォーク、問題提起を歓迎します。式の特徴

テンプレート文法の宣言
Redux、FLUX などの思想を推進、ステータス管理の導入
Virtual DOM、Diff アルゴリズムの導入、パフォーマンスの向上
RroRreereeee

そしてすべてがレスポンシブです。

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 にアクションを送信することです。そのため、データ内のすべての変更は 1 か所からフローされます。デバッグを容易にするため、操作を待ちます。

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 font anti-aliasing rendering use caseの詳しい説明

以上がカスタムライブラリの開発方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。