国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

狀態(tài)管理從0開始[后續(xù)更新]

OnlyLing / 491人閱讀

摘要：命名一個要一個只讀創(chuàng)建一些列改變需要一個監(jiān)聽改變每一次改變狀態(tài)的時候執(zhí)行調(diào)用返回狀態(tài)優(yōu)化想要第一次監(jiān)聽的時候返回當(dāng)前狀態(tài)監(jiān)聽改變狀態(tài)統(tǒng)一使用調(diào)用法打印日志信息監(jiān)聽改變之前的狀態(tài)監(jiān)聽改變之后的狀態(tài)可以少寫好多個優(yōu)化想要第一次監(jiān)聽的時候返回當(dāng)前

Step01.命名一個storeService要一個只讀state
var storeService = new Object({
    _state: { age: 1 },
    get state() {
        return this._state;
    },
    set state(v) {
        throw new Error(" is read only.")
    }
});
Step02.創(chuàng)建一些列mutation改變state
var storeService = new Object({
    _state: { age: 1 },
    get state() {
        return this._state;
    },
    set state(v) {
        throw new Error(" is read only.")
    },
    mutationModifyAge(newAge) {
        state.age = newAge;
    },
    mutationModifyAge2(newAge) {
        state.age = newAge;
    },
    mutationModifyAge3(newAge) {
        state.age = newAge;
    }
});
Step03.需要一個watch監(jiān)聽改變,每一次改變狀態(tài)的時候（執(zhí)行mutation）調(diào)用listenCallback 返回狀態(tài)
var storeService = new Object({
    _listeners: [],
    _state: { age: 1 },
    get state() {
        return this._state;
    },
    set state(v) {
        throw new Error(" is read only.")
    },
    mutationModifyAge(newAge) {
        state.age = newAge;
        this._dealCallback();
    },
    mutationModifyAge2(newAge) {
        state.age = newAge;
        this._dealCallback();
    },
    mutationModifyAge3(newAge) {
        state.age = newAge;
        this._dealCallback();
    },
    _dealCallback() {
        this._listeners.forEach(listener => listener(this.state))

    },
    watch(listener) {
        // 優(yōu)化想要第一次監(jiān)聽的時候返回當(dāng)前狀態(tài)
        listener(this.state);
        this._listeners.push(listener);
    }
});
// 監(jiān)聽store
storeService.watch(function (state) {
    console.log("callback", state);
})
// 改變狀態(tài)
storeService.mutationModifyAge(2)
Step04.統(tǒng)一使用dispatch調(diào)用mutation法
var storeService = new Object({
    _listeners: [],
    _state: { age: 1 },
    get state() {
        return this._state;
    },
    set state(v) {
        throw new Error(" is read only.")
    },
    dispatch(type, ...paylod) {
        // 打印日志信息
        console.log(type ? type : "監(jiān)聽", "改變之前的狀態(tài)", this.state);
        if (this._mutation[type]) {
            this._mutation[type](this.state, ...paylod);
        }
        console.log(type ? type : "監(jiān)聽", "改變之后的狀態(tài)", this.state);
        // 可以少寫好多個listenCallback
        this._dealCallback();
    },
    _mutation: {
        mutationModifyAge(state, newAge) {
            state.age = newAge;
        },
        mutationModifyAge2(state, newAge) {
            state.age = newAge;
        },
        mutationModifyAge3(state, newAge) {
            state.age = newAge;
        }
    },
    _dealCallback() {
        this._listeners.forEach(listener => listener(this.state))

    },
    watch(listener) {
        // 優(yōu)化想要第一次監(jiān)聽的時候返回當(dāng)前狀態(tài)
        // listener(this.state);
        // 優(yōu)化讓第一次監(jiān)聽也可以記錄歷史日志
        this.dispatch();
        this._listeners.push(listener);
    }
});
// 監(jiān)聽store
storeService.watch(function (state) {
    console.log("callback", state);
})
// 改變狀態(tài)
storeService.dispatch("mutationModifyAge", 2)
以上內(nèi)容為創(chuàng)建一個簡單的store。
 以下開始按照Vuex0.3.0開始優(yōu)化
 Step05.vuex dispatcher調(diào)用的方法是mutation，
 mutation是唯一操作state的方法，
 mutation不可包含任何副作用，
 mutation對外暴露dispatch調(diào)用將上面的mutation 改為mutation
