提高复用性

提高复用性的目的

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

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

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

模板方法模式的示例

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.模板方法模式
当一个功能朝着多样化发展，不妨先定义一个基础得，把具体实现延迟到后面