場景

在業務上現在有一個場景，當發生業務行為變化時，需要對各個模塊的行為進行數據收集，數據用途可以用作回顧，也可以是例如監控這樣的場景。

核心問題

說白了這個需求就是需要對各個模塊狀態變更進行記錄，然后再格式化上傳到服務端。解題思路有兩種一種是狀態監聽，第二主動收集。

狀態監聽狀態監聽優勢

快速實現利用狀態管理和wacth的機制很快就知道不同模塊的狀態變更，然后就可以獲取數據，再格式化數據，發送給服務端

狀態監聽劣勢 wacth的重復監聽，只要使用了wacth，不管是不是你所需要的數據，只要狀態變更就會觸發改變，監聽行為 重復依賴，比如說全局有個開始結束的狀態，在使用wacth的時候就需要在不同的wacth中都去判斷這個狀態，或者有全局的時間模塊等等 重復書寫，在不同的監聽中需要實踐相同的數據格式化方法 數據分布混亂，雖然控制了全局使用同一管道上傳，但是對于同一個管道內的數據想做合并去重，或者其他自定義的操作，在不同類型數據，同一管道的這個場景下面支持很弱 場景區分困難，正常流程觸發的監聽是沒有問題，如果是異常場景觸發恢復的監聽就會導致判斷的復雜性 描述的還是比較抽象看下代碼示例

function useA(){ wacth(new,old){ if(start){ if(new.type ==’need’) const a = { a:new.a } const aa = { aa:new.aa } upload(a) upload(aa) } }}// 多處數據散落function useB(){ // 重復監聽 wacth(new,old){ // 全局判斷 if(start){ // 不同狀態判斷 if(new.type ==’need’) const b = { b:new.b } //重復數據格式 const aa = { b:new.aa } upload(b) upload(aa) } }}重構實現思路 依賴收集（監聽者模式） 狀態統一 數據自治（策略模式） 依賴收集 核心思想:希望使用同一個采集器解決整個業務流程，數據變更在各個變更方，通過采集器提供的標準的格式化方法去處理數據，再把數據傳遞到采集器，采集器收到數據后根據不同的數據格式插入到不同的緩存通道，緩存通道緩存成功，通知業務處理的監聽者，根據不同的數據類型進行不同的處理方式，最后發送到服務端。 具體代碼如下

