提高复用性的目的
1.遵循DRY原则 - 不要重复自己代码
2.减少代码量，节省开销
什么是好的复用
1.对象可以再重复使用，不用修改
2.重复代码少
3.模块功能单一
减少代码数量，高效复用代码
1.桥接模式
目的：通过桥接代替耦合
应用场景：减少模块之间的耦合
2.享元模式
目的：减少对象/代码数量
应用场景：当代码中创建了大量类似对象和类似的代码块
3.模板方法模式
目的：定义一系列操作的骨架，简化后面类似操作的内容
应用场景：当项目中出现很多类似操作内容
基本结构
享元模式的基本结构
1.只需一个类，不需要new一百次弹窗。
2.这个类只保留所有弹窗共有的，每个弹窗不同的部分留作为一个公共享元。
//有一百种不同文字的弹窗，每种弹窗行为相同，但是文字和样式不同，我们没必要新建一百个弹窗对象
function pop(){
}
//保留同样的行为
pop.prototype.action=function(){
}
pop.prototype.show=function(){
//显示弹窗
}
//提取出每个弹窗会不同的部分作为一个外部数组
var popArr = [
{text:'this is window',style:[400,400]},
{text:'this is window2',style:[400,200]}
]
var poper=new Pop();
for (var i=0;i<100;i++){
poper.show(popArr[i]);
}
桥接模式的基本结构
对于3种形状\每种形状有3种颜色的需求，可以不用创建9种不同颜色的不同形状
//有三种形状，每种形状有3种颜色
function rect(color){
showcolor(color);
}
function circle(color){
showcolor(color);
}
function delta(color){
showcolor(color);
}
function showcolor(color){
}
//...红色..绿色.黄色
//需要一个红色的圆形
new circle('red');
模板方法模式的基本结构
导航组件多种多样，可能后面还会新增类型，那么我们不妨写一个基础的组件类，然后具体的实现，延迟到具体的使用时
//有三种形状，每种形状有3种颜色
//编写导航组件，有的带消息提示，有的是竖着，有的是横着
function baseNav(){
//基础类，此处定下基本骨架
}
baseNev.prototype.action = function(fn){
//特异性的处理，流出一个回调等待具体实现
}
应用示例
享元模式的示例
1.文件上传
需求：项目中有一个文件上传功能，该功能可以上传多个文件。
function uploader(fileType,file){
this.fileType=fileType;
this.file = file;
}
uploader.prototype.init=function(){
//初始化文件上传的html
}
uploader.prototype.delete=function(){
//删除掉该html
}
uploader.prototype.uploading=function(){
//上传
}
var fileob1,fileob2,fileob3,fileob4
new uploader('img',fileob1);
new uploader('txt',fileob2);
new uploader('img',fileob3);
new uploader('word',fileob4);
//享元模式下优化
var data = [{type:'img',file:fileob1},{type:'txt',file:fileob2},{type:'img',file:fileob3},{type:'word',file:fileob4}]
function uploader(){}
uploader.prototype.init=function(){
//初始化文件上传的html
}
uploader.prototype.delete=function(){
//删除掉该html
}
uploader.prototype.uploading=function(fileType,file){
//上传
}
var uploader = new uploader();
for(var i=0;i<data.length;i++){
uploader.uploading(data[i].type,data[i].file);
}
2.jQuery的extend
需求：extends方法，需要判断参数数量进行不同的操作。
$.extends({a:1})
$.extends({a:1},{b:1})//{a:1,b:1}
function extend(){
var target = arguments[0];
var source;
if(arguments==1){
target=this;
source=arguments[0];
}else{
target=arguments[0];
source=arguments[1];
}
for(var item in source){
target[item] = source[item];
}
// if(arguments == 1){
// for(var item in arguments[0]){
// this[item]=arguments[0][item]
// }
// }else{
// for(var item in arguments[1]){
// arguments[0][item]=arguments[1][item]
// }
// }
}
桥接模式的示例
1.创建不同的选中效果
需求：一组菜单。上面每种选项，都有不同的选中效果
function menuItem(){
this.word = word;
this.dom = document.createElemen('div');
this.dom.innerHTML=this.word;
this.color = color;
}
menuItem.prototype.bind = function(){
var self = this;
this.dom.onmouseover = function(){
this.style.color=self.color.colorOver;
}
this.dom.onmouseout = function(){
this.style.color=self.color.colorOut;
}
}
function menuColor(colorover,colorout){
this.colorOver=colorover;
this.colorOut = colorout;
}
var data = [{word:'menu1',color:['red','black']},{word:'menu2',color:['red','black']},{word:'menu3',color:['blue','black']}]
for(var i=0;i<data.length;i++){
new menuItem(data[i].word,new menuColor(data[i][0],data[i][1])).bind();
}
2.Express中创建get等方法
需求：express中有get,post等等方法，有七八个，如何方便快速地创建。
var methods=['get','post','delete','put'];
methods.forEach(function(method){
app[method]=function(){
route[method].apply(route,slice.call(arguments,1));
}
})
methods.forEach(function(method){
Route.prototype[method]=function(){
var handles = flatten(slice.call(arguments));
for(var i=0;i<handles.length;i++){
var handle = handles[i];
if(typeof handle !== 'function'){
var type=toString.call(handle);
var msg = 'Route.' + method + '() requires a callback function but got a' + type
throw new Error(msg);
}
debug('%s %o',method,this.path)
var layer = Layer('/',{},handle);
layer.method=method;
this.methods[method] = true;
this.stack.push(layer);
}
return this;
}
})
模板方法模式的示例
1.编写一个弹窗组件
需求：项目有一系列弹窗，每个弹窗的行为，大小，文字都会不同
function basePop(word,size){
this.word = word;
this.size = size;
this.dom = null;
}
basePop.prototype.init = function(){
var div = document.createElement('div');
div.innerHTML = this.word;
div.style.width = this.size.width + 'px';
div.style.height = this.size.height + 'px';
this.dom = div;
}
basePop.prototype.hidden = function(){
this.dom.style.display = 'none';
}
basePop.prototype.confirm = function(){
this.dom.style.display = 'none';
}
function ajaxPop(word,size){
basePop.call(this,word,size);
}
ajaxPop.prototype = new basePop();
var hidden=ajaxPop.prototype.hidden;
ajaxPop.prototype.hidden=function(){
hidden.call(this);
console.log(1);
}
var confirm=ajaxPop.prototype.confirm;
ajaxPop.prototype.confirm=function(){
confirm.call(this);
$.ajax();
}
2.封装一个算法计算器
需求：现在我们有一系列自己的算法，但是这个算法常在不同的地方需要增加一些不同的操作
function counter(){
this.beforeCounter = [];
this.afterCounter = [];
}
counter.prototype.addBefore = function(){
this.beforeCounter.push(fn)
}
counter.prototype.addAfter = function(){
this.afterCounter.push(fn)
}
counter.prototype.count = function(){
var _resultnum = num;
var _arr = [baseCount];
_arr=this.beforeCounter.concat(_arr);
_arr=_arr.concat(this.afterCounter);
function baseCount(num){
num+=4;
num*=4;
return num;
}
while(_arr.length > 0){
_resultnum=_arr.shift()(_resultnum);
}
return _resultnum;
}
var countObject = new counter();
countObject.addBefore(function(num){
num--;
return num;
})
countObject.addAfter(function(num){
num*=2;
return num;
})
countObject.count(10);
JavaScript的组合和继承
1.组合
-JavaScript最初没有专门的继承，所以最初JavaScript推崇函数式编程，然后进行统一组合桥接到一起
-桥接模式可以看出组合的一种体现，组合的好处是耦合低，方便方法复用，方便扩展
2.继承
-在es6出现class和extend，继承的方式多种多样，但是都是各有弊端
-模板方法模式可以看出继承的一种体现，继承的好处是可以自动获得父类的内容和接口，方便统一化
小结
1.桥接模式
通过独立方法间得桥接来形成整体功能，这样每个方法都可以被高度复用
2.享元模式
提取出公有部分，私有部分作为外部数据传入。从而减少对象数量
3.模板方法模式
当一个功能朝着多样化发展，不妨先定义一个基础得，把具体实现延迟到后面
