Full documentation Development of a complete JavaScript component tutorial

There are some built-in controls alert,confirm in the browser, but these controls usually vary according to the browser vendor, and the visuals often don't meet the requirements of the UI designer. More importantly, the style of such built-in controls is hard to unify with the design styles of different styles of Internet products.

As a result, good front-end developers each develop their own personalized controls to replace the controls built into browsers. Of course, this type of component has been on the web for countless pretty good, writing the purpose of this article is to communicate with more developers, learn from each other and make progress together.

Function Introduction

Replace the alert, confirm control with the browser's own

Custom interface Styles

Basic consistency with built-in controls

Effect Preview

1. Alert control

2, confirm control

Development Process

1. Component Structure Design

First, let's look at the basics of how to use the built-in components:

The code is as follows	Copy Code
Alert ("Built-in alert control"); if (confirm) ("Close the built-in confirm control?") ")) { Alert ("True"); } else { Alert ("False"); }

To ensure that our components are used in the same way as the built-in controls, we must consider overwriting the built-in controls. Considering the unified style of component development, ease of use, easy maintenance, and object-oriented features, I plan to use the custom alert and confirm method as a class (Winpop) instance method, and finally to overwrite the system built-in controls with an instance method. In order to achieve the objective, my basic practice is as follows:

The code is as follows	Copy Code
var obj = new Winpop (); To create an Winpop instance object Overwrite Alert control Window.alert = function (str) { Obj.alert.call (obj, str); }; Overwrite confirm control window.confirm = function (str, CB) { Obj.confirm.call (obj, str, CB); };

Note that because the browser's built-in controls can block other browser behavior, and our custom components do not have the ability to do as much as possible, as we see on the preview, we use a full screen semitransparent mask layer when we play out the custom components. It is also because of these reasons that the confirm component is used in a number of subtle ways, from the built-in return Boolean to the method of using callback functions to ensure that the "OK" and "Cancel" logic can be added correctly. As a result, the way custom components are used becomes the following form:

The code is as follows	Copy Code
Alert ("Custom alert component"); Confirm ("Turn off the custom confirm component?") ", function (flag) { if (flag) { Alert ("True"); } else { Alert ("False"); } });

2. Component Code Design

Before we formally introduce the code for the Winpop component, let's take a look at the basic structure of a JavaScript component:

The code is as follows	Copy Code
(Function (window, undefined) { function Jsclassname (CFG) { var config = cfg | | {}; This.get = function (n) { return config[n]; } This.set = function (n, v) { Config[n] = v; } This.init (); } Jsclassname.prototype = { Init:function () {}, Othermethod:function () {} }; Window. jsclassname = window. Jsclassname | | Jsclassname; }) (window);

Using a custom anonymous function to wrap up our component code, minimizing global pollution, and finally attaching our class to the global Window object, is a more recommended practice.

The GET, set method in the constructor is not necessary, it is only the author's personal habits, I think it can unify the configuration parameters and other components internal global variables cache and read calls, also seems to have more object-oriented type. Readers are welcome to talk about their own ideas and say how good it is to write.

Next, let's look at the complete code for the Winpop component:

The code is as follows

Copy Code

