JS全選機能コード最適化

原文:
JS全選機能コード最適化
JS全選機能コード最適化
    最近はjavascript MVCの本を読んでいますが、自分の書いたコードも優雅ではないと感じています.だからずっと他のモードでJSコードを作りたいです.前の簡単なJS全選択機能に対して簡単なデモを作って、今のコード方式で再コードを作ります.もちろん今後はずっとこのような方式で自分のコードを作ります.下記のコードです.
 JSのすべてのコード:

/**

 * JS  

 * @class Checkall

 * @param {Object} cfg

 * @param {Element|selector} [cfg.container]        

 * @param {selector} cfg.checkAll    

 * @param {selector} cfg.checkItem    

 */

 function CheckAll(cfg,callback) {

    var self = this;



    this.config = cfg;



    this.container = $(cfg.container) || document.body;



    //        

    this.container.delegate(cfg.checkAll,'change',function(e){

        $(e.target).trigger('checkAllChange');

    });



    //        

    this.container.delegate(cfg.checkItem,'change',function(e){

        $(e.target).trigger('checkItemChange');

    });



    //     

    this.container.delegate(cfg.checkAll,'checkAllChange',function(e){

    

        var checked = self.isItemChecked(e.target);



        self._checkAll(checked);



        //        

        self._AllChildrenChecked(checked);



        callback && $.isFunction(callback) && callback(self);

    });



    //     

    this.container.delegate(cfg.checkItem,'checkItemChange',function(e){

        

        //              

        if( self._isChildrenChecked()){

            self._checkAll(true);

        }

        else {

            self._checkAll(false);

        }

        callback && $.isFunction(callback) && callback(self);

    });

 };

 

 $.extend(CheckAll.prototype,{

    

    /*

     *     checkbox

     * @param item

     * @param _isCheck

     */

    _checkItem: function(item, _isCheck ){

        item = $(item);

        item.prop('checked', _isCheck);

    },

    /*

     *   /          

     * @method _checkAll {private}

     * @param {Boolean} _isCheck

     */

    _checkAll: function(_isCheck){

        var self = this;

        this.container.find(self.config.checkAll).each(function(index,item){

            var isAllChecked = self.isItemChecked(item);

            if(isAllChecked !== _isCheck) {

                 self._checkItem(item,_isCheck);

            }

        });

    },

    /*

     *   /         

     * @method _AllChildrenChecked {private}

     */

     _AllChildrenChecked: function(_isCheck){

        var self = this;

        this.container.find(this.config.checkItem).each(function(index,item){

            var itemChecked = self.isItemChecked(item);

            if( itemChecked !== _isCheck){

                self._checkItem(item, _isCheck);

            }

        });

     },

    /*

     *             

     */

    _isChildrenChecked: function(){

        var isCheckAll = true;

        var self = this;

        this.container.find(this.config.checkItem).each(function(index,item){

            if(!self.isItemChecked(item)) {

                isCheckAll = false;

            }

        });

        return isCheckAll;

    },

    /*

     *            

     */

     isItemChecked: function(item) {

        return $(item).is(":checked");

     },

     /*

      *                     

      * @todo            id             

      * @method getValues {public} 

      * @param {elems,attr}      dom             

      * @return      {rets}

      */

     getValues: function(elems,attr) {

        var self = this,

            rets = [];

        $(elems).each(function(index,item){

            var isboolean = self.isItemChecked(item);

            if(isboolean && $(item).prop(attr)) {

                var curAttr = $(item).prop(attr);

                rets.push(curAttr);

            }

        });

        return rets;

     }

 });

HTMLコードは以下の通りです

<div class="check-list">

    <hr>

    <div class="J_CheckListContainerBasic">

        <h4>    </h4>



        <div class="check-all">

            <label>   <input type="checkbox" class="J_CheckAll"></label>

            <ul class="sub-checkbox">

                <li><label>   <input type="checkbox" class="J_CheckItem" value="1"></label></li>

                <li><label>   <input type="checkbox" class="J_CheckItem" value="2"></label></li>

                <li><label>   <input type="checkbox" class="J_CheckItem" value="3"></label></li>

            </ul>

        </div>

    </div>

</div>

JS初期化は以下の通りです.

var checkAll=  new CheckAll({

            container: '.J_CheckListContainerBasic',

            checkAll: '.J_CheckAll',

            checkItem: '.J_CheckItem'

        },function(){

            console.log(checkAll.getValues('.J_CheckItem',"value"));

        });

もちろん効果を見るために、私もJSFIddlerアドレスをプレビューに提供しました.
JS全選機能のデモンストレーション