var storeService = new Object({
    _listeners: [],
    _state: { age: 1 },
    get state() {
        return this._state;
    },
    set state(v) {
        throw new Error(" is read only.")
    },
    dispatch(type, ...paylod) {
        // 打印日志信息
        console.log(type ? type : "監(jiān)聽", "改變之前的狀態(tài)", this.state);
        if (this._mutation[type]) {
            this._mutation[type](this.state, ...paylod);
        }
        console.log(type ? type : "監(jiān)聽", "改變之后的狀態(tài)", this.state);
        // 可以少寫好多個listenCallback
        this._dealCallback();
    },
    _mutation: {
        mutationModifyAge(state, newAge) {
            state.age = newAge;
        },
        mutationModifyAge2(state, newAge) {
            state.age = newAge;
        },
        mutationModifyAge3(state, newAge) {
            state.age = newAge;
        }
    },
    _dealCallback() {
        this._listeners.forEach(listener => listener(this.state))

    },
    watch(listener) {
        // 優(yōu)化想要第一次監(jiān)聽的時候返回當(dāng)前狀態(tài)
        // listener(this.state);
        // 優(yōu)化讓第一次監(jiān)聽也可以記錄歷史日志
        this.dispatch();
        this._listeners.push(listener);
    }
});
// 監(jiān)聽store
storeService.watch(function (state) {
    console.log("callback", state);
})
// 改變狀態(tài)
storeService.dispatch("mutationModifyAge", 2)
Step05.vuex中mutation為純函數(shù)，不可包含任何副作用，添加action來處理一系列副作用，最終還是調(diào)用dispatch 去改變state
var storeService = new Object({
    _listeners: [],
    _state: { age: 1 },
    get state() {
        return this._state;
    },
    set state(v) {
        throw new Error(" is read only.")
    },

    dispatch(type, ...paylod) {
        // 打印日志信息
        console.log(type ? type : "監(jiān)聽", "改變之前的狀態(tài)", this.state);
        if (this._mutation[type]) {
            this._mutation[type](this.state, ...paylod);
        }
        console.log(type ? type : "監(jiān)聽", "改變之后的狀態(tài)", this.state);
        // 可以少寫好多個listenCallback
        this._dealCallback();
    },
    _mutation: {
        mutationModifyAge(state, newAge) {
            state.age = newAge;
        },
        mutationModifyAge2(state, newAge) {
            state.age = newAge;
        },
        mutationModifyAge3(state, newAge) {
            state.age = newAge;
        }
    },
    _dealCallback() {
        this._listeners.forEach(listener => listener(this.state))
    },
    watch(listener) {
        // 優(yōu)化想要第一次監(jiān)聽的時候返回當(dāng)前狀態(tài)
        // listener(this.state);
        // 優(yōu)化讓第一次監(jiān)聽也可以記錄歷史日志
        this.dispatch();
        this._listeners.push(listener);
    },
    bindAction(actions) {
        this.actions = Object.create(null);
        this._actions = Object.create(null);

        function createAction(action, store) {
            if (typeof action === "function") {
                return (...payload) => action(store, ...payload)
            }
        }
        Object.keys(actions).forEach(name => {
            console.log(actions[name]);
            this._actions[name] = createAction(actions[name], this)
            if (!this.actions[name]) {
                this.actions[name] = (...args) => this._actions[name](...args)
            }
        })
    }
});
var actions = {
    // 包含副作用的action
    asyncModifyAge(store, ...paylod) {
        setTimeout(() => {
            store.dispatch("mutationModifyAge", ...paylod)
        }, 2000);
    },
    // 多次調(diào)用dispatch
    asyncMulModifyAge(store, ...paylod) {
        setTimeout(() => {
            store.dispatch("mutationModifyAge", ...paylod)
        }, 2000);
        store.dispatch("mutationModifyAge2", ...paylod)
    }
}
storeService.bindAction(actions);
// 監(jiān)聽store
storeService.watch(function (state) {
    console.log("callback", state);
})
// 改變狀態(tài)
storeService.dispatch("mutationModifyAge", 2)
storeService.actions.asyncMulModifyAge(21);
Step06 封裝成一個類hKeeper
var defaultOption = {
    state: {},
    actions: {},
    mutations: {}
};
class hKeeper {
    constructor(options) {
        options = Object.assign({}, defaultOption, options);
        this._state =  options.state;
        this.listeners = [];
        const dispatch = this.dispatch;
        this.dispatch = (...args) => {
            dispatch.apply(this, args);
        };
        this.actions = Object.create(null);
        this._setupMutations(options.mutations);
        this._setupActions(options.actions);
    }
    get state() {
        return this._state
    }

    set state(v) {
        throw new Error("[hKeeper] hKeeper state is read only.")
    }
    dispatch(type, ...payload) {
        const mutation = this._mutations[type]
        const state = this.state
        if (mutation) {
            mutation(state, ...payload)
        }
        this.listeners.forEach(listener => listener(this.state))
    }
    _setupMutations(mutations) {
        this._mutations = mutations;
    }
    // 設(shè)置action
    _setupActions(actions) {
        function createAction(action, store) {
            if (typeof action === "function") {
                return (...payload) => action(store, ...payload)
            }
        }
        this._actions = Object.create(null)
        Object.keys(actions).forEach(name => {
            this._actions[name] = createAction(actions[name], this)
            if (!this.actions[name]) {
                this.actions[name] = (...args) => this._actions[name](...args)
            }
        })
    }
    watch(listener) {
        listener(this.state);
        this.listeners.push(listener)
    }
}
var storeService = new hKeeper(
    {
        state: { age: 1 },
        actions: {
            // 包含副作用的action
            asyncModifyAge(store, ...paylod) {
                setTimeout(() => {
                    store.dispatch("mutationModifyAge", ...paylod)
                }, 2000);
            },
            // 多次調(diào)用dispatch
            asyncMulModifyAge(store, ...paylod) {
                setTimeout(() => {
                    store.dispatch("mutationModifyAge", ...paylod)
                }, 2000);
                store.dispatch("mutationModifyAge2", ...paylod)
            }
        },
        mutations: {
            mutationModifyAge(state, newAge) {
                state.age = newAge;
            },
            mutationModifyAge2(state, newAge) {
                state.age = newAge;
            },
            mutationModifyAge3(state, newAge) {
                state.age = newAge;
            }
        }
    }
)
// 監(jiān)聽store
storeService.watch(function (state) {
    console.log("callback", state);
})
// 改變狀態(tài)
storeService.dispatch("mutationModifyAge", 2)
storeService.actions.asyncMulModifyAge(21);
參考Vuex0.3.0版本 applyMiddleware 參考Redux 
https://github.com/HereSincer...

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/90674.html

