再構成→保持関数の単一の役割

6536 ワード

再構築 es 6 javascript

1.はじめに
前の文章は拡張面を加えた再構成を書いて、開放閉鎖の原則を述べました.学習のペースはここでは止められません.今日の文章では、開発のもう一つの原則に言及します.単一職責原則です.通俗的に言えば、一つの関数は一つのことしかしません.以下はいくつかの実例を通して、単一の職責原則を探究します.
2.単一職責表現形式
単一職責の定義は、一つの対象または方法が、一つのことだけを行うということであると理解できる.
単一の職責を守る実例が多すぎます.簡単に列挙します.
生のAPIの方面
trimRight()とtrimLeft():trimRightは右側の空白を取り除くだけです.他のところは一切構いません.trimLeftは右側の空白を取り除くだけです.他のところも全部閉めません.
concat():concatは、2つ以上の配列を接続し、結果を返します.配列の削除には関与しません.
tofixed():toFixedはNumberタイプの値を四捨五入して小数点以下の数字を指定します.他の操作は実行されません.
JQueryのAPI
$each()は遍歴するだけで、何を処理するかは自分で操作します.
css()はDOMのstyleのみ設定し、inners HTMLは設定されません.
アニメーションはCSS属性セットのカスタムアニメーションのみを実行します.他の操作には関わりません.
このように言いますが、皆さんはちょっとぼんやりしているかもしれません.単一の原則を守るにはどんなメリットがありますか?
3.インスタンス-行列処理
以下の例:
学生情報の入力は既存のバッチですが、データは重複していますので、IDに基づいてデータを再入力する必要があります.空の情報を'--'に変えます.

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) {
    //    
    let _arr=[],_arrIds=[];
    for(let i=0;i{
        for(let key in item){
            if(item[key]===''){
                item[key]='--';
            }
        }
    });
    return _arr;
}
console.log(handle(students))

運行結果は大丈夫ですが、みんなで考えてみてください.
1.需要を変更したら、例えば、学生情報はもう重複した記録がないので、重い関数を削除するように要求します.つまり、関数全体が変更されても、次の操作に影響があります.
2.プロジェクトの他のところも同じ操作なら、重くする必要はありません.これは基本的に同じ関数しか書けません.上の関数は多重化できないからです.次のとおりです

function handle1(arr) {
    //     
    let _arr=JSON.parse(JSON.stringify(arr));
    //    
    _arr.map(item=>{
        for(let key in item){
            if(item[key]===''){
                item[key]='--';
            }
        }
    });
    return _arr;
}

3.プロジェクトに場所があれば、IDに基づいて並べ替える必要があります.このように関数を書きます.上の関数の上に並べ替えられないからです.

function handle2(arr) {
    //    
    let _arr=[],_arrIds=[];
    for(let i=0;i{
        for(let key in item){
            if(item[key]===''){
                item[key]='--';
            }
        }
    });
    //  ID  
    _arr.sort((item1,item2)=>item1.id-item2.id);
    return _arr;
}

このような問題は需要の変化に対して柔軟に対処できないことです.関数も基本的に多重できません.
以下は単一原則で構成します.

let handle={
    //    
    removeRepeat(arr){
        let _arr=[],_arrIds=[];
        for(let i=0;i{
            for(let key in item){
                if(item[key]===''){
                    item[key]='--';
                }
            }
        });
        return arr;
    },
    //  id  
    sortForId(arr){
        return arr.sort((item1,item2)=>item1.id-item2.id);
    }
};
//  
students=handle.removeRepeat(students);
//    
students=handle.setInfo(students);
console.log(students);

結果は同じであり、またこのような方法は、方法を組み合わせて使用することができ、より柔軟で、多重化も容易である.
IDによるソートが必要な場合は、上のコードの実行結果に基づいて、コードを追加すればいいです.

//  ID  
students=handle.sortForId(students);
console.log(students);

元のデータが重い必要がない場合は、情報を設定した後、直接並べ替えます.

let students=[
    {
        id:5,
        name:'  ',
        sex:' ',
        age:'',
    },
    {
        id:2,
        name:'    ',
        sex:' ',
        age:''
    },
    {
        id:5,
        name:'  ',
        sex:'',
        age:''
    },
    {
        id:3,
        name:'  ',
        sex:'',
        age:'20'
    }
];
//    
students=handle.setInfo(students);
//  ID  
students=handle.sortForId(students);

このように操作すれば、後で変更が必要であっても、制御可能な範囲内で、柔軟な組み合わせで使用でき、関数を多重化することができます.
studentsを連続して賦課するのが面倒だと思ったら、JQueryのチェーン式の呼び方を参考にしてもいいです.

let ec=(function () {
    let handle=function (obj) {
        this.obj=JSON.parse(JSON.stringify(obj));
    };
    handle.prototype={
        /**
         * @description   
         */
        unique(){
            //  id    
            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       
         * @return {Array|*}
         */
        end(){
            return this.obj;
        }
    }
    //        
    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'
    }
];
//  id     '--'
students=ec(students).unique().setInfo().end();
console.log(students)

結果は同じです.ただ一つの方法を追加しただけで、チェーンコールが便利です.
チェーンコールを実現するには、これは間違いなくコードを追加します.呼び出し方法が一般的ではなく、一般的な方法であれば、いくつかの特殊なフォーマットのデータを処理する方法(上記の例)だけで、時間がかかることを推奨しないで、チェーンコールを実現して、普通に調合すればいいです.いくつかの一般的な関数のパッケージであれば、チェーン呼び出しを使用することを推奨します.
4.単一職責原則に違反する
上の例では、みんなが見たと信じています.単一の職責のメリットを遵守します.しかし、単一の職責にも欠点があります.コードの複雑さを増加させます.
市场では、単一の役割に违反するAPIがあります.
JQueryのhtmlメソッドは、inners HTMLを取得することも、innersHTMLを設定することもできます.atr()は、DOM要素のある属性を取得することもでき、DOM要素のある属性を設定することもできます.
メンテナンス上、このようなコードはメンテナンスに難度を与えるかもしれませんが、使用者にとっては、このように簡単に使います.これは取舍选択関系で、何を取って、何を舍てるべきですか?これは具体的な状況を具体的に分析します.
5.まとめ
今日の例はここまでです.この例では、降解関数の単一原則を説明することに何かメリットがありますか?この例は前の文章の例よりも簡単です.みんなは分かりません.コードをブラウザにコピーして実行すると分かります.この例に対して、何かもっといい提案があれば、コードに何か問題がありますか?
-------------華麗なる分割線---------
もっと知りたいです.私のWeChat公式アカウントに注目してください.待ってください.

Type Script汎型