Vuex源碼學(xué)習(xí)（五）加工后的module

2bdenny 發(fā)布于2019-08-23 16:28 / 1861人閱讀

摘要：先看一下創(chuàng)建一個(gè)容器存放該模塊所有的子模塊存放自己未被加工的模塊內(nèi)容。是封裝的工具方法，用于遍歷對(duì)象的。這些方便高效的方法為之后的注冊(cè)。

沒(méi)有看過(guò)moduleCollection那可不行！Vuex源碼學(xué)習(xí)（四）module與moduleCollection

代碼塊和截圖的區(qū)別

代碼塊部分希望大家按照我的引導(dǎo)一行行認(rèn)真的讀

代碼的截圖是希望大家能記住圖中的結(jié)構(gòu)與方法，下面會(huì)對(duì)整體進(jìn)行一個(gè)分析，而不會(huì)一行一行的分析。

但是以后的文章會(huì)更偏向于使用代碼塊，希望大家喜歡。

上一章我們講述了ModuleCollection類(lèi)的作用，幫助我們把偽（未加工的）模塊變成真正的模塊，然后把每個(gè)模塊按照父子與兄弟關(guān)系鏈接起來(lái)。那么真正的模塊相比于偽（未加工的）模塊多了哪些能力呢？

module提供的方法

這是module暴露出來(lái)的所有方法，以及一個(gè)屬性。

先看一下constructor

constructor (rawModule, runtime) {
    this.runtime = runtime
    // Store some children item
    // 創(chuàng)建一個(gè)容器存放該模塊所有的子模塊
    this._children = Object.create(null)
    // Store the origin module object which passed by programmer
    // 存放自己未被加工的模塊內(nèi)容。
    this._rawModule = rawModule
    const rawState = rawModule.state
    // Store the origin module‘s state
    // 創(chuàng)建這個(gè)模塊的數(shù)據(jù)容器
    this.state = (typeof rawState === "function" ? rawState() rawState) || {}
}

模塊的初始化主要是做了以下三件事情

創(chuàng)建_children屬性用于存放子模塊

創(chuàng)建_rawModule屬性存儲(chǔ)自己模塊的偽（未被加工）模塊時(shí)的內(nèi)容

創(chuàng)建state屬性存儲(chǔ)自己模塊的數(shù)據(jù)內(nèi)容每個(gè)模塊都有自己的state。

模塊的初始化并沒(méi)有做什么事情，模塊提供的方法和屬性才是它的核心，
模塊提供了一個(gè)namespaced的屬性，以及很多方法，我將模塊提供的方法分成兩類(lèi)。

先說(shuō)屬性

get namespaced () {
    // 獲取模塊的namespaced屬性 確定這個(gè)模塊有沒(méi)有自己的命名空間
    return !!this._rawModule.namespaced
}

判斷是否有命名空間有什么用？在以后設(shè)置getters、mutation、actions時(shí)有很大作用，以后再講。

再說(shuō)方法

模塊提供的所有方法都是為了給外部的調(diào)用，這些方法沒(méi)有一個(gè)是讓模塊在自己的內(nèi)部使用的。所以我把方法劃分的緯度是，按照這個(gè)方法是用于構(gòu)建模塊樹(shù)還是用于抽取模塊中的內(nèi)容，

構(gòu)建模塊樹(shù)的方法:

1.addChild：給模塊添加子模塊。

addChild (key, module) {
    this._children[key] = module
}

這個(gè)方法實(shí)現(xiàn)上很簡(jiǎn)單，它是在哪里被調(diào)用的呢？大家可以翻開(kāi)上一章的moduleCollection的內(nèi)容，在ModuleCollection中完成模塊之間的鏈接，就是使用這個(gè)方法給父模塊添加子模塊。

removeChild：移除子模塊 Vuex初始化的時(shí)候未使用，但可以給你提供靈活的處理模塊的能力

removeChild (key) {
    delete this._children[key]
}

