用mobx構建大型專案的最佳實踐(2)

嫌疑犯X發表於2019-02-17

上一篇:

用mobx構建大型專案的最佳實踐

有朋友在讀了上篇文章之後，希望我能出個demo。於是我做了一個簡單的專案來實踐上文中所講到的理念。

倉庫地址

mobx-best-practice-example

下面簡要介紹一下專案結構及開發流程，以幫助各位同學更好的理解專案。

目錄結構

專案根目錄為 ./src（可通過package.json內的basePath配置） 頁面目錄為 pages， 跨頁面通用業務元件目錄為 components。兩個目錄僅僅業務含義不同，但store和action的組織方式一致。

以 pages目錄為例（components下的元件同理）

    |--pages
      |--aPage
            |--index.tsx
            |--index.scss
            |--aComponet
                  |--index.tsx
                  |--index.scss
            |--actions
                  |--nameaAction.ts
                  |--namebAction.ts
            |--stores
                  |--nameaStore.ts
                  |--namebStore.ts
    |--components
        同pages結構
複製程式碼

store或者action的所在頁面名稱和檔名稱暗示了元件內獲取對應例項的路徑
如 在元件檔案index.tsx裡，

@inject(({rootStore, rootAction}) => {
    return {
        storeA: rootStore.aPage.nameaStore,
        actionA: rootAction.aPage.nameaAction
    }
})
class AComponent extends React.Component{
    
}
複製程式碼

實現上述功能的核心程式碼在mobx目錄內。

  • 1、mStore 和mAction裝飾器收集需要註冊的store和action的class
  • 2、provider根據收集到的store和action按照頁面劃分結構，並注入到根元件中。
  • 3、各級子元件通過 mobx-react提供的inject來獲取需要的store和action
  • 4、action和store按需例項化，action例項化時會傳入當前頁面的store和action，也可以通過第3、4個引數拿到rootStore 和rootAction
  • 藉助zone.js確保store的方法呼叫只能限制在action內

腳手架

新增前端頁面或者元件

node tools/add-page.js [page-path] 
-m   建立mobx相關檔案 xxStore,xxAction
-c   建立通用元件，所有檔案會生成到components目錄下，其他沒區別
更多命令通過 node tools/add-page.js -h 檢視
# 如
node tools/add-page.js home -m
node tools/add-page.js home/aComponent -m  //建立頁面內的元件
複製程式碼

刪除前端頁面目錄或者元件目錄

node tools/rm-page.js [page-path] 
# 如
node tools/rm-page.js home
node tools/rm-page.js home/aComponent
複製程式碼

以上兩個命令除了生成或者刪除對應檔案，還會更新mobxDependence.js檔案對所有store和action檔案的引用. 如果是手動新增刪除，需要手動去引入或刪除對應store和action檔案的引用。

型別宣告

在用腳手架建立或刪除元件時，均會更新typings/index.d.ts,以便獲得更好的程式碼提示。

ts transformer plugin

所在目錄 ./transformer

可以發現元件裡store和action的裝飾器並未顯式的指定本身的訪問路徑(當然也可以手動指定)，這正是這個ts外掛所發揮的作用，通過store(action)所在的目錄和檔名暗示store(action)在rootStore(rootAction)的訪問路徑。

最後

歡迎star,pr,有什麼問題也可以提issue。

相關文章