Omi框架Store體系的前世今生

當耐特發表於2019-03-02
框架

原文連結-github.com/AlloyTeam/o…

寫在前面

先說說Store系統是幹什麼的！為什麼要造這樣一個東西？能夠給系統架構帶來什麼？

當我們元件之間，擁有共享的資料的時候，經常需要進行元件通訊。在Omi框架裡，父元件傳遞資料給子元件非常方便：

  • 通過在元件上宣告 data- 或者 :data- 傳遞給子節點
  • 通過在元件上宣告 data 或者 :data 傳遞給子節點 （支援複雜資料型別的對映）
  • 宣告 group-data 把陣列裡的data傳給一堆元件傳遞（支援複雜資料型別的對映）

注：上面帶有冒號的是傳遞javascript表示式

通過宣告onXxx=”xxxx”可以讓子元件內執行父元件的方法。具體的如下圖所示：

Omi框架Store體系的前世今生

如果還不明白的話，那… 我就直接上程式碼了：

class Main extends Omi.Component {

    handlePageChange(index){
        this.content.goto(index+1)
        this.update()
    }

    render () {
        return `<div>
                    <h1>Pagination Example</h1>
                    <Content name="content" />
                    <Pagination
                        name="pagination"
                        :data-total="100"
                        :data-page-size="10"
                        :data-num-edge="1"
                        :data-num-display="4"　　　　　
                        onPageChange="handlePageChange" />
                </div>`;
    }
}複製程式碼

上面的例子中，

  • 父元件的render方法裡，通過 data-✽ 傳遞資料給子元件 Pagination
  • 通過onPageChange=”handlePageChange”實現子元件與父元件通訊

詳細程式碼可以點選： 分頁例子地址

當然你也可以使用event emitter / pubsub庫在元件之間通訊，比如這個只有 200b 的超小庫mitt 。但是需要注意mitt相容到IE9+，Omi相容IE8。但是，使用event emitter / pubsub庫會對元件程式碼進行入侵，所以非常不建議在基礎非業務元件使用這類程式碼庫。

雖然元件通訊非常方便，但是在真實的業務場景中，不僅僅是父子、爺孫、爺爺和堂兄、嫂子和堂弟…
onXxx=”xxxx”就顯得無能為力，力不從心了，各種資料傳遞、元件例項互操作、 emitter/pubsub或者迴圈依賴，讓程式碼非常難看且難以維護。所以：

Omi.Store是用來管理共享資料以及共享資料的邏輯 。複製程式碼

Omi Store使用足夠簡便，對架構入侵性極極極小(3個極代表比極小還要小)。下面一步一步從todo的例子看下Store體系怎麼使用。

定義 Omi.Store

Omi.Store是基類，我們可以繼承Omi.Store來定義自己的Store，比如下面的TodoStore。

import Omi from `omi`

class TodoStore extends Omi.Store {
    constructor(data , isReady) {
        super(isReady)

        this.data = Object.assign({
            items:[],
            length:0
        },data)

        this.data.length = this.data.items.length
    }

    add(value){
        this.data.items.push(value)
        this.data.length = this.data.items.length
        this.update()
    }

    clear(){
        this.data.items.length = 0
        this.data.length = 0
        this.update()
    }
}

export default TodoStore複製程式碼

TodoStore定義了資料的基本格式和資料模型的邏輯。
比如 this.data 就是資料的基本格式：

{
    items:[],
    length:0
}複製程式碼

add和clear就是共享資料相關的邏輯。

值得注意的是，在add和clear方法裡都有呼叫this.update();這個是用來更新元件的，this.update並不會更新所有元件。但是他到底會更新哪些元件呢？等講到store的addView方法你就明白了。

建立 Omi.Store

通過 new 關鍵字來使用TodoStore物件的例項。

let store = new TodoStore({ /* 初始化資料 */ ，/* 資料是否準備好 */  })複製程式碼

上面可以傳入一些初始化配置資訊，store裡面便包含了整個應用程式共享的狀態資料以及貢獻資料邏輯方法(add,clear)。

當然，這些初始化配置資訊可能是非同步拉取的。所以，有兩種方法解決非同步拉取store配置的問題：

  • 拉取資料，然後new TodoStore()，再Omi.render
  • 先let store = new TodoStore(),再Omi.render,元件內部監聽store.ready，拉取資料更改store的data資訊，然後執行store.beReady()

根元件注入 store

為了讓元件樹能夠使用到 store，可以通過Omi.render的第三個引數給根元件注入 store:

Omi.render(new Todo(),`body`,{
    store: store
});複製程式碼

當然ES2015已經允許你這樣寫了:

Omi.render(new Todo(),`body`,{
    store
});複製程式碼

兩份程式碼同樣的效果。

通過Omi.render注入之後，在元件樹的所有元件都可以通過 this.$store 訪問到 store。

利用 beforeRender

