JS Full-Select function code optimization

Original: JS full-select function code optimization

JS Full-Select function code optimization

Recently in the JavaScript MVC book, also feel that the code is not elegant, so I have been trying to use another mode to write the JS code, so for the previous simple JS full-select function to do a simple demo, using the current encoding method to re-encode, Of course you will always write your own code in this way. Here is the following code:

JS All code:

/** JS Select all * @class Checkall * @param {Object} cfg * @param {element|selector} [Cfg.container] to restrict all containers * @param {Selecto R} Cfg.checkall All marquee * @param {selector} Cfg.checkitem sub -Marquee*/ functionCheckall (cfg,callback) {varSelf = This;  This. config =CFG;  This. Container = $ (cfg.container) | |document.body; //Select all custom Events     This. Container.delegate (Cfg.checkall, ' Change ',function(e) {$ (e.target). Trigger (' Checkallchange ');    }); //single-Selection custom events     This. Container.delegate (Cfg.checkitem, ' Change ',function(e) {$ (e.target). Trigger (' Checkitemchange ');    }); //Select all Operation     This. Container.delegate (Cfg.checkall, ' Checkallchange ',function(e) {varChecked =self.isitemchecked (E.target);        Self._checkall (checked); //Select all child nodesself._allchildrenchecked (checked); Callback&& $.isfunction (callback) &&callback (self);    }); //single-selection operation     This. Container.delegate (Cfg.checkitem, ' Checkitemchange ',function(e) {//Check if all child nodes are selected        if(self._ischildrenchecked ()) {Self._checkall (true); }        Else{Self._checkall (false); } Callback&& $.isfunction (callback) &&callback (self); });  }; $.extend (checkall.prototype,{/** Select a single checkbox * @param item * @param _ischeck*/_checkitem:function(item, _ischeck) {Item=$ (item); Item.prop (' Checked ', _ischeck); },    /** Select/deselect all all Select buttons * @method _checkall {Private} * @param {Boolean} _ischeck*/_checkall:function(_ischeck) {varSelf = This;  This. Container.find (SELF.CONFIG.CHECKALL). each (function(index,item) {varisallchecked =self.isitemchecked (item); if(Isallchecked!==_ischeck)            {Self._checkitem (Item,_ischeck);    }        }); },    /** Select/deselect all sub-nodes * @method _allchildrenchecked {private}*/_allchildrenchecked:function(_ischeck) {varSelf = This;  This. Container.find ( This. Config.checkitem). each (function(index,item) {varitemchecked =self.isitemchecked (item); if(Itemchecked!==_ischeck)            {Self._checkitem (item, _ischeck);     }        }); },    /** If all the child nodes are selected*/_ischildrenchecked:function(){        varIscheckall =true; varSelf = This;  This. Container.find ( This. Config.checkitem). each (function(index,item) {if(!self.isitemchecked (item)) {Ischeckall=false;        }        }); returnIscheckall; },    /** Check if an element is selected*/isitemchecked:function(item) {return$ (item). Is (": Checked"); },     /** Get all selected values or attributes into an array * @todo such as to get the ID of all items selected or the properties of all other items * @method getValues {public} * @param {elems,attr} element all DOM nodes get attribute value corresponding to element * @return return array {rets}*/getValues:function(elems,attr) {varSelf = This, RETs= []; $ (Elems). each (function(index,item) {varIsboolean =self.isitemchecked (item); if(Isboolean &&$ (item). Prop (attr)) {                varCurattr =$ (item). Prop (attr);            Rets.push (CURATTR);        }        }); returnRETs; } });

The HTML code is as follows:

<Divclass= "Check-list">    <HR>    <Divclass= "J_checklistcontainerbasic">        <h4>Basic use</h4>        <Divclass= "Check-all">            <label>Select All<inputtype= "checkbox"class= "J_checkall"></label>            <ulclass= "Sub-checkbox">                <Li><label>Selected<inputtype= "checkbox"class= "J_checkitem"value= "1"></label></Li>                <Li><label>Selected<inputtype= "checkbox"class= "J_checkitem"value= "2"></label></Li>                <Li><label>Selected<inputtype= "checkbox"class= "J_checkitem"value= "3"></label></Li>            </ul>        </Div>    </Div></Div>

JS initialization is as follows:

var checkall=  new  checkall ({            '. J_checklistcontainerbasic ',            '. J_checkall ',            '. J_checkitem '        },function() {            console.log('. Checkall.getvalues ('. J_checkitem ', "value");        });

Of course, in order to see the effect, I also provided a Jsfiddler address for preview:

JS Full Select function Demo