相關(guān)文章

  • 不可不說的Java“鎖”事

    摘要：本文旨在對鎖相關(guān)源碼本文中的源碼來自使用場景進(jìn)行舉例，為讀者介紹主流鎖的知識點，以及不同的鎖的適用場景。中，關(guān)鍵字和的實現(xiàn)類都是悲觀鎖。自適應(yīng)意味著自旋的時間次數(shù)不再固定，而是由前一次在同一個鎖上的自旋時間及鎖的擁有者的狀態(tài)來決定。 前言 Java提供了種類豐富的鎖，每種鎖因其特性的不同，在適當(dāng)?shù)膱鼍跋履軌蛘宫F(xiàn)出非常高的效率。本文旨在對鎖相關(guān)源碼（本文中的源碼來自JDK 8）、使用場景...

    galaxy_robot 評論0 收藏0

  • JStorm源碼分析系列--01--Nimbus啟動分析

    摘要：方法首先初始化一個回調(diào)函數(shù)，這是當(dāng)一個成為之后就會調(diào)用的一個用于初始化一系列變量的方法，包括拓?fù)淙绾卧诩荷戏峙洌負(fù)錉顟B(tài)更新，清除函數(shù)，還有監(jiān)控線程等。 寫在前面的話，筆者第一次閱讀框架源碼，所以可能有些地方理解錯誤或者沒有詳細(xì)解釋，如果在閱讀過程發(fā)現(xiàn)錯誤很歡迎在文章下面評論指出。文章后續(xù)會陸續(xù)更新，可以關(guān)注或者收藏，轉(zhuǎn)發(fā)請先私信我，謝謝。對了，筆者看的是2.2.1這個版本 概述 ?...

    Carbs 評論0 收藏0

  • React Hook起飛指南

    摘要：起飛指南作者元瀟方凳雅集出品目前放出來了個內(nèi)置，但僅僅基于以下兩個，就能做很多事情。行代碼實現(xiàn)一個全局元瀟根組件掛上即可子組件調(diào)用隨時隨地實現(xiàn)一個局部元瀟的本質(zhì)是的一個語法糖，感興趣可以閱讀一下的類型定義和實現(xiàn)。 React Hook起飛指南 作者：元瀟 方凳雅集出品 16.8目前放出來了10個內(nèi)置hook，但僅僅基于以下兩個API，就能做很多事情。所以這篇文章不會講很多API，...

    姘擱『 評論0 收藏0

  • 聊一聊H5應(yīng)用緩存-Manifest

    摘要：原文聊一聊應(yīng)用緩存導(dǎo)讀是提供的一種應(yīng)用緩存機制基于它應(yīng)用可以實現(xiàn)離線訪問為此瀏覽器還提供了應(yīng)用緩存的雖然的技術(shù)已被標(biāo)準(zhǔn)廢棄但這不影響我們嘗試去了解它也正是因為的應(yīng)用緩存機制如此誘人餓了么和郵箱等都還在使用著它描述對熟悉的同學(xué)可以跳過此 原文: 聊一聊H5應(yīng)用緩存-Manifest 導(dǎo)讀 Manifest 是 H5提供的一種應(yīng)用緩存機制, 基于它web應(yīng)用可以實現(xiàn)離線訪問(offline...

    陳偉 評論0 收藏0

  • 我的Android重構(gòu)之旅：架構(gòu)篇

    摘要：是的架構(gòu)的實現(xiàn)。是在年提出的一種前端架構(gòu)，主要用來處理復(fù)雜的邏輯的一致性問題當(dāng)時是為了解決頁面的消息通知問題。 去年10月底來到了新公司，剛開始接手 Android 項目時，發(fā)現(xiàn)該項目真的是一團(tuán)遭，項目開發(fā)上沒有任何架構(gòu)可言，開發(fā)人員連簡單的 MVC、MVP 都不了解，Activity 及其臃腫，業(yè)務(wù)邊界也不明確，因此我決定重新分析一下當(dāng)前主流的幾種開發(fā)架構(gòu)，選出適合當(dāng)前項目的架構(gòu)形式...

    mylxsw 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<