(Function (window, jQuery, undefined) { var htmls = { OVL: ' <div class= ' j_winpopmask winpop-mask ' id= ' j_winpopmask ' ></div> ' + ' <div class= ' J_winpopbox Winpop-box "id=" J_winpopbox "> ' + ' <div class=" J_winpopmain winpop-main "></div> ' + ' <div class=" j_ Winpopbtns winpop-btns "></div> ' + ' </div>", Alert: ' <input type= ' button ' class= ' j_altbtn pop-btn alert-button ' value= ' OK ' > ', Confirm: ' <input type= button ' class= "J_cfmfalse pop-btn confirm-false" value= "Cancel" > ' + ' <input type= "button" class= "J_cfmtrue pop-btn confirm-true" value= "OK" > } function Winpop () { var config = {}; This.get = function (n) { return config[n]; } This.set = function (n, v) { Config[n] = v; } This.init (); } Winpop.prototype = { Init:function () { This.createdom (); This.bindevent (); }, Createdom:function () { var BODY = jQuery ("Body"), OVL = JQuery ("#J_WinpopBox"); if (Ovl.length = = 0) { Body.append (HTMLS.OVL); } This.set ("Ovl", JQuery ("#J_WinpopBox")); This.set ("Mask", JQuery ("#J_WinpopMask")); }, Bindevent:function () { var _this = this, OVL = _this.get ("Ovl"), Mask = _this.get ("Mask"); Ovl.on ("click", ". J_altbtn ", function (e) { _this.hide (); }); Ovl.on ("click", ". J_cfmtrue ", function (e) { var cb = _this.get ("Confirmback"); _this.hide (); CB && CB (TRUE); }); Ovl.on ("click", ". J_cfmfalse ", function (e) { var cb = _this.get ("Confirmback"); _this.hide (); CB && CB (FALSE); }); Mask.on ("click", Function (e) { _this.hide (); }); JQuery (document). On ("KeyUp", function (e) { var kc = E.keycode, CB = _this.get ("Confirmback"); if (KC = = 27) { _this.hide (); else if (KC = = 13) { _this.hide (); if (_this.get ("type") = = "Confirm") { CB && CB (TRUE); } } }); }, Alert:function (str, BTNSTR) { var str = typeof str = = ' string '? Str:str.toString (), OVL = This.get ("OVL"); This.set ("type", "alert"); Ovl.find (". J_winpopmain "). <span style=" Width:auto; Height:auto; Float:none "id=" 4_nwp "><a style=" Text-decoration:none "mpid=" 4 "target=" _blank "href=" http://cpro.baidu.com /cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=15&jk=76a947085d99fcf3&k=html&k0= Html&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid= f3fc995d847a976&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3a%2f%2fwww%2eadmin10000% 2ecom%2fdocument%2f5961%2ehtml&urlid=0 "id=" 4_NWL "><span style=" color: #0000ff; Font-size:14px;width: Auto;height:auto;float:none; " >html</span></a></span> (str); if (typeof btnstr = = "undefined") { Ovl.find (". J_winpopbtns "). HTML (Htmls.alert); } else { Ovl.find (". J_winpopbtns "). HTML (BTNSTR); } This.show (); }, Confirm:function (str, callback) { var str = typeof str = = ' string '? Str:str.toString (), OVL = This.get ("OVL"); This.set ("Type", "confirm"); Ovl.find (". J_winpopmain "). <span style=" Width:auto; Height:auto; Float:none "id=" 5_nwp "><a style=" Text-decoration:none "mpid=" 5 "target=" _blank "href=" http://cpro.baidu.com /cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=15&jk=76a947085d99fcf3&k=html&k0= Html&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid= f3fc995d847a976&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3a%2f%2fwww%2eadmin10000% 2ecom%2fdocument%2f5961%2ehtml&urlid=0 "id=" 5_NWL "><span style=" color: #0000ff; Font-size:14px;width: Auto;height:auto;float:none; " >html</span></a></span> (str); Ovl.find (". J_winpopbtns "). HTML (htmls.confirm); This.set ("Confirmback", (Callback | | function () {}); This.show (); }, Show:function () { This.get ("Ovl"). Show (); This.get ("Mask"). Show (); }, Hide:function () { var ovl = this.get ("OVL"); Ovl.find (". J_winpopmain "). HTML (" "); Ovl.find (". J_winpopbtns "). <span style=" Width:auto; Height:auto; Float:none "id=" 6_nwp "><a style=" Text-decoration:none "mpid=" 6 "target=" _blank "href=" http://cpro.baidu.com /cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=15&jk=76a947085d99fcf3&k=html&k0= Html&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid= f3fc995d847a976&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3a%2f%2fwww%2eadmin10000% 2ecom%2fdocument%2f5961%2ehtml&urlid=0 "id=" 6_NWL "><span style=" color: #0000ff; Font-size:14px;width: Auto;height:auto;float:none; " >html</span></a></span> (""); Ovl.hide (); This.get ("Mask"). Hide (); }, Destory:function () { This.get ("OVL"). Remove (); This.get ("Mask"). Remove (); Delete Window.alert; Delete window.confirm; } }; var obj = new Winpop (); Window.alert = function (str) { Obj.alert.call (obj, str); }; window.confirm = function (str, CB) { Obj.confirm.call (obj, str, CB); }; }) (window, jQuery);

Code slightly more, the key to do the following points:

I stole the lazy, use jquery, before use please ensure that the jquery has been introduced
The custom component structure is eventually appended to the body, so before you introduce JS, make sure the document is loaded
Component added to press ESC, DOT Mask layer Hide component feature
Note: Although the Destory method is not used in this example, a reader friend can note the delete window.alert and delete Window.confirm in the method, which is written to ensure that alert, Confirm control restores to browser built-in effects
Component Last if you add window. winpop = Winpop, the object can be globally made available to other classes to invoke the

Last

As a front-end development engineer, the individual feels that JavaScript component development is a very interesting thing, in which fun can only be realized if you try it yourself. Front-End component development often requires JavaScript, CSS and HTML to cooperate with each other in order to be more effective, the above mentioned winpop is no exception,