Case Mode Principle and Usage Example Analysis of JavaScript Design Mode

The example of this article describes the singular mode principle and usage of JavaScript design mode. Share to everyone for your reference, the specific:

Definition of single case mode: Ensure that a class has only one instance and provides a global access point access to it.

Single-case mode is a common mode, and some objects only need one, such as a thread pool, global cache, a Window object in the browser, etc., this can be used in this case.

Some sample mode typical application scenario: When the button is clicked, a login floating window will appear, and the login floating window is unique, no matter how many times the button is clicked, this floating window will be created. Once, it is suitable for creation with single case mode.

The global variable is not a single example mode, but in JavaScript development, global variables are often used as a single case.

When using

var A = {}; When the object A is created, the object A is unique. If the variable A is declared in a global scope, it can be in any This variable is used. This obviously meets two conditions of single case mode. However, there are many problems with global variables, which is easy to cause naming space pollution, as above

var A = {};

may be overwritten at any time. It is necessary to minimize the use of global variables, even if needed, it should minimize its pollution.

1) Use namespace

appropriately Using namespaces and does not eliminate global variables, but the number of global variables can be reduced.

Use A and B to be the properties of Namespace, which can reduce the opportunity to deal with the variable and global scope:

VAR namespace = {A: Function () {Alert (“a”);}, b: function (){ALERT (“B”);}};
  Dynamically creates a namespace:  

var obj = {}; obj.namespace = function (name) {var tips = name.split (‘.’); Var cur = obj; for (var i in tips) {if (! Cur [tips ” I]]]) CUR [TIPS [I]] = {}; cur = cur [tips [i]];}}; obj.namespace (‘name’); obj.namespace (‘birth.year’); console. DIR (OBJ);

The above code is equivalent to:
   var obj = {name: {}, Birth: {year: {}}}; 
2) Use a closing package package private variable

 VAR persons = (function () {var_name = "alice"; var _id = 16; return {getUserInfo: function () {return _name + ": + _id;}}}) ();   
Use the underline to agree to the private variable _name and _age, which are encapsulated in the scope of the closure, and the outside is the access to these two variables, which is avoided. The overall command pollution.

inert single example mode:

Create an object instance when needed.
 VAR CREATEBOX = (Function () {var Div; return function () {if (! Div) {div = document.createElement ('div "; div. Innerhtml = 'login'; div.style.display = 'none'; Document.Body.Appendchild (Div);} Return Div;}}) (); Document.GtelementById ('btn'). OnClick = function () { Var Box = createbox (); box.style.display = 'block';};   DIV is used to determine if a floating window has been created. 
Universal inert single example:

Problem:

The above inert singular example is a violation of a single responsibility principle, creating objects and management orders The logic of the example is placed inside the Createbox object. If you want to create a unique iframe in your page next time, you need to almost copy CreateBox.

VAR CREATEIFRAME = (function () {var iFrame; returnif () {if (! Iframe) {iframe = Document.createElement (‘iframe’); document. Body.Appendchild (IFRAMe); Return IFRAME;} Return Div;}} ();

Solution:
isolates the constant portion, in fact, management Single examples of logic can be completely abstracted because their logic is the same: use a variable to mark whether to create an object, if so, return the object that has been created next time.
   VAR CREATESINGLE = Function (FUNC) {var flag; return flag || (Flag = func.apply (this, arguments));}; var createbox = function ( ) {var div = Document.createElement ('div "; div.innerhtml =' login '; div.style.display =' none '; document.body.Appendchild (div); return div;}; document.getlementByid ( 'btn'). OnClick = function () {var box = createbox (); box.style.display = 'block';}; var createiframe = createness (function () {var iFrame = document.createElement ('iframe " ; Document.Body.Appendchild (iframe); return iframe;}; Document.getElementByid ('btn'). OnClick = function () {var iFrame= CreateIframe (); iframe.style.display = 'block';}; 

Other uses singletons:

use] singleton far beyond creating an object, such as a click event to bind only once, apparently using the jQuery

one on the first page is rendered () method can be achieved. If the use of createSingle

The method is also very easy to implement:
   var createSingle = function (func) {var flag; return flag || (flag = func .apply (this, arguments));}; var bindEvent = createSingle (function () {document.getElementById ( 'div') onclick = function () {....}; return true;}); var render = function () {bindEvent ();}; render (); render (); render (); 

render ()

functions and
bindEvent () function performed three times, but in fact only div is bound once.
  more about JavaScript to view the content site topic: "javascript object-oriented introductory tutorial", "JavaScript transition effects and skills summary", "JavaScript search algorithm skills summary", "JavaScript error and debugging skills summary "," JavaScript data structures and algorithms skills summary "," JAVAScript Traditional Algorithm and Skill Summary "and" Summary of JavaScript Mathematical Computing " 
I hope this article will help you JavaScript programming.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment