用mobx構建大型專案的最佳實踐(2)
摘要：
用mobx構建大型專案的最佳實踐
有朋友在讀了上篇文章之後，希望我能出個demo
。於是我做了一個簡單的專案來實踐上文中所講到的理念。
倉庫地址
mobx-best-practice-example
下面簡要介紹一下專案結構及開發流...
有朋友在讀了上篇文章之後，希望我能出個demo
。於是我做了一個簡單的專案來實踐上文中所講到的理念。
倉庫地址
下面簡要介紹一下專案結構及開發流程，以幫助各位同學更好的理解專案。
目錄結構
專案根目錄為./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
)的訪問路徑。