摘要：學(xué)習(xí)的步伐不能就此停止，今天的文章，將會(huì)提及開發(fā)的另一個(gè)原則單一職責(zé)原則。通俗點(diǎn)說(shuō)就是一個(gè)函數(shù)只做一件事，下面將會(huì)通過(guò)幾個(gè)實(shí)例，探究單一職責(zé)原則。遵守單一職責(zé)的實(shí)例太多了，下面簡(jiǎn)單列舉一下。在市面上，也有是違反單一職責(zé)的。

上篇文章寫了添加擴(kuò)展性方面的重構(gòu)，講到了開放封閉原則。學(xué)習(xí)的步伐不能就此停止，今天的文章，將會(huì)提及開發(fā)的另一個(gè)原則：?jiǎn)我宦氊?zé)原則。通俗點(diǎn)說(shuō)就是一個(gè)函數(shù)只做一件事，下面將會(huì)通過(guò)幾個(gè)實(shí)例，探究單一職責(zé)原則。

單一職責(zé)的定義可以理解為：一個(gè)對(duì)象或者方法，只做一件事。

遵守單一職責(zé)的實(shí)例太多了，下面簡(jiǎn)單列舉一下。

原生的API方面

trimRight()和trimLeft()：trimRight 只負(fù)責(zé)去除右邊的空白，其它地方一概不管。 trimLeft 只負(fù)責(zé)去除右邊的空白，其它地方也一概不關(guān)。

concat()： concat 只負(fù)責(zé)連接兩個(gè)或更多的數(shù)組，并返回結(jié)果。不會(huì)涉及刪除數(shù)組的操作。

toFixed(): toFixed 只把 Number 類型的值四舍五入為指定小數(shù)位數(shù)的數(shù)字。不會(huì)執(zhí)行其它操作。

JQuery 的 API

$.each() 只負(fù)責(zé)遍歷，要處理什么，自己再動(dòng)手操作。

css() 只負(fù)責(zé)設(shè)置 DOM 的 style ，不會(huì)設(shè)置 innerHTML 。

animate() 只負(fù)責(zé)執(zhí)行 CSS 屬性集的自定義動(dòng)畫，不會(huì)涉及其它操作。

說(shuō)是這樣說(shuō)，但是大家看著可能會(huì)有點(diǎn)懵，看不出來(lái)遵守單一原則有什么好處，下面看一個(gè)實(shí)例。

如下例子：

現(xiàn)有一批的錄入學(xué)生信息，但是數(shù)據(jù)有重復(fù)，需要把數(shù)據(jù)根據(jù) id 進(jìn)行去重。然后把為空的信息，改成"--"。

let students=[
    {
        id:5,
        name:"守候",
        sex:"男",
        age:"",
    },
    {
        id:2,
        name:"浪跡天涯",
        sex:"男",
        age:""
    },
    {
        id:5,
        name:"守候",
        sex:"",
        age:""
    },
    {
        id:3,
        name:"鴻雁",
        sex:"",
        age:"20"
    }
];

function handle(arr) {
    //數(shù)組去重
    let _arr=[],_arrIds=[];
    for(let i=0;i{
        for(let key in item){
            if(item[key]===""){
                item[key]="--";
            }
        }
    });
    return _arr;
}
console.log(handle(students))

運(yùn)行結(jié)果沒有問題，但是大家想一下，

1.如果改了需求，比如，學(xué)生信息不會(huì)再有重復(fù)的記錄，要求把去重的函數(shù)去掉，無(wú)論，就是整個(gè)函數(shù)都要改了，還影響到下面的操作。

2.如果項(xiàng)目另一個(gè)地方也是同樣的操作，但是不需要去重。這樣只能再寫一個(gè)基本一樣的函數(shù)，因?yàn)樯厦娴暮瘮?shù)無(wú)法復(fù)用。如下

function handle1(arr) {
    //數(shù)組深拷貝
    let _arr=JSON.parse(JSON.stringify(arr));
    //遍歷替換
    _arr.map(item=>{
        for(let key in item){
            if(item[key]===""){
                item[key]="--";
            }
        }
    });
    return _arr;
}

3.如果項(xiàng)目有一個(gè)地方還需要根據(jù) ID 排序。這樣還是得寫一個(gè)函數(shù)，因?yàn)樵诓荒茉谏厦娴暮瘮?shù)上面排序。

function handle2(arr) {
    //數(shù)組去重
    let _arr=[],_arrIds=[];
    for(let i=0;i{
        for(let key in item){
            if(item[key]===""){
                item[key]="--";
            }
        }
    });
    //根據(jù)ID排序
    _arr.sort((item1,item2)=>item1.id-item2.id);
    return _arr;
}

這樣的問題就是在于，面對(duì)需求的變化，不能靈活的處理。函數(shù)也基本沒辦法復(fù)用。

下面使用單一原則構(gòu)造一下

