提高復(fù)用性的目的

1.遵循DRY原則 - 不要重復(fù)自己代碼
2.減少代碼量墩虹，節(jié)省開銷

什么是好的復(fù)用

1.對象可以再重復(fù)使用，不用修改
2.重復(fù)代碼少
3.模塊功能單一

減少代碼數(shù)量哗伯，高效復(fù)用代碼

1.橋接模式
目的：通過橋接代替耦合
應(yīng)用場景：減少模塊之間的耦合
2.享元模式
目的：減少對象/代碼數(shù)量
應(yīng)用場景：當(dāng)代碼中創(chuàng)建了大量類似對象和類似的代碼塊
3.模板方法模式
目的：定義一系列操作的骨架，簡化后面類似操作的內(nèi)容
應(yīng)用場景：當(dāng)項目中出現(xiàn)很多類似操作內(nèi)容

基本結(jié)構(gòu)

享元模式的基本結(jié)構(gòu)

1.只需一個類猫妙，不需要new一百次彈窗串绩。
2.這個類只保留所有彈窗共有的，每個彈窗不同的部分留作為一個公共享元枉圃。

//有一百種不同文字的彈窗功茴，每種彈窗行為相同，但是文字和樣式不同孽亲，我們沒必要新建一百個彈窗對象
function pop(){

}
//保留同樣的行為
pop.prototype.action=function(){

}
pop.prototype.show=function(){
    //顯示彈窗
}
//提取出每個彈窗會不同的部分作為一個外部數(shù)組
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]);
}

橋接模式的基本結(jié)構(gòu)

對于3種形狀\每種形狀有3種顏色的需求坎穿，可以不用創(chuàng)建9種不同顏色的不同形狀

//有三種形狀，每種形狀有3種顏色
function rect(color){
    showcolor(color);
}
function circle(color){
    showcolor(color);
}
function delta(color){
    showcolor(color);
}
function showcolor(color){
    
}
//...紅色..綠色.黃色
//需要一個紅色的圓形
new circle('red');

模板方法模式的基本結(jié)構(gòu)

導(dǎo)航組件多種多樣返劲，可能后面還會新增類型玲昧，那么我們不妨寫一個基礎(chǔ)的組件類，然后具體的實現(xiàn)篮绿，延遲到具體的使用時

//有三種形狀孵延，每種形狀有3種顏色
//編寫導(dǎo)航組件，有的帶消息提示亲配，有的是豎著尘应，有的是橫著
function baseNav(){
    //基礎(chǔ)類，此處定下基本骨架
}
baseNev.prototype.action = function(fn){
    //特異性的處理吼虎，流出一個回調(diào)等待具體實現(xiàn)
}

應(yīng)用示例

享元模式的示例

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);

//享元模式下優(yōu)化
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方法思灰，需要判斷參數(shù)數(shù)量進行不同的操作娜饵。

$.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.創(chuàng)建不同的選中效果
需求：一組菜單。上面每種選項官辈，都有不同的選中效果

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中創(chuàng)建get等方法
需求：express中有g(shù)et,post等等方法，有七八個遍坟，如何方便快速地創(chuàng)建拳亿。

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.封裝一個算法計算器
需求：現(xiàn)在我們有一系列自己的算法，但是這個算法常在不同的地方需要增加一些不同的操作

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推崇函數(shù)式編程鹅经，然后進行統(tǒng)一組合橋接到一起
-橋接模式可以看出組合的一種體現(xiàn)寂呛，組合的好處是耦合低，方便方法復(fù)用瘾晃，方便擴展

2.繼承
-在es6出現(xiàn)class和extend贷痪，繼承的方式多種多樣，但是都是各有弊端
-模板方法模式可以看出繼承的一種體現(xiàn)蹦误，繼承的好處是可以自動獲得父類的內(nèi)容和接口劫拢，方便統(tǒng)一化

小結(jié)

1.橋接模式
通過獨立方法間得橋接來形成整體功能，這樣每個方法都可以被高度復(fù)用
2.享元模式
提取出公有部分强胰，私有部分作為外部數(shù)據(jù)傳入舱沧。從而減少對象數(shù)量
3.模板方法模式
當(dāng)一個功能朝著多樣化發(fā)展，不妨先定義一個基礎(chǔ)得偶洋，把具體實現(xiàn)延遲到后面