JavaScript plugin development tutorial (6): javascript plugin

JavaScript plugin development tutorial (6): javascript plugin

I. Opening Analysis

What do we say in this article today? Hey. Next we will rebuild the shortcomings in the previous article and analyze them in a simple way, so that we can gradually improve our performance. Speak nonsense and start with the question. Let's review the previous

The Js Code is as follows:

Copy codeThe Code is 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 cursor
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 span"). 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 "));
};

Shows the effect:

A) ------ inoperable

B) ------ operational status

(2) Open up ideas and reconstruct

It is not difficult to see from the code that the syntax features in "Js" have been effectively organized in an object-oriented manner, which is much better than the loose procedural form of organization, however, there are still many shortcomings.

(1) There are too many repeated codes.

(2) unclear division of duties

(3) incomplete process sorting

To effectively reconstruct the component based on the above points, we should first sort out the requirements of this component. The functions are as follows:

(1) initialize the Configuration component

Copy codeThe Code is 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 requires no modification. However, you can extend the function based on the above configurations. For example, adding the configuration item "mode" supports multiple options. For example, "checkbox check mode ".

The initialization logic is completed as follows:

Copy codeThe Code is as follows:
ISProto. init = function (){
Var that = this;
This. getOpts () ["current"] = null; // data cursor
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 span"). on ("click", function (){
ItemsElem. toggle ();
});
$. Each (this. getOpts () ["items"], function (I, item ){
Item ["id"] = (new Date (). getTime (). toString ();
That. _ render (item );
});
};

This Code contains a lot of problems and unclear responsibilities. The initialization logic includes the detailed implementation of function points.

Continue to see the rendering code:

Copy codeThe Code is 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. repetitive operations should be reasonably abstracted to achieve reuse.

The entire construction process includes initialization, rendering (event binding), related data operation methods, and auxiliary methods for dom operations.

To sum up, after a simple sorting, we should set up the function operation purpose and the task allocation of the main process line, each taking responsibility for it.

So the purpose of restructuring is clear, right! It is to abstract functional points and divide duties in a friendly way. How can we achieve this?

Step 1: Create a process function: (method Interface)

Copy codeThe Code is as follows:
ISProto. init = function (){
// Put you code here!
};
ISProto. _ render = function (){
// Put you code here!
};

Second, create an abstract method interface:

Copy codeThe Code is as follows:
ISProto. _ fnItemSelectorDelegateHandler = function (){
// Put you code here!
};
ISProto. _ fnTriggerHandler = function (){
// Put you code here!
};
ISProto. _ addOrRemoveClass = function (){
// Put you code here!
};

Step 3: create a data operation interface:

Copy codeThe Code is as follows:
ISProto. _ setCurrent = function (){
// Put you code here!
};
ISProto. _ getCurrent = function (){
// Put you code here!
};

For more information, see the complete source code below.

(3) complete code for learning. This code has been tested.

Copy codeThe Code is as follows:
Function ItemSelector (elem, opts ){
This. elem = elem;
This. opts = opts;
This. current =-1; // data cursor
};
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 */
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 */
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 "));
};
　　

(4). Conclusion

(1) Rational Analysis of functional requirements using object-oriented thinking methods.

(2) organize our plug-in logic in the form of classes.

(3) How should we rebuild the above instances rationally? Do not over-design. It is easy to use. We recommend that you use a combination of Procedural Design and object-oriented design.

(4) In the next article, related functions will be extended. For example, if the attribute "mode" is "1", the checkbox multi-choice mode is supported. Now it is only the default drop-down mode.

Looking at my article, isn't it much better than the previous code? You should also think more about your own projects and try to make your code more reasonable.