let handle={
    //數(shù)組去重
    removeRepeat(arr){
        let _arr=[],_arrIds=[];
        for(let i=0;i{
            for(let key in item){
                if(item[key]===""){
                    item[key]="--";
                }
            }
        });
        return arr;
    },
    //根據(jù)id排序
    sortForId(arr){
        return arr.sort((item1,item2)=>item1.id-item2.id);
    }
};
//去重
students=handle.removeRepeat(students);
//設(shè)置信息
students=handle.setInfo(students);
console.log(students);

結(jié)果一樣，而且這樣的方式，可以使得方法可以組合使用，更加的靈活，也方便復(fù)用。

如果還需要根據(jù)ID排序，就在上面代碼執(zhí)行結(jié)果的基礎(chǔ)上，再加一行代碼即可。

//根據(jù)ID排序
students=handle.sortForId(students);
console.log(students);

如果原始數(shù)據(jù)不需要去重，設(shè)置完信息之后，直接排序

let students=[
    {
        id:5,
        name:"守候",
        sex:"男",
        age:"",
    },
    {
        id:2,
        name:"浪跡天涯",
        sex:"男",
        age:""
    },
    {
        id:5,
        name:"守候",
        sex:"",
        age:""
    },
    {
        id:3,
        name:"鴻雁",
        sex:"",
        age:"20"
    }
];
//設(shè)置信息
students=handle.setInfo(students);
//根據(jù)ID排序
students=handle.sortForId(students);

這樣操作起來(lái)，即使以后需求有改動(dòng)，在可控的范圍內(nèi)，可以靈活的組合使用，函數(shù)也可以復(fù)用。

如果覺得要讓 students 連續(xù)賦值麻煩，可以借鑒 JQuery 的鏈?zhǔn)秸{(diào)用方式。

let ec=(function () {
    let handle=function (obj) {
        this.obj=JSON.parse(JSON.stringify(obj));
    };
    handle.prototype={
        /**
         * @description 去重
         */
        unique(){
            //根據(jù)id數(shù)組去重
            let _arr=[],_arrIds=[];
            for(let i=0;i{
                for(let key in item){
                    if(item[key]===""){
                        item[key]="--";
                    }
                }
            });
            return this;
        },
        sortForId(){
            this.obj.sort((item1,item2)=>item1.id-item2.id);
            return this;
        },
        /**
         * @description 返回處理結(jié)果
         * @return {Array|*}
         */
        end(){
            return this.obj;
        }
    }
    //暴露構(gòu)造函數(shù)接口
    return function (obj) {
        return new handle(obj);
    }
})();
let students=[
    {
        id:5,
        name:"守候",
        sex:"男",
        age:"",
    },
    {
        id:2,
        name:"浪跡天涯",
        sex:"男",
        age:""
    },
    {
        id:5,
        name:"守候",
        sex:"",
        age:""
    },
    {
        id:3,
        name:"鴻雁",
        sex:"",
        age:"20"
    }
];
//根據(jù)id去重和設(shè)置"--"
students=ec(students).unique().setInfo().end();
console.log(students)

結(jié)果還是一樣，只是增加了一個(gè)方法，方便鏈?zhǔn)秸{(diào)用。

關(guān)于實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用，這個(gè)肯定是會(huì)增加代碼的，如果調(diào)用的方法并不是一些常用，通用的方法的話，只是處理一些特殊格式的數(shù)據(jù)的方法（如上實(shí)例），不建議花費(fèi)時(shí)間，實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用，普通調(diào)用就好。如果是一些常用的函數(shù)的封裝，就建議使用鏈?zhǔn)秸{(diào)用。

在上面的實(shí)例里面，相信大家都看到了，遵守單一職責(zé)的好處，但是單一職責(zé)也有缺點(diǎn)，就是會(huì)增加代碼的復(fù)雜程度。

在市面上，也有API是違反單一職責(zé)的。

JQuery 的 html() 方法，既可以獲取 innerHTML ，也可以設(shè)置 innerHTML 。 attr ()既可以獲取 DOM 元素的某一個(gè)屬性，也可以設(shè)置 DOM 元素的某一個(gè)屬性。

在維護(hù)上面，這樣的代碼，可能會(huì)給維護(hù)增加難度，但是對(duì)于使用者而言，這樣簡(jiǎn)化了使用。這應(yīng)該是一個(gè)取舍關(guān)系，取什么，舍什么。這個(gè)就是具體情況具體分析。

今天的例子就到這里了，這個(gè)例子，解釋降解函數(shù)單一原則會(huì)有什么好處。這個(gè)例子比上篇文章的例子還要簡(jiǎn)單。大家看不明白，把代碼拷貝在瀏覽器上運(yùn)行，就很好理解。如果大家對(duì)這個(gè)例子有什么更好的建議，或者代碼上有什么問題，歡迎在評(píng)論區(qū)留言，大家多交流，相互學(xué)習(xí)。

---------------------華麗的分割線---------------------

想了解更多，關(guān)注關(guān)注我的微信公眾號(hào)：守候書閣