项目开始分析☞代码搭建

分析整个项目得功能，大体功能模块，代码大体搭建
例如：编辑器插件
写一个编辑器插件，初始化得时候需要配置大量参数，而且内部得功能很多很复杂，可以改变字体颜色大小，也可以前进后退。
一般一个页面就只有一个编辑器，而且里面得功能可能很复杂，可能需要调整颜色，字体等。也就是说可能还会调用其它类，然后将他们组合起来实现功能，这就适合用建造模式了。
建造模式介绍

function Model1（）{}
function Model2() {}
 
//最终使用得类
function Final(){
  this.model1=new Model1()
  this.model2=new Model2()
}
var obj=new Final()

回归正题：
编辑本身是一个类，给外调调用得接口需要一个控制参数初始化和页面渲染得类需要一个控制字体得类需要一个状态管理得类。
//编辑器本身，对外暴露

function Editor(){
  //编辑器里面就是将各个模块组合起来实现功能
  this.initer=new HtmlInit();
  this.fontController=new FontController();
  this.stateController=new StateController(this.fontController)
}
//初始化参数，渲染页面
function HtmlInit(){
}
HtmlInit.prototype.initStyle=function(){} //初始化样式
HtmlInit.prototype.renderDom=function(){} //渲染Dom
//字体控制器
function  FontController(){}
 FontController.prototype.changeFontColor=function(){} //改变字体颜色
 FontController.prototype.changeFontSize=function(){} //改变字体大小
function StateController(fontController){
  this.states=[] //一个数组，存储所有状态
  this.currentState=0; //一个指针，指向当前状态
  this.fontController=fontController;//将字体管理器注入，便于改变状态得时候改变字体
}

上面得代码就就将一个编辑器插件得架子搭起来了，具体实现功能就是往这些方法里面填入具体内容就行了，其实就是各个模块得相互调用，比如我们想要实现后退状态得功能就可以这样写：

StateController.prototype.backState=function(){
  var state=this.states[this.currentState-1] //取出上一个状态
  this.fontController.changeFontColor(state.color)//改回上次得颜色
  this.fontController.changeFontSize(state.size) //改回上次大小
}

总结：先搭项目大架子，然后实现内部具体内容。这样最后代码写的也不会很乱