為什麼要說beforeRender這個函式？ 因為通過beforeRender轉換store的data到元件的data，這樣store的資料和元件的資料就解耦開了。

beforeRender是生命週期的一部分。且看下面這張圖:

Omi框架Store體系的前世今生
beforeRender

不管是例項化或者存在期間，在render之前，會去執行beforeRender方法。所以可以利用該方法寫store的data到元件data的轉換邏輯。比如：

import Omi from `../../src/index.js`;
import List from `./list.js`;

Omi.makeHTML(`List`, List);

class Todo extends Omi.Component {
    constructor(data) {
        super(data)
    }

    install(){
        this.$store.addView(this)
    }

    beforeRender(){
        this.data.length = this.$store.data.items.length
    }

    add (evt) {
        evt.preventDefault()
        let value = this.data.text
        this.data.text = ``
        this.$store.add(value)
    }

    style () {
        return `
        h3 { color:red; }
        button{ color:green;}
        `;
    }

    clear(){
        this.data.text = ``
        this.$store.clear()
    }

    handleChange(evt){
        this.data.text = evt.target.value
    }

    render () {
        return `<div>
                    <h3>TODO</h3>
                    <button onclick="clear">Clear</button>
                    <List name="list" data="$store.data" />
                    <form onsubmit="add" >
                        <input type="text" onchange="handleChange"  value="{{text}}"  />
                        <button>Add #{{length}}</button>
                    </form>

                </div>`;
    }
}

export default Todo;複製程式碼

為什麼要去寫beforeRender方法？因為render只會使用this.data去渲染頁面而不會去使用this.$store.data，所以需要把資料轉移到元件的this.data下。這樣元件既能使用自身的data，也能使用全域性放this.$store.data了，不會耦合在一起。

注意看上面的：

    install(){
        this.$store.addView(this)
    }複製程式碼

通過 addView 可以讓 store 和 view（也就是元件的例項） 關聯起來，以後store執行update方法的時候，關聯的view都會自動更新！

再看上面的子元件宣告:

<List name="list" data="$store.data" />複製程式碼

這樣相當於把this.$store.data傳遞給了List元件。所以在List內部，就不再需要寫beforeRender方法轉換了。

class List extends Omi.Component {
    constructor(data) {
        super(data)
    }

    render () {
        return ` <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`
    }
}複製程式碼
這裡需要特別強調，不需要把所有的資料提取到store裡，只提取共享資料就好了，元件自身的資料還是放在元件自己進行管理。複製程式碼

非同步資料

通常，在真實的業務需求中，資料並不是馬上能夠拿到。所以這裡模擬的非同步拉取的todo資料：

let todoStore = new TodoStore()
setTimeout(()=>{
    todoStore.data.items = ["omi","store"];
    todoStore.data.length = todoStore.data.items.length
    todoStore.beReady();
},2000)複製程式碼

上面的beReady就是程式碼已經準備就緒，在元件內部可以監聽ready方法：

class Todo extends Omi.Component {
    constructor(data) {
        super(data)
    }

    install(){
        this.$store.addView(this)
    }

    installed(){
        this.$store.ready(()=>this.$store.update())
    }

    add (evt) {
        evt.preventDefault()
        if(!this.$store.isReady){
            return
        }
        let value = this.data.text
        this.data.text = ``
        this.$store.add(value)
    }複製程式碼

可以看到上面的add方法可以通過this.$store.isReady獲取元件store是否準備就緒。

補充（20170323）

在omi v1.1.0及以後的版本中，已經支援Omi.createStore快捷建立store。如:

export default Omi.createStore({
    data: {
        items: ["omi", "store"]
    },
    methods: {
        add: function (value) {
            this.data.items.push(value)
            this.data.length = this.data.items.length
            this.update()
        },

        clear: function () {
            this.data.items.length = 0
            this.data.length = 0
            this.update()
        }
    }
})複製程式碼

補充（20170324）

在omi v1.1.1及以後的版本中，也支援省略Omi.createStore的形式建立store。如:

export default {
    data: {
        items: ["omi", "store"]
    },
    methods: {
        add: function (value) {
            this.data.items.push(value)
            this.data.length = this.data.items.length
            this.update()
        },

        clear: function () {
            this.data.items.length = 0
            this.data.length = 0
            this.update()
        }
    }
}複製程式碼

原始碼地址

相關

  • Omi官網omijs.org
  • Omi的Github地址github.com/AlloyTeam/o…
  • 如果想體驗一下Omi框架，可以訪問 Omi Playground
  • 如果想使用Omi框架或者開發完善Omi框架，可以訪問 Omi使用文件
  • 如果你想獲得更佳的閱讀體驗，可以訪問 Docs Website
  • 如果你懶得搭建專案腳手架，可以試試 omi-cli
  • 如果你有Omi相關的問題可以 New issue
  • 如果想更加方便的交流關於Omi的一切可以加入QQ的Omi交流群(256426170)

Omi框架Store體系的前世今生

相關文章