這次帶給大家如何開發一個自訂函式庫，開發一個自訂庫的注意事項有哪些，以下就是實戰案例，一起來看一下。
當然這個函式庫還處在剛開始階段，功能實現的比較簡單，在此發表出來，歡迎大家藉此為基礎一起去完善它。專案地址：Hoz.js，歡迎大家start，fork，以及提issues。
特點
聲明式語法
<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: '后来的我们'
})登入後複製
這就是一個hoz應用，透過簡潔的模板語法聲明式的將資料渲染進DOM系統。
且所有東西都是響應式的。
借鑒redux，flux等的思想，引入狀態管理
在狀態管理方面借鑒redux的思想，實現了單向資料流的管理。
主要定義了state，action，changeStore，dispatch4概念。
state
存放資料
var state = {
moveName: '',
moveImage: ''
}登入後複製
changeStore
#相當於redux中的reducer，存放著所有對資料的動作
function changeStore (state, action) {
switch (action.type) {
case 'SET_NAME': {
state.moveName = action.data
break
}
case 'SET_IMAGE': {
state.moveImage = action.data
break
}
}
}登入後複製
#接收action，執行對應的方法，修改state中的資料。有別於redux的是，redux放回的是全新的state，而它是直接操作目前的state，因為state中的資料已經透過Object.defineProperty方法進行了跟踪，這個後面再將。
action和dispatch
當想要對資料進行修改的時候，我們必須透過提交action的方式，在changeStore中去修改state
hoz.store.dispatch({
type: 'SET_NAME',
data: '后来的我们'
})登入後複製
這個就是hoz的狀態管理策略
view -> dispatch -> action -> changeStore -> state -> view
登入後複製
好處
隨著應用程式的日益複雜，資料量的增大，如果不對資料進行相應的管理，管理不斷變化的狀態，是非常困難的。狀態在什麼時候，由於什麼原因，發生了怎樣的變化都難以觀察。
這意味著應用程式中所有的資料都遵循相同的生命週期，這樣可以讓應用程式變得更加可預測且容易理解。
我們可以從changeStore 看到state能夠發生的所有變化
對state修改的唯一方法就是向changeStore提交action，所以資料的每一次變更都會從一個地方流過，方便我們的debug等操作。
引入virtual dom 和diff演算法
總所周知，由於dom元素的龐大，以及dom操作容易引起頁面重排的原因，直接操作dom性能是非常非常差的。
所以hoz引入了virtual dom演算法，並用原生的JavaScript物件去映射dom對象，因為原生JavaScript物件的操作更快更簡單。
如何映射呢？例如
class VNode {
constructor (sel, tagName, id, className, el, children, data, text, key) {
this.tagName = tagName // p
this.sel = sel // p#id.class
this.id = id // id
this.className = className // []
this.children = children // []
this.el = el // node
this.data = data // {}
this.key = key
this.text = text
}
}
export default VNode登入後複製
只是一個JavaScript對象，代表一個dom元素。
我根據hoz建構子中傳進來的id 所指向的元素作為根元素建立一個虛擬dom樹，當資料改變的時候，不直接操作dom，而是在虛擬dom樹上進行操作修改。接著透過diff演算法比較新舊虛擬dom樹，對真實dom進行最小單位的修改。
資料響應式原理
hoz式如何做到資料的響應式的呢？這裡主要透過借助Object.defineProperty方法實現了一個發布/訂閱模式，透過Object.defineProperty修改state中資料的getter和setter屬性，在首次渲染的時候，在getter中將對應的訂閱者加入到一個主題物件中去，當資料改變的時候在setter中呼叫對應資料的主題物件的notify方法發布訊息，通知每個訂閱者更新。
state -> data -> publisher 一对多的关系
|
Dep
|
view -> {{data}} -> subscribers登入後複製
希望大家藉此為基礎一起去完善它。專案地址：Hoz.js，歡迎大家start，fork，以及提issues。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
前端，HTT，電腦與網路
webkit-font-smoothing字體抗鋸齒渲染使用案例詳解
#
以上是如何開發一個自訂程式庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
