首頁 >web前端 >js教程 >如何開發一個自訂程式庫

如何開發一個自訂程式庫

php中世界最好的语言原創: 2018-05-25 13:38:302121瀏覽

這次帶給大家如何開發一個自訂函式庫，開發一個自訂庫的注意事項有哪些，以下就是實戰案例，一起來看一下。

當然這個函式庫還處在剛開始階段，功能實現的比較簡單，在此發表出來，歡迎大家藉此為基礎一起去完善它。專案地址：Hoz.js，歡迎大家start，fork，以及提issues。

特點

聲明式的模板語法
#借鑒redux，flux等的思想，引入狀態管理
引入virtual dom，diff 演算法，提高性能

聲明式語法

  <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中文網其它相關文章！