Develop a complete JavaScript component

As a developer, you should know that there are some built-in controls in the browser: Alert, Confirm and so on, but these controls are usually different in form according to the browser manufacturer, visual effects often fail to reach the UI Designer's...

As a developer, you should know that there are some built-in controls in the browser: Alert, Confirm and so on, but these controls are usually different in form according to the browser manufacturer, visual effects often fall short of the requirements of UI designers. More importantly, it is difficult for these built-in controls to be consistent with the Design Styles of Internet products with different styles. Therefore, excellent front-end developers develop their own personalized controls to replace those embedded in the browser. Of course, there are already countless excellent components on the network. The purpose of writing this article is not to show off how good the component I have developed, nor to show off anything, in this way, we only hope to communicate with more developers, learn from each other, and make progress together. Well, let's get down to the truth.

Features

• Replaces the Alert and Confirm controls that come with the browser.

• Custom interface style

• The usage is basically the same as that of the built-in control.

Effect Preview

1. Alert Control

3. complete code and Online Preview (see the bottom to download the compressed package)

Development Process

　　1. Component Structure Design

First, let's take a look at the basic usage of the built-in components:

Alert ("built-in Alert control"); if (confirm ("Disable built-in Confirm control? ") {Alert (" True ");} else {alert (" False ");}

To ensure that our component usage is consistent with that of the built-in control, we must consider overwriting the built-in control. Considering the uniform style, easy to use, easy to maintain, and object-oriented features of component development, I plan to use the custom alert and confirm methods as an instance method of a class (Winpop, finally, we use the instance method to overwrite the system's built-in controls. To achieve this goal, my basic practices are as follows:

Var obj = new Winpop (); // create a Winpop Instance Object // overwrite the alert control window. alert = function (str) {obj. alert. call (obj, str) ;}; // overwrite the confirm control window. confirm = function (str, cb) {obj. confirm. call (obj, str, cb );};

It should be noted that the browser's built-in controls can prevent other behaviors of the browser, and our custom components do not have this capability, in order to achieve unity as much as possible, as shown in the preview, a full-screen translucent mask layer is used when a custom component is displayed. Because of the above reasons, the usage of the confirm component has also been slightly adjusted, from the built-in return Boolean Value Method to the callback function method, to ensure that the logic of "OK" and "cancel" can be correctly added. Therefore, the usage of custom components becomes the following:

Alert ("Custom Alert component"); confirm ("Disable custom Confirm component? ", Function (flag) {if (flag) {alert (" True ") ;}else {alert (" False ");}});

　　2. Component code design

Before officially introducing the Winpop component code, let's take a look at the basic structure of the next Javascript component:

(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);

Use a self-executed anonymous function to wrap our component code, minimize global pollution, and then attach our class to the global window object, this is a recommended practice.

The get and set methods in constructor are not necessary, but are just my personal habits. In this way, the write can unify the configuration parameters and the global variable caching and reading call methods in other components, it also seems to be more object-oriented. Readers are welcome to talk about their own ideas and whether it is good to write this article.

Next let's take a look at the complete code of the Winpop component:

(Function (window, jQuery, undefined) {var HTMLS = {ovl :'
'+'
'+'
'+'
'+'
', Alert :'', Confirm :''+''} 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 "cmd.html (str); if (typeof btnstr =" undefined ") {ovl. find (". j_WinpopBtns "cmd.html (HTMLS. alert);} else {ovl. find (". j_WinpopBtns "cmd.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 "cmd.html (str); ovl. find (". j_WinpopBtns "cmd.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 "cmd.html (" "); ovl. find (". j_WinpopBtns "pai.html (" "); 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 );

There are a few codes. The key points are as follows:

• I am a lazy user and use jQuery. Before using jQuery, ensure that jQuery has been introduced.

• The custom component structure is appended to the body. Therefore, before introducing the preceding js, ensure that the document has been loaded.

• Added the function of hiding components by ESC and point mask layers.

• Note: although the destory method is not used in this example, you can pay attention to the delete window in this method. alert and delete window. confirm, the purpose of writing this is to ensure that after the custom components are destroyed, the Alert and Confirm controls are restored to the browser's built-in effect.

• If window. Winpop = Winpop is added to the component, the object can be called by other classes.

Last

As a front-end development engineer, I personally think Javascript component development is a very interesting thing. The fun is only possible if you try it yourself. Front-end component development often requires the combination of Javascript, CSS, and html to get twice the result with half the effort. Winpop mentioned above is no exception. Here we provide you with a complete demo compressed package, interested readers, welcome to the promotion.

The above section describes how to develop a complete JavaScript component. For more information, see the PHP Chinese website (www.php1.cn )!