上一篇:
有朋友在读了上篇文章之后,希望我能出个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
)的访问路径。
最后
欢迎star
,pr
,有什么问题也可以提issue
。