近日，看了玉伯写的《构建前端UI组件的新思路》一文，让我追忆起去年自己分享的一篇P文《随感协同开发的JS设计模式》，有几分共鸣……
话说去年支付宝新版收银台项目中，我就小试了一把这种组件编码模式，点滴心得，这里和大家做一个交流：
回顾一下之前说到的抽象类，对设计模式有所了解的同学可能会觉得有些眼熟，没错，初一看，觉得它很像一个抽象工厂，但是结合下面的基础类来看，你会发觉我并没有在各基础类中，重写getVessel,show,hide等方法，而是直接继承了抽象类中的这些方法。一定会有人不解为什么要这么做，无他，就因为他是JS,而非JAVA。一定的偶合度换来足够的灵活在我看来一点都不过分，更何况这个抽象类是必须确保绝对稳定的，他在成形后不允许被随意修改那是必须的。
AP.widget.basic = new AP.Class({
setOptions:function(options){
//接口设置
},
initialize:function(targets,options){
//初始化方法，目的是建立targets子集元素和某方法的关联
},
getVessel:function(target){
//获取满足target映射关系的容器
},
bindEvents:function(target,vessel){
//这里绑定target的触发动作
},
action:function(){
//target绑定的事件触发的执行函数，包含你要执行的逻辑
},
show:function(){
//显示容器
},
hide:function(){
//隐藏容器
},
setInterface:function(){
//设置各组件共用接口
}
})
setOptions:function(options){
//接口设置
},
initialize:function(targets,options){
//初始化方法，目的是建立targets子集元素和某方法的关联
},
getVessel:function(target){
//获取满足target映射关系的容器
},
bindEvents:function(target,vessel){
//这里绑定target的触发动作
},
action:function(){
//target绑定的事件触发的执行函数，包含你要执行的逻辑
},
show:function(){
//显示容器
},
hide:function(){
//隐藏容器
},
setInterface:function(){
//设置各组件共用接口
}
})