getChild：獲取子模塊獲取子模塊的意義是什么？在以后配置模塊的名字時(shí)，需要獲取模塊的是否設(shè)置了命名空間，獲取命名空間的屬性模塊提供了，再提供一個(gè)獲取子模塊就都Ok了

getChild (key) {
    return this._children[key]
}

updateChild:更新模塊的_ra wModule屬性（更新模塊的未加工前的模塊內(nèi)容）,Vuex中未使用

update (rawModule) {
    this._rawModule.namespaced = rawModule.namespaced
    if (rawModule.actions) {
      this._rawModule.actions = rawModule.actions
    }
    if (rawModule.mutations) {
      this._rawModule.mutations = rawModule.mutations
    }
    if (rawModule.getters) {
      this._rawModule.getters = rawModule.getters
    }
}

Vuex在鏈接與整合模塊的時(shí)候使用了其中兩個(gè)方法，addChild、getChild。類(lèi)ModuleCollection在鏈接時(shí)需要找到模塊（getChild）然后給模塊添加子模塊（addChild）的功能，所以這兩個(gè)方法是在整合模塊時(shí)最重要的。

抽取模塊中的內(nèi)容

上面的一組方法，是為了更好的完成模塊的鏈接，給散落的單一模塊整理成一個(gè)模塊樹(shù)可以提供便捷的封裝方法，下面要說(shuō)的方法什么叫做抽取模塊中的內(nèi)容？將這些方法暴露給外面可以方便的去獲取這個(gè)模塊內(nèi)的一些內(nèi)容來(lái)使用。

forEachValue是Vuex封裝的工具方法，用于遍歷對(duì)象的。

export function forEachValue (obj, fn) {
  Object.keys(obj).forEach(key => fn(obj[key], key))
}

這四個(gè)方法作用：

forEachChild ：遍歷模塊的子模塊

forEachGetter ：遍歷模塊中_rawModule.getters 這塊就應(yīng)該知道 _rawModule的作用了，我把模塊未加工時(shí)會(huì)有g(shù)etters屬性，存放這個(gè)模塊所有的getters方法（vuex的基本用法就不多講了），然后遍歷，

forEachMutation : 和forEachGetter類(lèi)似，只是換成了遍歷mutations

forEachAction : 和forEachGetter類(lèi)似，只是換成了遍歷actions

這四個(gè)方法就是遍歷這些內(nèi)容，有意義嗎？

意義很大,目前_rawModule上這些getters、mutations、actions屬性并不會(huì)生效，只是單純的一個(gè)屬性，如何讓他們可以成為那種，被dispatch、commit使用的那種方法呢？先給大家一個(gè)小提示，mutations、actions都是要被注冊(cè)的，注冊(cè)之前總要獲取到這些內(nèi)容，具體的實(shí)現(xiàn)方式后面的章節(jié)會(huì)詳細(xì)講述，

總結(jié)

加工后真正的module（我們稱(chēng)由Module這個(gè)類(lèi)實(shí)例化出來(lái)為真正的module）只是緩存了一些內(nèi)容，并且給外界提供了一堆方便高效的方法。這些方便高效的方法為之后的注冊(cè)action、mutation。整合state都起了很關(guān)鍵的作用。所以說(shuō)module這個(gè)小單元為下面的代碼提供了很大便利，
額外思考我們對(duì)一段內(nèi)容需要頻繁的處理并且處理方式大同小異的時(shí)候，是不是可以像module一樣整理成一個(gè)對(duì)象，然后給外界提供一些方法。（有一種面向?qū)ο笏枷耄?/p>

下一章講述action和mutation是如何調(diào)用的

我是一個(gè)應(yīng)屆生，最近和朋友們維護(hù)了一個(gè)公眾號(hào)，內(nèi)容是我們?cè)趶膽?yīng)屆生過(guò)渡到開(kāi)發(fā)這一路所踩過(guò)的坑，已經(jīng)我們一步步學(xué)習(xí)的記錄，如果感興趣的朋友可以關(guān)注一下，一同加油~