JS全選功能程式碼優化

JS全選功能程式碼優化

    最近在看javascript MVC那本書，也感覺到自己寫的程式碼也並不優雅，所以一直在想 用另一種模式來編寫JS程式碼，所以針對之前的簡單的JS全選功能來做個簡單的demo，使用目前現在的編碼方式來重新編碼，當然以後會一直用這種方式來編寫自己的程式碼。下面是如下程式碼：

 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全選功能演示