First, the opening analysis
What do we say to this article today? Hey, heh. We then went on to the inadequacies of the local reconstruction, in a simple way to gradually analyze, so that everyone has a step-by-step process of improvement. Cut the crap and get to the point. Let's take a look at the previous
JS part of the code, as follows:
Copy Code code as follows:
function Itemselector (elem,opts) {
This.elem = Elem;
This.opts = opts;
} ;
var isproto = Itemselector.prototype;
Isproto.getelem = function () {
return This.elem;
} ;
isproto.getopts = function () {
return this.opts;
} ;
/* Data manip*/
Isproto._setcurrent = function (current) {
This.getopts () [' current '] = current;
} ;
Isproto.getcurrentvalue = function (current) {
return this.getopts () [' Current '];
} ;
/* Data manip*/
Isproto.init = function () {
var that = this;
This.getopts () ["current"] = null; Data cursors
This._setitemvalue (This.getopts () ["Currenttext"]);
var Itemselem = That.getelem (). Find (". Content. Items");
This.getelem (). Find (". Title div"). On ("click", Function () {
Itemselem.toggle ();
}) ;
This.getelem (). Find (". Title spans"). On ("click", Function () {
Itemselem.toggle ();
}) ;
$.each (This.getopts () ["Items"],function (I,item) {
item["id" = (new Date (). GetTime ()). ToString ();
That._render (item);
}) ;
} ;
Isproto._setitemvalue = function (value) {
This.getelem (). Find (". Title div"). Text (value)
} ;
Isproto._render = function (item) {
var that = this;
var Itemelem = $ ("<div></div>")
. Text (item["text"])
. attr ("id", item["id"]);
if ("0" = = item["Disabled"]) {
Itemelem.on ("click", Function () {
var onChange = that.getopts () ["Change"];
That.getelem (). Find (". Content. Items"). Hide ();
That._setitemvalue (item["text"]);
That._setcurrent (item);
OnChange && OnChange (item);
})
. MouseOver (function () {
$ (this). addclass ("Item-hover");
})
. mouseout (function () {
$ (this). Removeclass ("Item-hover");
}) ;
}
else{
ITEMELEM.CSS ("Color", "#ccc"). On ("click", Function () {
That.getelem (). Find (". Content. Items"). Hide ();
That._setitemvalue (item["text"]);
}) ;
}
Itemelem.appendto (This.getelem (). Find (". Content. Items"));
} ;
The effect is shown in the following illustration:
A)------non-operational status
b------operable State
(ii), to open up ideas, to restructure
Everyone from the code is not difficult to see, has been through the "Js" in the grammatical characteristics of an object-oriented approach to an effective organization, than the loose process of organizing the form of a better way, but still will find a lot of deficiencies.
(1), there are too many duplicate code inside
(2) The division of responsibilities is not clear
(3), the process of carding is not sound
We are based on the above several effective refactoring, we first need to comb the requirements of this component, the function points are as follows:
(1) Initializing the configuration component
Copy Code code as follows:
$ (function () {
var itemselector = new Itemselector ($ ("#item-selector"), {
Currenttext: "Please Choose Item",
Items: [
{
Text: "JavaScript",
Value: "JS",
Disabled: "1"
} ,
{
Text: "Css",
Value: "CSS",
Disabled: "0"
} ,
{
Text: "Html",
Value: "HTML",
Disabled: "0"
}
] ,
}) ;
Itemselector.init ();
}) ;
This code is clear and does not require any modification, but you can use the above configuration extension features, such as adding configuration item "mode" to support a variety of options. such as: "checkbox check Mode".
The next step is to complete the initialization logic as follows:
Copy Code code as follows:
Isproto.init = function () {
var that = this;
This.getopts () ["current"] = null; Data cursors
This._setitemvalue (This.getopts () ["Currenttext"]);
var Itemselem = That.getelem (). Find (". Content. Items");
This.getelem (). Find (". Title div"). On ("click", Function () {
Itemselem.toggle ();
}) ;
This.getelem (). Find (". Title spans"). On ("click", Function () {
Itemselem.toggle ();
}) ;
$.each (This.getopts () ["Items"],function (I,item) {
item["id" = (new Date (). GetTime ()). ToString ();
That._render (item);
}) ;
} ;
This code has a lot of problems, the responsibility is not clear, initialization logic contains the details of the function point implementation.
Then continue to look at the render part code:
Copy Code code as follows:
Isproto._render = function (item) {
var that = this;
var Itemelem = $ ("<div></div>")
. Text (item["text"])
. attr ("id", item["id"]);
if ("0" = = item["Disabled"]) {
Itemelem.on ("click", Function () {
var onChange = that.getopts () ["Change"];
That.getelem (). Find (". Content. Items"). Hide ();
That._setitemvalue (item["text"]);
That._setcurrent (item);
OnChange && OnChange (item);
})
. MouseOver (function () {
$ (this). addclass ("Item-hover");
})
. mouseout (function () {
$ (this). Removeclass ("Item-hover");
}) ;
}
else{
ITEMELEM.CSS ("Color", "#ccc"). On ("click", Function () {
That.getelem (). Find (". Content. Items"). Hide ();
That._setitemvalue (item["text"]);
}) ;
}
Itemelem.appendto (This.getelem (). Find (". Content. Items"));
} ;
The problem is obvious, the discovery of repetitive operations, should be reasonable abstraction, has reached the purpose of reuse.
The entire build process includes initialization, rendering (event binding), and related data manipulation methods, as well as assistant methods for DOM operations.
To sum up, after a simple comb, we should establish the function of the operational purposes and the main process of task allocation, accountability.
So the purpose of our refactoring is clear, right! Is the abstraction of functional points and the division of friendly responsibilities, so how do we achieve that?
The first step is to establish the Process function method: (Method Interface)
Copy Code code as follows:
Isproto.init = function () {
Put your code here!
} ;
Isproto._render = function () {
Put your code here!
} ;
The second part is to establish the abstract method interface:
Copy Code code as follows:
Isproto._fnitemselectordelegatehandler = function () {
Put your code here!
} ;
Isproto._fntriggerhandler = function () {
Put your code here!
} ;
Isproto._addorremoveclass = function () {
Put your code here!
} ;
The third step is to establish the data operation interface:
Copy Code code as follows:
Isproto._setcurrent = function () {
Put your code here!
} ;
Isproto._getcurrent = function () {
Put your code here!
} ;
There are some references to the following complete source code, here just to say the train of thought.
(iii), complete code for learning, this code has been tested
Copy Code code as follows:
function Itemselector (elem,opts) {
This.elem = Elem;
This.opts = opts;
This.current =-1; Data cursors
} ;
var isproto = Itemselector.prototype;
/* Getter api*/
Isproto.getelem = function () {
return This.elem;
} ;
isproto.getopts = function () {
return this.opts;
} ;
Isproto._getcurrent = function () {
return this.current;
} ;
/* Getter api*/
/* Data manip*/
Isproto._setcurrent = function (current) {
This.current = current;
} ;
Isproto._setitemtext = function (text) {
This.getelem (). Find (". Title div"). text (text);
} ;
/* Data manip*/
/* Update on 2015 1/31 23:38 * *
Isproto._fntriggerhandler = function (index,text,value) {
if (this._isdisabled (value)) {
index =-1;
Text = this.getopts () ["Currenttext"];
}
This._setitemtext (text);
This._setcurrent (index);
This.getelem (). Find (". Content. Items"). Hide ();
} ;
Isproto._addorremoveclass = function (Elem,classname,addis) {
if (addIs) {
Elem.addclass (ClassName);
}
else{
Elem.removeclass (ClassName);
}
} ;
Isproto._fnitemselectordelegatehandler = function () {
var that = this;
This.getelem (). On ("click", "[Data-toggle]", function () {
That.getelem (). Find (". Content. Items"). Toggle ();
}) ;
} ;
isproto._isdisabled = function (value) {
Return ("1" = = value)? True:false;
} ;
/* Update on 2015 1/31 23:38 * *
Isproto.init = function () {
var that = this;
This._fnitemselectordelegatehandler ();
$.each (This.getopts () ["Items"],function (I,item) {
item["index"] = i;
That._render (item);
}) ;
This._fntriggerhandler (This._getcurrent (), this.getopts () ["Currenttext"], "1");
} ;
Isproto._render = function (item) {
var that = this;
var Itemelem = $ ("<div></div>"). Text (item["text"). attr ("id", item["index"));
var activeclass = ("0" = = item["Disabled"])? "Item-hover": "Item-disabled-hover";
Itemelem.on ("click", Function () {
That._fntriggerhandler (item["index"],item["text"],item["Disabled"]);
})
. MouseOver (function () {
That._addorremoveclass ($ (this), activeclass,true);
})
. mouseout (function () {
That._addorremoveclass ($ (this), activeclass,false);
}) ;
Itemelem.appendto (This.getelem (). Find (". Content. Items"));
} ;
(iv) The final summary
(1), the object-oriented thinking way to analyze the functional requirements rationally.
(2) To organize our plug-in logic in a class manner.
(3), continuously reconstruct the above example, how to carry out the reasonable reconstruction that? Do not design excessive, to be comfortable, the recommended way is the process of design and object-oriented design of the combination of ideas.
(4), the next article will expand the relevant features, such as "mode" This property, "1" Support checkbox multiple selection mode, is now the default Drop-down mode.
See me this article, is not better than the previous code a lot of good, small partners to do their own projects should also want to do more, try to make their own code more reasonable.
