Flux架構(gòu)小白入門筆記

lily_wang 發(fā)布于2019-08-22 10:45 / 2201人閱讀

摘要：架構(gòu)小白入門筆記是提出的一種處理前端數(shù)據(jù)的架構(gòu)，學(xué)習(xí)就是學(xué)習(xí)它的思想。這個筆記是我在學(xué)習(xí)了阮一峰老師的架構(gòu)入門教程之后得出，里面的例子和部分原文來自于其不同在于我用將其改寫了，并加入了注釋。

Flux架構(gòu)小白入門筆記

Flux是facebook提出的一種處理前端數(shù)據(jù)的架構(gòu)，學(xué)習(xí)Flux就是學(xué)習(xí)它的思想。

這個筆記是我在學(xué)習(xí)了阮一峰老師的Flux 架構(gòu)入門教程之后得出，
里面的例子和部分原文來自于其,不同在于我用es6將其改寫了，并加入了注釋。

做了兩三個前端外包項目，都是后端提供數(shù)據(jù)接口，邏輯主要由前端完成，深感前端邏輯之復(fù)雜，
特別是最近的一個項目，到后期業(yè)務(wù)邏輯代碼混在一起根本無法維護。于是痛定思痛，想下定決心研究下前端架構(gòu)方案，
而Flux則是現(xiàn)在最火，最受好評的前端架構(gòu)方案。

本例代碼倉庫:flux_learn,喜歡的話給個star哦！

我們按Flux數(shù)據(jù)流的順序來分析，

View發(fā)起Action->Action傳遞到Dispatcher->Dispatcher將通知Store->Store的狀態(tài)改變通知View進行改變

View由React組件構(gòu)成，首先是MyButton.js

import React, {Component} from "react"

class MyButton extends Component {

    render() {
        let items = this.props.items;
        return (
            
                
                    {items.map((result, key) => {
                        return (
                            {result}
                        )
                    })}
                
                
            
        )
    }
}

export default MyButton

額，這個組件貌似沒啥好講的，會React和es6的一下就能看懂。。。

接下來是由對MyButton進行封裝的MyButtonController.js

import React, {Component} from "react"
import MyButton from "app/components/MyButton"
import listStore from "app/stores/listStore"
import ButtonActions from "app/actions/ButtonActions"

//對Action發(fā)生器進行初始化，buttonActions能發(fā)出不同類型action給Dispatcher
let buttonActions = new ButtonActions()

class MyButtonController extends Component {

    constructor(props) {
        //把props作為參數(shù)傳遞到super(),這樣在constructor里即可訪問this.props屬性
        super(props)
        this.state = {
            items: []
        }
    }

    componentDidMount() {
        //在組件掛載后綁定組件的私有方法_onChange到Store,之后listStore狀態(tài)變化即可通知組件調(diào)用_onChange方法進行改變
        listStore.addChangeListener(this._onChange.bind(this))
    }

    componentWillUnmount() {
        //在組件移除后解除綁定組件的私有方法_onChange到Store
        listStore.removeChangeListener(this._onChange.bind(this))
    }

    //組件響應(yīng)Store變化的回調(diào)函數(shù)
    _onChange() {
        this.setState({
            items: listStore.getAll()
        })
    }

    render() {
        return (
            
        )
    }

    createNewItem() {
        //調(diào)用Action發(fā)生器發(fā)出增加Item的Action
        buttonActions.addNewItem("new item")
    }
}

export default MyButtonController

在我們點擊新增按鈕后調(diào)用createNewItem方法發(fā)出一個"ADD_NEW_ITEM"的Action到Dispatcher

接下來我們看看ButtonActions.js

import AppDispatcher from "app/dispatcher/AppDispatcher"

class ButtonActions {

    //發(fā)送ADD_NEW_ITEM的Action的方法
    addNewItem(text) {
        //調(diào)用Dispatcher獲取actionType為ADD_NEW_ITEM的Action
        AppDispatcher.dispatch({
            actionType: "ADD_NEW_ITEM",
            text: text
        })
    }
}

export default ButtonActions

這里的addNewItem方法發(fā)起了一個actionType為ADD_NEW_ITEM的Action到Dispatcher

然后我們再看AppDispatcher.js

import flux from "flux"
import listStore from "app/stores/listStore"

//拿到flux模塊里的Dispatcher類
let Dispatcher = flux.Dispatcher;
//用Dispatcher類new一個AppDispatcher對象
let AppDispatcher = new Dispatcher();

//調(diào)用register方法注冊接收到各種actionType的Action之后的回調(diào)函數(shù)
AppDispatcher.register(function (action) {
    switch (action.actionType) {
        case "ADD_NEW_ITEM":
            listStore.addNewItemHandler(action.text)
            listStore.emitChange()
            break;
        default:
    }
})

export default AppDispatcher

最后是ListStore.js

import EventEmitter from "events"

class ListStore extends EventEmitter {

    constructor() {
        super()
        //初始化數(shù)據(jù)
        this.items = []
    }
    
    //返回所有數(shù)據(jù)的方法
    getAll() {
        return this.items
    }

    //增加數(shù)據(jù)的處理函數(shù)
    addNewItemHandler(text) {
        this.items.push(text)
    }

    //提交變化
    emitChange() {
        this.emit("change")
    }

    //監(jiān)聽函數(shù)，當(dāng)有變化時調(diào)用注冊的回調(diào)方法
    addChangeListener(callback) {
        this.on("change", callback)
    }

    //remore監(jiān)聽函數(shù)
    removeChangeListener(callback) {
        this.removeListener("change", callback)
    }
}

//new一個listStore作為單例暴露給其它模塊使用
let listStore = new ListStore()

export default listStore

它負責(zé)記錄數(shù)據(jù)和狀態(tài)并在有變化時改變View