前端模块化实践（约定篇）

做为新泽西风格的追随者，我们追求设计最简化，最大限度减少任何冗余的设计负担。

因为我们的开发基于 component，所以这里要谈的部分内容多数只适用于使用 Component 的模块化开发。

项目结构

1. 扁平化，项目直接使用的模块都在client文件夹下面，远程模块都在components文件夹下面。示例如下：

   

2. 每个页面一个文件夹，如果需要多页面的话。

命名

1. view模块后面应带有-view后缀，其它不限制(因为暂时还没有很多)。

2. 每个模块下的模板文件统一命名为template.html，css文件命名为style.css，主要js文件命名为index.js，这样可省去大部分起名的苦恼，使用快捷键找到文件也容易的多。

3. css样式命名。因为组件很可能在一个项目中可以多次出现，所以统一采用className做为一个顶级父类，这个className应当就是组件的名称，这样完全可以避免冲突 ，例如组件data-view的样式大致如下：

   .data-view .list {
   } 
   .data-view .list li {
   } 
   .data-view .input {
   }
   

接口

1. 避免选项式接口，使用链式接口，因为选项式接口往往需要猜测参数的默认值，造成不必要的理解成本，另外链式的接口也更容易掌握必填的参数。

   //不好的方式
   var dialog = new Dialog({
   el: el,
   closable: true,
   modal: true,
   resiable: true
   })
   
   //好的方式
   var dailog = new Dialog(el)
   .closable()
   .modal()
   .resiable()
   

2. 以DOM为参数的接口应当统一使用原生的Element对象（或者统一jQuery对象，不过要注意component官方组件都是原生的Element对象做参数）

3. 严格限定可变参数接口，最多一个可变参数。可变参数确实可以增强调用的灵活性，但是过于灵活会破坏自身的简单性，得不偿失。

调用

1. 禁止使用jQuery的Ajax方法，统一使用superagent，因为jQuey的Ajax内部过于复杂化，API设计也不够简单。

2. 需要同时发起多个请求时才可以使用Promise模式，但是应当避免多处使用相同promise对象，因为这会很容易带来不必要的耦合，并增大调试的难度，正确的做法应当是传递回调函数。

3. 父view可以获取子view的属性，但是必须避免直接改变子view的属性，应当由子view暴露方法给父view调用，这样做的目的是提高模块的内聚性。

4. 任何view模块都必须实现remove方法，它的作用是销毁自身dom，并移除全部事件。

下一篇将介绍一些我最常用的轻量级工具，它们不限于模块化开发使用，但是在模块化的开发中可以更大程度发挥它们的效力。