前端结构 の 里程碑(v3)

最近三个月我们一直在不断调整前端结构,目的在于提升 前端开发的一致性和复用性,先后提出了 前端结构 の 调整建议(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_迹远 的论述