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

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

由于咱们的开发基于 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，并移除所有事件。

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