项目结构主要参考了redux的官方实例todomvc,在todomvc的基础上,将开发目录放到了app文件夹中,简化了目录结构;其次,用fetch写了一个api层,集中出来接口请求;样式是用less处理,配置了webpack loader解析less;webpack中配置了开发测试发布三个环境。
项目结构说明
- project
- app
------------------------------------控制器,操作actions
- api
-----------------------抽象出来的fetch方法
- components
----------------------组件
- constants
----------------------------常量
- containers
--------------容器,调用组件组织页面
- image
-------------------------------图片
- less
---------------------------------less
- lib
-----------------------------库
- reducers
-----------相当于state的状态机,每个类代表一个state
- store
-------------------------控制中心,一般不做改变
- index.js
---------------------------项目入口
- dev
-------------------------------测试和开发环境根目录
- dist
---------------------------------发布环境根目录
- node_modules
-------------------依赖的库
- webpack.config
------------------打包环境
- webpack.product.config
-------------生产环境
- app
项目展望
由于目前项目还比较简单,现有架构还是可以满足开发的,但是如果项目进一步复杂,还有那些地方可以改进呢?
-
组件进一步细分,同理less
现在组件全部放在了components
当中,当组件过多的时候会很不好管理。可能在里面再按container
细分组件组。
-
reducers是否可以进一步抽象?
现在设计的reducers
相当于一个扁平化的state
管理器,当时当项目复杂时(例如:我要删除一篇文章的同时,要删除文章和分类的绑定),如何复合的处理state
,当前的reducers
只满足一个reducers
对应一个state
,是否可以抽象出一个common-reducer
作为基础reducers
。
欢迎交流