/* * @Description: 采集公共類 * @version: 1.0.0 * @Author: 吳文周 * @Date: 2021-04-20 19:44:35 * @LastEditors: 吳文周 * @LastEditTime: 2021-04-22 15:20:50 *//** * @name: Dep * @msg: 依賴收集對象 */class Dep { private subs: any = [] // 添加觀察者 public addSub(sub: any) { if (sub && sub.update) { this.subs.push(sub) } } // 發送通知 public notify(content: any) { this.subs.forEach((sub: any) => { sub.update(content) }) }}/** * @name: Watcher * @msg: 觀察者對象 */class Watcher { private cb!: (arg: any) => void constructor(cb: (arg: any) => void) { // 回調函數負責更新 this.cb = cb } // 當數據發生變化的時候更新 update(content: any) { this.cb(content) }}/** * @name: Channel * @msg: 緩存消息管道 */class Channel { // 管道存儲數組 private queue: any = [] // 管道大小 private limitSize = 1 // 管道名稱 public name: string constructor(name: string, limitSize = 1) { this.name = name // 最小尺寸是1 limitSize = limitSize >= 1 ? limitSize : 1 this.limitSize = limitSize } /** * @name: push * @msg: 添加的數據 */ push(item: any) { // 如果超出限制尺寸移除第一個 if (this.limitSize == this.queue.length) { this.queue.shift() } this.queue.push(item) } /** * @name: getLast * @msg: 獲取最后添加的數據 */ getLast() { if (this.queue.length > 0) { return this.queue[this.queue.length - 1] } else { throw new Error(’no item return’) } } /** * @name: getLastIndex * @msg: 獲取最后倒數的數據 */ getLastIndex(index: number) { try { return this.queue[this.queue.length - index - 1] } catch (error) { throw new Error(’no item return’) } } /** * @name: isEmpty * @msg: 管道是否為空 */ isEmpty() { return this.queue.length == 0 }}export class Collection { // 依賴收集對象 private dep = new Dep() // 各個數據頻道分類 private dataQueue = [’A’, ’B’, ’C’] // 頻道集合 private channelMap = new Map() // 上傳隊列 private MQ!: LiveCollectionMQ // 策略模式：數據類型不同對應不同的處理機制 private strategies = { A: () => { // 可以在不同的管道中獲取相對應的數據進行不同邏輯的處理 }, B: () => { }, C: () => { }, } as Record<NotifyType, any> constructor() { this.init() } private init() { // 初始化watcher this.intWatcher() // 初始化頻道 this.initChannel() // 初始化數據 this.initData() // 初始化隊列 this.initMQ() } /** * @name:intWatcher * @msg:初始化監聽器 */ private intWatcher() { this.dep.addSub( new Watcher((type: NotifyType) => {const handlerBack = this.getHandler(type)handlerBack() }), ) } /** * @name: initChannel * @msg: 初始化頻道 */ private initChannel() { this.dataQueue.forEach(item => { this.channelMap.set(item, new Channel(item, 3)) }) } /** * @name: initData * @msg: 初始化頻道數據 * @param {*} */ private initData() { } /** * @name: initMQ * @msg: 初始化上傳隊列 */ private initMQ() { } /** * @name: getMQ * @msg:獲取消息隊列 */ public getMQ() { return this.MQ } /** * @name:getChannel * @msg:根據頻道名稱獲取頻道實例 * @param {name}頻道名稱 */ private getChannel(name: NotifyType) { if (this.channelMap.get(name)) { return this.channelMap.get(name) } else { throw new Error(’no channel’) } } /** * @name:notify * @msg:依賴通知方法 * @param {NotifyType} type * @param {any} mes */ public notify(type: NotifyType, mes: any) { // 設置管道緩存 this.setChannel(type, mes) // 全局統一判斷狀態判斷是否要分發數據 if (state.value.type) { this.dep.notify(type) } } /** * @name: setChannel * @msg: 設置頻道緩存 * @param {NotifyType} name * @param {any} mes */ private setChannel(name: NotifyType, mes: any) { const channel = this.getChannel(name) channel.push(mes) } /** * @name:getHandler * @msg: 獲取 * @param {NotifyType} name */ private getHandler(name: NotifyType) { return this.strategies[name] } /** * @name: getChannelLast * @msg: 獲取指定管道中的最新的數據 * @param {NotifyType} name * @return {*} */ public getChannelLast(name: NotifyType) { try { const channel = this.getChannel(name) return channel.getLast() } catch (error) { throw new Error(error) } } /** * @name: getChannelLast * @msg: 獲取指定管道中的倒序數據 * @param {NotifyType} name * @param {number} index */ public getChannelItemByLastIndex(name: NotifyType, index: number) { try { const channel = this.getChannel(name) return channel.getLastIndex(index) } catch (error) { throw new Error(error) } } /** * @name: generateA * @msg: 生成A數據方法 */ public generateA() { } /** * @name: generateB * @msg: 生成B數據方法 */ public generateB() { } /** * @name: generateC * @msg: 生成C數據方法 */ public generateC() { }}export const CollectionHelper = new Collection()總結 我覺得去了解一個框架的一個好的思路就是在運用它的核心原理去解決一個原理，正如之前使用webpack的插件機制一樣，這次使用的是vue的依賴收集 狀態自治，職責統一是個代碼封裝的好習慣

以上就是用vue設計一個數據采集器的詳細內容，更多關于vue 設計數據采集器的資料請關注好吧啦網其它相關文章！