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

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

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

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

これはhoz アプリケーションは、簡潔なテンプレート構文を通じて宣言的にデータを DOM システムにレンダリングします。

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

redux、fluxなどの考え方に学び、状態管理を導入

reduxの考え方を状態管理の観点から学び、一方向のデータフローの管理を実現します。

主に、state、action、changeStore、dispatch の 4 つの概念を定義します。

state

はデータを保存します

  <p>
      </p><p>
          <img  src="/static/imghwm/default1.png" data-src="{{moveImage}}" class="lazy" alt="カスタムライブラリの開発方法" >
          </p><p>{{moveName}}</p>
      
  

changeStore

はreduxのreducerに相当し、データに対するすべての操作を保存します

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

はアクションを受け取り、対応するメソッドを実行し、stateのデータを変更します。 redux とは異なり、redux は新しい状態を戻し、現在の状態を直接操作します。これは、後で説明するように、状態内のデータが Object.defineProperty メソッドを通じて追跡されているためです。

アクションとディスパッチ

データを変更したいときは、アクションを送信して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
    }
  }
}

利点

アプリケーションの増加によりデータの複雑化と量の増加に伴い、対応するデータ管理がなければ変化するステータスを管理することは非常に困難です。状態がいつ、どのような理由で変化するかを観察することは困難です。

これは、アプリケーション内のすべてのデータが同じ

ライフサイクル
1. に従い、アプリケーションがより予測可能で理解しやすくなることを意味します。
   changeStore から状態に発生する可能性のあるすべての変更を確認できます

2. 状態を変更する唯一の方法は、changeStore にアクションを送信することです。そのため、データ内のすべての変更は 1 か所からフローされます。デバッグを容易にするため、操作を待ちます。

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 を最小単位で変更します。

データ応答性の原則

hoz はどのようにしてデータ応答性を実現しているのでしょうか?パブリッシュ/サブスクライブ モードは、主に Object.defineProperty メソッドを使用して実装されます。状態内のデータのゲッター プロパティとセッター プロパティは、初めてレンダリングするときに、対応するサブスクライバーがトピックに追加されます。データが変更されたときに、setter のデータに対応するトピック オブジェクトの Notice メソッドを呼び出して、各サブスクライバーに更新を通知するメッセージをパブリッシュします。

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

これをもとに皆さんも一緒に改善していけたら嬉しいです。プロジェクトのアドレス: Hoz.js、誰でも開始、フォーク、問題提起を歓迎します。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

フロントエンド、HTT、コンピューター、ネットワーク

Webkit-font-smoothing font anti-aliasing rendering use caseの詳しい説明

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