コンポーネントの書き方

6624 ワード

component javascript

なぜコンポーネントを書くのですか?ここではコンポーネント,プラグイン,コントロールを細分化せず,その原因を追及することはコードを多重化し,より速い開発効率を追求することにほかならない.実はもう一つ重要な原因があります.プロジェクトが大きくなってから、メンテナンスが難しいです.このとき、プロジェクトの重複部分を抽出して、コンポーネントを形成します.しかし、コンポーネントにも「欠点」があります.これは最後に言います.
コンポーネント要件
図のような条件セレクタを実装するには
ある時、プロジェクトの時間が緊張して、直接図を切って、jqueryのdomセレクタを通じてこの“簡単な機能”を実現します.
需要分析
このコンポーネントをよりよく維持し、よりよく多重化するためには、抽象的にする必要があります.

データ層:ボタンの個数およびボタンが

を選択するか否かを決定するために用いる.

表現層:ボタンは既存のuiコンポーネント

を使用する.

論理層:ボタンイベント等の論理処理

データ層

data: null,
choseT: 0,
choseF: 0,
getDataStatistics: function() {
    var list = this.data;
    var choseT = 0;
    var choseF = 0;
    var len = list.length;
    for (var i = 0; i < list.length; i++) {
        if(list[i].checked == 'checked') {
            choseT++;
        }else {
            choseF++;
        }
    }
    return {
        choseT: choseT,
        choseF: choseF,
        len: len
    };
},
dataChangeAll: function(checked) {
    var list = this.data;
    var len = list.length;
    checked = checked || '';
    if(checked == 'checked') {
        this.choseT = len;
        this.choseF = 0;
    }else {
        this.choseT = 0;
        this.choseF = len;
    }

    for (var i = 0; i < len; i++) {
        list[i].checked = checked;
    }
},
dataChangeSingle: function(index, checked) {
    var list = this.data;
    var choseT = this.choseT;
    var choseF = this.choseF;
    if(checked == 'checked') {
        choseT++;
        choseF--;
    }else {
        choseT--;
        choseF++;
    }
    this.choseT = choseT;
    this.choseF = choseF;
    list[index].checked = checked;
}

データ層は主に元のデータに対してCURDのいくつかの操作をして、具体的な操作は具体的な業務の需要を見て、しかしこの意識を持っていなければなりません.
ひょうげんそう
表現層、すなわちtemplate層またはview層は、ユーザーが見ているように、bootstrapのような比較的成熟したuiライブラリを使用するのが一般的です.

getHtml: function(list, statistic) {
    var html = 
        ['',
           '',
               '',
                   this.getChoseNav(statistic),
               '',
               '',
                    this.getChoseItem(list),
               '',
           '',
        ''].join('');
    return html;
},
getChoseNav: function(statistic) {
    var checkAll = '';
    var checkNone = '';
    var len = statistic.len;
    if(statistic.choseT == len) {
        checkAll = 'checked';
    }
    if(statistic.choseF == len) {
        checkNone = 'checked';
    }
    return [
        '',
            '',
            '  ',
        '',
        '',
            '',
            '   ',
        ''
    ].join('');
},
getChoseItem: function(list) {
    var inputs = '';
    var doInputFunc = function(i, detail) {
        return [
            '',
                '',
                    ''+detail.name+'',
                '',
            '',
        ].join('');
    };

    for (var i = 0; i < list.length; i++) {
        inputs += doInputFunc(i, list[i]);
    }
    return inputs;
},
domAction: function($el, type, data) {
    var html = '';
    type = type || 'all';
    if(type == 'item') {
        html = this.getChoseItem(data);
        $el.find('.J_view_checkItems').html(html);
    }else if(type == 'all') {
        html = this.getChoseNav(data);
        $el.find('.J_view_checkNav').html(html);
    }
}

周知のようにtemplateはデータに基づいてhtmlにレンダリングされ、spaプロジェクトでは特に重要である.
ろんりそう
このレイヤは主にtemplateメソッドを呼び出してデータをページにレンダリングします.ページ上のイベント結果の一部をデータ層にマッピングします.実は今流行しているMVVMモデルは、論理層でもっと多くのことをしたが、開発者たちは細部の処理に関心を持つ必要がなく、ビジネスの開発に専念している.

eventBind: function($el) {
    var _this = this;
    var $target = '';
    
    //   
    $el.on('change', '.J_view_checkAll', function() {
        if(!$(this).parent().hasClass('checked')) {
            _this.module.dataChangeAll('checked');
            _this.view.domAction($el, 'all', _this.module.getDataStatistics());
            _this.view.domAction($el, 'item', _this.module.data);
        }
    });
    
    //    
    $el.on('change', '.J_view_checkNone', function() {
        if(!$(this).parent().hasClass('checked')) {
            _this.module.dataChangeAll('');
            _this.view.domAction($el, 'all', _this.module.getDataStatistics());
            _this.view.domAction($el, 'item', _this.module.data);
        }
    });
    
    //   
    $el.on('click', '.J_view_checkItem', function() {
        $target = $(this);
        var index = $target.val();
        var checked = '';
        if($target.prop('checked')) {
            checked = 'checked';
        }
        _this.module.dataChangeSingle(index, checked);
        _this.view.domAction($el, 'all', _this.module.getDataStatistics());
    });
},
eventUnbind: function($el) {
    $el.off('change');
    $el.off('click');
},

完全なケース
まとめ
このように書くと、共通部分をより抽象化することができ、他のモジュールではデータを転送すればいいので、コードを繰り返しコピーする必要はありません.
最初はコンポーネントに「欠点」があると言いましたか?特にビジネスコンポーネント?
ぶんせき
プロジェクトバージョンの反復は正常なことです.第1版の場合、このデータ選択項目というコンポーネントは、各モジュールにこのようなニーズがあります.しかし、次のバージョンでは、プロダクトマネージャがモジュールの1つでビジネスニーズを変更したため、このモジュールのデータ選択項目は、他のモジュールのデータ選択項目とは異なりますが、80%または90%の類似度があり、この場合は非常に困っています.いったい書き直すのか、それとも元のコンポーネントに互換性のある構成項目を追加するのか.
書き直すと重複するコードがたくさんあります.新しい構成項目は、以前のすべてのモジュールが正しく、過去を検証しなければならないことを保証する必要があります.直接検証すればいいと思う人もいるでしょうが、プロジェクトが大きくなったら、一つ一つ検証するのは問題を解決する方法ではありません.
最終的な解決
コンポーネントを書くとき、ビジネスロジックセクションでは、後でビジネスが変更されるように構成項目を予約し、構成項目によってリセットします.特にプロダクトマネージャは頻繁に変更されると思います.
本当に変更ロジックが大きいと思ったら、書き直しましょう.前のモジュールを一つ一つ検証するコストが大きいからです.
テキストアドレスhttp://tostring.site/2016/07/16/%E6%80%8E%E4%B9%88%E5%86%99%E5%A5%BD%E7%BB%84%E4%BB%B6/

Bootstrapをカスタマイズして自分のサイトを開発する6つの方法

Windowsプラットフォームの下でLiunxをシミュレートしてGCC環境を使ってCのSOライブラリをコンパイルします.