摘要：中發(fā)布訂閱模式使用場(chǎng)景怎么能將設(shè)計(jì)模式應(yīng)用到我們的項(xiàng)目中以前一直在思考這個(gè)問題。兩個(gè)模塊在事件系統(tǒng)唯一的聯(lián)系就是事先定義好事件的。

怎么能將設(shè)計(jì)模式應(yīng)用到我們的 React 項(xiàng)目中？以前一直在思考這個(gè)問題。

模塊 A 模塊 B 需要用到同一個(gè)數(shù)據(jù) data，A 和 B 都會(huì)修改這份數(shù)據(jù)，且這兩個(gè)模塊會(huì)同時(shí)存在；這時(shí)我們?nèi)绾巫龅綌?shù)據(jù)公用與各個(gè)模塊的更新？

方案一：
將這份數(shù)據(jù)作為公共的數(shù)據(jù) data，A B 模塊同時(shí)使用并更改這份數(shù)據(jù)這一份數(shù)據(jù)。若使用 redux 代碼可能是這樣：

// store

const store = {
    common: { data: [] },
    A: {},
    B: {},
};

// reducer
function commonReducer(state = { data: [] }, action) {
    switch (action.type) {
        case "common_setData": {
            return {
                ...state,
                data: action.data,
            };
        }
        default:
            return state;
    }
}

// connect

const actionCreator = () => {};

connect(({ A, common }) => ({ ...A, data: common.data }))(A);
connect(({ B, common }) => ({ ...A, data: common.data }))(B);

// change
// A B change調(diào)用方法；
this.props.dispatch({
    type: "common_setData",
    data: [1, 2],
});

好的，第一種場(chǎng)景可以使用 redux 完美解決

方案二：待補(bǔ)充

A 模塊使用了 data1, B 模塊使用了 data2；A B 模塊可以修改對(duì)應(yīng)的 data；這兩份 data 結(jié)構(gòu)上不同，但是存在業(yè)務(wù)上的聯(lián)系： 當(dāng) data1 更新后需要 data2 更新；data2 更新同樣需要 data1 同步；對(duì)應(yīng)后端的兩個(gè)不同的 API。

我們整理一下

A B 使用兩份存在聯(lián)系的 data

其中一個(gè)更新需要另一個(gè)更新

兩份 data 對(duì)應(yīng)不同的 API 接口

A B 對(duì)應(yīng)兩個(gè)不同的 tab 且可能同時(shí)存在

當(dāng)其中一個(gè)數(shù)據(jù)因操作發(fā)生更新時(shí)，判斷另一個(gè)模塊是否存在 如果存在則調(diào)用他的數(shù)據(jù)更新邏輯；

如果你使用了 redux，可能方便一點(diǎn)：

// reducerA
// 省略B
function reducerA(state = { data: [] }, action) {
    switch(action.type) {
        case "A_setDataA": {
            return {
                ...state,
                data: action.data
            }
        }
        default: return state
    }
}

// 假設(shè)使用了thunk中間件
const queryA = () => async (dispatch, getState) => {
    const dataA = await API.queryA()
    dispatch({
        type: "A_setDataA"
        data: dataA
    })
}

// page

class B extends React.Component {
    handleUpdateData = () => {
        // 如果 A模塊存在
        const { isAExistFlag, dispatch, queryA, queryB } = props
        dispatch(queryB())
        if (isAExistFlag) {
            dispatch(queryA())
        }
    }
}

這樣利用了 redux 可以實(shí)現(xiàn)功能，在模塊 B 內(nèi)調(diào)用模塊 A 的更新邏輯；但這樣邏輯就耦合了，我在模塊 A 調(diào)用模塊 B 方法 在模塊 B 調(diào)用模塊 A 的方法；但很有可能這兩個(gè)模塊是沒有其他交互的。這違反了低耦合高內(nèi)聚的原則
而且書寫 redux 的一個(gè)原則就是 不要調(diào)用（dispatch）其他模塊的 action

如果你不使用 redux 如果是一個(gè)模塊內(nèi)調(diào)用其他模塊的方法也是沒有做到解耦的；那如何做到解耦尼？請(qǐng)看方案二

如果您的項(xiàng)目中沒有一個(gè)全局的事件系統(tǒng)，可能需要引入一個(gè)；一個(gè)簡(jiǎn)單的事件系統(tǒng)大概是：

class EventEmitter {
    constructor() {
        this.listeners = {};
    }

    on(type, cb, mode) {
        let cbs = this.listeners[type];
        if (!cbs) {
            cbs = [];
        }
        cbs.push(cb);
        this.listeners[type] = cbs;
        return () => {
            this.remove(type, cb);
        };
    }

    emit(type, ...args) {
        console.log(
            `%c event ${type} be triggered`,
            "color:rgb(20,150,250);font-size:14px",
        );
        const cbs = this.listeners[type];
        if (Array.isArray(cbs)) {
            for (let i = 0; i < cbs.length; i++) {
                const cb = cbs[i];
                if (typeof cb === "function") {
                    cb(...args);
                }
            }
        }
    }

    remove(type, cb) {
        if (cb) {
            let cbs = this.listeners[type];
            cbs = cbs.filter(eMap => eMap.cb !== cb);
            this.listeners[type] = cbs;
        } else {
            this.listeners[type] = null;
            delete this.listeners[type];
        }
    }
}

export default new EventEmitter();

這個(gè)事件系統(tǒng)具有注冊(cè)，發(fā)布，移除事件的功能。那我們?cè)趺丛趧偛胚@個(gè)場(chǎng)景去使用它尼？

發(fā)布：當(dāng)A模塊內(nèi)數(shù)據(jù)因操作發(fā)生變化時(shí)，觸發(fā)該數(shù)據(jù)變化的事件，定義type為data1Change；

注冊(cè)：這里B模塊的注冊(cè)的時(shí)機(jī)，上述的場(chǎng)景為A和B模塊可能同時(shí)出現(xiàn)，所以A模塊存在B模塊卻不存在。所以這個(gè)B模塊事件的監(jiān)聽選擇在B模塊組件的componentDidMount的時(shí)候注冊(cè)，在componentWillUnmount時(shí)移除

大致的代碼如下：

import EventEmitter from "eventEmitter"
class A extends React.Component {
    handleUpdateData = () => {
        // 如果 A模塊存在
        const { dispatch, queryB } = props
        dispatch(queryA())
        EventEmitter.emit("data1Change")
    }
}

// B
import EventEmitter from "eventEmitter"
class B extends React.Component {
    componentDidMount() {
        const unlistener = EventEmitter.on("data1Change", this.handleData1Change)
    }

    componentWillUnmount() {
        EventEmitter.on("data1Change", this.handleData1Change)
    }

    handleData1Change = () => {
        const { dispatch, queryB } = this.props
        dispatch(queryB())
    }
}

這樣通過事件系統(tǒng)做到了兩個(gè)模塊之間的解耦，作為事件發(fā)布方只管發(fā)布自己的事件。兩個(gè)模塊在事件系統(tǒng)唯一的聯(lián)系就是事先定義好事件的type。

不過這也增加了幾行的代碼量，但相比帶來的優(yōu)勢(shì)來說可以不計(jì)。

其他方案歡迎大家評(píng)論

待大家補(bǔ)充