最近三个月我们一直在不断调整前端结构,目的在于提升 前端开发的一致性和复用性,先后提出了 前端结构 の 调整建议(v1),前端结构 の 调整新建议(v2)。
最近两周,基于 Jimmy 的实践经验,与目前团队不断的交流融合,在 6月24日,我们有了新共识,到达了一个新的里程碑。
原则
- 可理解性是首要的,通过明确的约定以保持良好的一致性;
- 创建和业务相关的 典型案例,便于团队模仿、学习和理解;
- 鼓励尝试,容忍犯错,凝聚团队共识,渐进改造现有代码;
三个顶级目录
- imodules 模块;
- ipages 页面;
- iscripts 脚本;
目录结构示例
├── imodules/
│ ├── base/
│ ├── embed/
│ ├── hour24/
│ ├── repair/
│ └── xbase/
├── ipages/
│ ├── home/
│ └── repair/
└── iscripts/
├── immy/
├── vendor/
└── xlibs/
imodules(模块)
模块划分目的在于将复杂问题进行分解,提升独立性,降低耦合度,促进复用,并行开发,以提升开发效率。
imodules
├── base
│ └── _baseUModules
├── embed
│ ├── EmbedBottom
│ └── EmbedTop
├── hour24
│ └── Hour24Matte
├── repair
│ ├── RepairMatte
│ └── RepairScreenSelect
└── xbase
└── _Matte
模块分类目录约定
1. 小写字母开头,驼峰风格,不使用中划线和下划线进行区隔,慎用数字;
2. 仅为源码分类使用,不在 dist 发布目录上体现;
3. 支持多级分类目录;模块实体目录约定
同时作为模块 id(元素 id),大写字母开头,驼峰风格,不使用中划线和下划线进行区隔,慎用数字;
特殊:下划线开头是允许的,表示内部基类;模块 id 和 元素 id 约定的说明
规则:大写字母开头,驼峰风格,不使用中划线和下划线进行区隔,慎用数字;
考虑:中划线使得正则复杂化;驼峰了就自然拒绝下划线;除非数字有意义,否则慎用数字;
base 非常特殊,和 xbase | _parts | partial 分离;
叶子节点示例
imodules/repair/RepairModal/
imodules/repair/RepairModal/
├── main.css
├── main.html
├── main.js
└── screen.tpl
模块 css 的加载问题
见 jacques_迹远 的论述