摘要：今天說一下，單一職責原則。比如，接口的地址本來已經很完美了，但是你的是處女座最討厭處女座非要給路由添加幾個以保證后臺數據的安全。為了過年，我會選擇使用，因為不知道處女座以后會做出什么傻事來。此時的使用動態織入后，可以完美的解決處女座。

在設計模式中，有著幾條視為黃金原則，設計模式都是圍繞黃金原則，對代碼或者說是架構設計做出一些相應的調整，久而久之，GoF 4人組，發現其實有些設計思想可以稱為模式，能實現代碼復用的好處，從而設計模式出世。其實，這些模式的基石就是黃金原則，所以，接下來會對這些原則進行詳細的解析。今天說一下，單一職責原則。

單一職責原則，英文名叫做SRP.即,Single responsibility principle (裝個逼). 我們從字面上，差不多已經完全可以理解這個原則所要表達的意思。在js中，函數永遠是一等公民，而函數所代表的就是一份職責。 一個函數完成一個功能，最后編織成了我們的js程序。

前面差不多把模式基本的梳理了一遍，要知道，每個模式里面或多或少會包含一些原則。。。(我編不下去)

說人話呀~~~ 俺們看不懂!!!
客官對不起，小的這就給你上栗子。

直接來干貨。在代理模式中，大家還記得這個例子嗎？圖片的加載

在未引入代理模式的時候是這樣寫的

var delayload = (function(){
    var img = document.querySelector("#img");
    img.src = "loading.gif";
    var newImg = document.createElement("img");
    newImg.onload = function(){
        img.src = newImg.src;
    }
    return function(src){
        newImg.src = src;
    }
})();
delayload("jimmy.jpg");

我們分析一下，在delayload里面存在了兩個原則，一個是給本體的img設置src,還有一個是，虛擬構建一個Img節點來加載圖片，最后在加載完成的時候，修改本體的src. 這樣寫，沒錯，如果在沒有其他的需求之前，這個代碼可以算是比較完美的。 但是，你的產經永遠不會這么一心一意，有時候，會讓你把，等待加載的圖片換掉，有時候。。。

所以為了擴展性考慮，我們可以參考單一職責原則，修改如下：

//將背景圖設置，和圖片加載的src修改分開
var delayload = (function(){
    var img = document.querySelector("#img");
    return {
        setSrc:function(src){
            img.src = src;
        }
    }
})();
var proxy = (function(){
    var img = document.createElement("img");
    img.onload = function(){
        delayload.setSrc(img.src);
    }
    return {
        setSrc:function(src){
            delayload.setSrc("loading.gif");
            img.src = src;
        }
    }
})();
proxy.setSrc("jimmy.jpg");

這樣一方面，對于本體img設置src的功能我們可以完美的保留下來。

相信大家都遇到這個問題，向后臺請求數據，然后渲染到頁面上。說具體一點就是，像這樣的

一本圖書的信息，有他的img,title,author這3部分內容。 我們的職責就是，向后臺請求相關的數據,然后將數據渲染到頁面。而我們目前的職責就是兩個，獲取數據，然后渲染數據。

var data = {
    img:"http://7xpsmd.com1.z0.glb.clouddn.com/16-1-24/19756676.jpg",
    title:"JS權威指南"，
    author:"David Flaagan"
}

http.getBooks = function(url,callback){
    $.ajax(url)
    .then((data)=>{
        itera(data,callback);
    })
}
//要知道，這里的data可能不只一個,我們需要進行遍歷
var itera = function(data,callback){
    for(var i = 0,book;book = data[i++];){
        callback(data); //渲染data
    }
}
//請求數據，并且渲染數據
http.getBooks("www.example.com",function(){
    console.log("渲染數據");
});

簡單流程是這樣的，從大的方面來看，職責確實只有兩個，但是我們實現的時候，會發現，本體中嵌套一個for循環，會把添加節點函數帶入，這樣耦合性會增大，所以這里加了一個迭代器模式，讓迭代器來表示循環，即，我的渲染函數只和迭代器發生關系，而你原來的ajax請求是怎么實現的我并不清楚。

可以看出，職責的劃分不是一眼就能看出來的，那怎么看嘞？

其實，我也不知道，看感覺唄，有時候感覺來了，擋都擋不住.

上面已經說過了，SRP是在模式應用中，最簡單的一個，同樣也是應用最廣的一個。回想一下，我們在寫單例的時候,通常的格式是一個閉包+一個變量就over了。

var Weather = function() {}
var getSingle = (function() {
    var single;
    return function(obj) {
        if (single === undefined) {
            return single = obj;
        }
        return single;
    }
})();
var weather1 = getSingle(new Weather());  //原始的Weather
var weather2 = getSingle(new Weather());  //存儲的single

這里，將單例類和獲取單例的工廠分開來。 工廠可以無限制使用，單例類也可以執行他獨特的行為。 這樣做是極好的。 當然，我們也可以創造不同的工廠出來。

這個是緩存一個功能函數的結果，應用場景主要在加載額外的模板文件時，使用

var getSingle = function(fn){
    var result;
    return function(){
        return result || (result = fn.apply(this,arguments));
    }
}

AOP我們應該算是閱人無數的級別了， 在很多地方都是用過他，職責鏈模式，裝飾者模式等。而AOP也是完美體現SRP原則的。

首先，他本身的書寫都是符合SRP原則

Function.prototype.before = function(fn){
    var _this = this;
    return function(){
        fn.apply(this,arguments);  //值為Boolean，表示是否繼續向下傳遞
        return    _this.apply(this,arguments);
    }
}

將AOP的概念抽象化，然后就可以直接使用beofre。

通常我們可以將AOP運用到，修改url參數，傳遞權限的業務上面。 比如，接口的地址本來已經很完美了，但是你的leader是處女座(最討厭處女座),非要給url路由添加幾個token以保證后臺數據的安全?，F在有兩條路給你，要么直接改動路由，要么可以使用AOP進行改動。 為了過年，我會選擇使用AOP，因為不知道處女座以后會做出什么傻事來。

function dealUrl(url){
    url+=param.getToken();
}
http.ajax = http.ajax.before(dealUrl);
http.ajax("www.example.com");   //此時的Url = www.example.com?token=23jkfd3kjfdksjfkjds

使用before動態織入后，可以完美的解決處女座。

實話說，我真的不知道。 我這里只有幾條我認為比較好的經驗給大家，因為如果過分追求設計的話，你的程序復雜度將會爆炸!!!。 在合適的時間，合適的位置使用，這才是SRP的難點。

說一下，不是用SRP原則的時候把。

分清行為和動作。 我們只是用SRP區分動作，而不過分劃分行為。行為就是: 創建div,添加類，修改attr等基本操作。 動作就是 將行為組合在一起達到的效果，比如發送請求，渲染節點。 這類比較抽象的動作。

要以第一感覺為主，如果感覺這樣劃分職責沒錯，使用SRP恰到好處，那就干吧。 反正以后自已挖的坑自己也得補回來，要知道，沒有重構過的代碼，永遠是不能看的(說的是我。。。)。

其實有時候，從正面走不行，我們可以嘗試一下逆向思維，想想，你平常沒有使用SRP原則是什么時候就可以了。這樣能夠幫助你思維的發展，也能讓你寫出一手好代碼。