Dojo/dom-class Source Learning

The Dom-class module is the operation of dojo with respect to an element class attribute (attributes differ from attributes), and the main methods are:

• Contains determines whether an element contains a CSS class
• Add a CSS class for the element
• Remove removes a CSS class
• Replace replaces another CSS class with a CSS class
• Toggle Switch A CSS class

For browsers that support Classlist, you can use the method provided by Calsslist, but there are few browsers that support this property, which seems to be supported only by Firefox and Chrome. Dojo uses a common method here: Change the value of the classname.

//Example:            //ADD classes at once:            //    | Require (["dojo/dom-class"], function (domclass) {            //    | Domclass.add ("Somenode", "FirstClass secondclass");            //    | });            //            //Example:            //ADD classes at once (using array):            //    | Require (["dojo/dom-class"], function (domclass) {            //    | Domclass.add ("Somenode", ["FirstClass", "Secondclass"]);            //    | });

Many of the methods in the module, such as Add, remove, and replace, can add a continuous class string (the class is connected to the class with a space: "Class1 class2 class3") or you can add a class array. In dojo internal processing, all of the "Class1 class2 class3" This form of conversion to an array. Is the Str2array method:

varCls//Exports ObjectSpaces =/\s+/, a1 = [""]]; functionStr2array (s) {if(typeofs = = "string" | | SinstanceofString) {            //a single string            if(S &&!)Spaces.test (s)) {a1[0] =s; returnA1; }            varA =s.split (spaces); //remove the preceding whitespace characters, such as: "String"            if(A.length &&!a[0]) {a.shift (); }            //remove the trailing whitespace characters, such as: "String"            if(A.length &&!a[a.length-1]) {a.pop (); }            returnA; }        //assumed to is an array        if(!s) {            return []; }        //Normal Array        returnArray.filter (s),function(x) {returnx;}); }

In my understanding, the process of removing the whitespace characters is verbose, and the Dojo/_base/lang module has a trim method, which is used to remove the whitespace characters before and after. It can be called directly, but it doesn't seem to be written by a single person.

　　

Contains, add, remove these three functions belong to the basic method in this module, understand the code of this module also need to know a core principle is: These methods are all classname and new class the tail and the new space: "Class1 class2 class3"; Newclass ", which is handled by string manipulation, which improves processing efficiency and avoids performance problems caused by multiple browsers redrawing.

First look at the contains method:

ContainsfunctionContainsclass (/*domnode| String*/Node/*String*/classstr) {            //Summary:            //Returns Whether or not the specified classes is a portion of the            //class list currently applied to the node.            //node:string| Domnode            //String ID or domnode reference to check the class for.            //classstr:string            //A String class name to the look for.            //Example:            //Do something if a node with id= "Somenode" have class= "Asillyclassname" present            //    | if (Dojo.hasclass ("Somenode", "Asillyclassname")) {...}            return("" + Dom.byid (node) [ClassName] + ""). IndexOf ("" + Classstr + "") >= 0);//Boolean},

After adding a space between classname and Classstr, the IndexOf method of string type is used to determine if there is a classstr.

AddfunctionAddClass (/*domnode| String*/Node/*string| Array*/classstr) {Node=Dom.byid (node); //Convert to ArraysClassstr =Str2array (CLASSSTR); varCLS =Node[classname], Oldlen; //Add a space characterCLS = CLS? "+ CLS +" ":" "; Oldlen=cls.length; //Classstr to judge, not exist with the CLS and add in             for(vari = 0, Len = classstr.length, C; i < Len; ++i) {C=Classstr[i]; if(c && Cls.indexof ("" + C + ") < 0) {CLS+ = C + ""; }            }            //If the CLS changes, use the new classname            if(Oldlen <cls.length) {Node[classname]= Cls.substr (1, cls.length-2);//Remove the trailing white space characters            }        }

RemovefunctionRemoveclass (/*domnode| String*/Node/*string| Array?*/classstr) {Node=Dom.byid (node); varCLS; if(Classstr!==undefined) {                //This is similar to the idea in the Add methodClassstr =Str2array (CLASSSTR); CLS= "" + Node[classname] + "";  for(vari = 0, len = classstr.length; i < Len; ++i) {                    //remove the class from the ClassstrCLS = Cls.replace ("" + Classstr[i] + "", ""); } CLS=Lang.trim (CLS); }Else{//No second parameter removes all classCLS = ""; }            if(Node[classname]! = CLS) {Node[classname] =CLS;} }

The Replace method is described below, as the name implies, and the substitution is usually removed and then added. If you delete the same node, add class will cause the browser to redraw, so introduced here Fakenode to reduce the number of browser redraw, improve performance.

ReplacefunctionReplaceclass (/*domnode| String*/Node/*string| Array*/ADDCLASSSTR,/*string| Array?*/removeclassstr) {Node=Dom.byid (node); //use Fakenode to avoid the browser redraw during removal and additionFakenode[classname] =Node[classname];            Cls.remove (Fakenode, REMOVECLASSSTR);            Cls.add (Fakenode, ADDCLASSSTR); if(Node[classname]!==Fakenode[classname]) {Node[classname]=Fakenode[classname]; }        }

The toggle method allows you to switch controls on a set of classes, where they are deleted and not added.

TogglefunctionToggleclass (/*domnode| String*/Node/*string| Array*/CLASSSTR,/*A Boolean?*/condition) {Node=Dom.byid (node); if(Condition = = =undefined) {Classstr=Str2array (CLASSSTR);  for(vari = 0, Len = classstr.length, C; i < Len; ++i) {C=Classstr[i]; Cls[cls.contains (node, c)? "Remove": "Add"] (node, c); }            }Else{cls[condition? "Add": "Remove"] (node, CLASSSTR); }            returnCondition//Boolean}

Looking at how dojo is implemented, using toggle to operate on a set of class switches causes the browser to redraw multiple times, and we can completely blend the classname and classstr, then replace them one at a time, or, as in replace, Use Fakenode to prevent multiple redraws.

TogglefunctionToggleclass (/*domnode| String*/Node/*string| Array*/CLASSSTR,/*A Boolean?*/condition) {Node=Dom.byid (node); if(Condition = = =undefined) {Classstr=Str2array (CLASSSTR); Fakenode[classname]= Node[classname];//prevent multiple repainting with Fakenode                                 for(vari = 0, Len = classstr.length, C; i < Len; ++i) {C=Classstr[i]; Cls[cls.contains (node, c)? "Remove": "Add"] (Fakenode, c); }                                //Redraw once                if(Node[classname]!==Fakenode[classname]) {Node[classname]=Fakenode[classname]; }            }Else{cls[condition? "Add": "Remove"] (node, CLASSSTR); }            returnCondition//Boolean}

If you think this article is helpful to you, please do not hesitate to click on the bottom right "recommended", Thank you ~

Dojo/dom-class Source Learning