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

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

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

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

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

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

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

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

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

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

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

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

接下來是由對MyButton進(jìn)行封裝的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ā)生器進(jìn)行初始化，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方法進(jìn)行改變
        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ǎn)擊新增按鈕后調(diào)用createNewItem方法發(fā)出一個(gè)"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ā)起了一個(gè)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一個(gè)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)有變化時(shí)調(diào)用注冊的回調(diào)方法
    addChangeListener(callback) {
        this.on("change", callback)
    }

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

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

export default listStore

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

GPU云服務(wù)器云服務(wù)器 flux架構(gòu) 服務(wù)器架構(gòu)筆記 java開發(fā)入門筆記 Flux

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/91203.html

發(fā)表評論

登陸后可評論

0條評論

lily_wang

男|高級講師

我要關(guān)注我要私信

TA的文章

BREW精要之COM 模型

閱讀 2926·2021-11-22 15:22
IP地址怎么看網(wǎng)絡(luò)位和主機(jī)位-根據(jù)ip地址怎么求主機(jī)位？

閱讀 20155·2021-09-22 15:00
Loadrunner性能測試入門流程(一)

閱讀 1508·2021-09-07 09:58
CSS魔法堂：重拾Border之——更廣闊的遐想

閱讀 1291·2019-08-30 13:01
遮罩層彈框頁面滾動(dòng)

閱讀 2508·2019-08-29 16:27
svg和css3創(chuàng)建環(huán)形漸變進(jìn)度條

閱讀 2400·2019-08-26 13:25
Function類型

閱讀 1679·2019-08-26 12:13
vscode中使用js的console配置 - mac

閱讀 1010·2019-08-26 11:53

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

**React學(xué)習(xí)筆記 - 對Flux的理解**

從小白程序員一路晉升為大廠高級技術(shù)專家我看過哪些書籍？（建議收藏）

***Flux* 應(yīng)用*架構(gòu)***

***Flux* 應(yīng)用*架構(gòu)***

**[譯]Flux入門**

發(fā)表評論

0條評論

lily_wang

男|高級講師

TA的文章

BREW精要之COM 模型

IP地址怎么看網(wǎng)絡(luò)位和主機(jī)位-根據(jù)ip地址怎么求主機(jī)位？

Loadrunner性能測試入門流程(一)

CSS魔法堂：重拾Border之——更廣闊的遐想

遮罩層彈框頁面滾動(dòng)

svg和css3創(chuàng)建環(huán)形漸變進(jìn)度條

Function類型

vscode中使用js的console配置 - mac

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！