How to avoid conflicts in JavaScript

[1] Engineer a write function a

var a = 1;var B = 2;alert (a+b);//3

[2] Engineer B Add new function

var a = 2;var B = 1;alert (a);//1

[3] In the previous step, the engineer B without the knowledge of the case, the definition of the same name variable A, resulting in a conflict. The script is then wrapped with an anonymous function, allowing the variable scope to be controlled within the anonymous function.

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

Functional A (function () {var a = 1;　　var B = 2;　　alert (a+b);//3}) ();//function B (function () {var a = 2;　　var b = 1; Alert (A-B);//1}) ();

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

[4] There are new requirements, the Web page to add the function C, and need to use the function A in the variable B. A global variable is defined in the window scope, which is used as a bridge to complete the communication between anonymous functions.

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

global variable var str;//function A (function () {var a = 1;　　Assigns the value of B to str var b = str = 2;　　alert (a+b);//3}) ();//function B (function () {var a = 2;　　var b = 1;　　Alert (A-B);//1});//function C (function () {//) the value of STR is assigned to var b = str; alert (b);//2}) ();

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

[5] But if function C also requires the variable A in function A, then you need to define a global variable

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

global variable var str,str1;//function A (function () {//assigns the value of a to str1 var a = str1 = 1;　　Assigns the value of B to str var b = str = 2;　　alert (a+b);//3}) ();//function B (function () {var a = 2;　　var b = 1;　　Alert (A-B);//1});//function C (function () {//) assigns the value of str1 to a var a = str1;　　Assigns the value of Str to b var b = str; alert (a*b);//2}) ();

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

[6] But the more variables that need to be communicated between anonymous functions, the more global variables are required. Therefore, we need to strictly control the number of global variables, using hash objects as global variables, you can use the required variables as properties of the object, you can ensure that the number of global variables is small enough, and the extensibility is very good

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

Global variables var global = {};//function A (function () {//) assigns the value of a to global.str1 var a = GLOBAL.STR1 = 1;　　Assign the value of B to global.str var b = global.str = 2;　　alert (a+b);//3}) ();//function B (function () {var a = 2;　　var b = 1;　　Alert (A-B);//1});//function C (function () {//) assigns the value of GLOBAL.STR1 to a var a = GLOBAL.STR1;　　Assign the value of Global.str to b var b = global.str; alert (a*b);//2}) ();

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

[7] But if the new function D, function d needs and function B communication, and use the function B script in the variable A, development function D is the engineer Ding

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

Global variables var global = {};//function A (function () {//) assigns the value of a to global.str1 var a = GLOBAL.STR1 = 1;　　Assign the value of B to global.str var b = global.str = 2;　　alert (a+b);//3}) ();//function B (function () {//) assigns the value of a to global.str1 var a = GLOBAL.STR1 = 2;　　var b = 1;　　Alert (A-B);//1});//function C (function () {//) assigns the value of GLOBAL.STR1 to a var a = GLOBAL.STR1;　　Assign the value of Global.str to b var b = global.str;　　alert (a*b);//2}) ();//Functions D (function () {//assigns the value of GLOBAL.STR1 to a var a = GLOBAL.STR1; alert (a*2);//4}) ();

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

[8] Because engineer Ding only cares about his anonymous function and function B's anonymous function, using GLOBAL.STR inadvertently overwrites the variable with the same name set in function A, resulting in a function C error. So using namespaces to solve this problem, under different anonymous functions, declare a different namespace according to the function, and then the properties of the global object in each anonymous function are not hanging directly on the global object, but in the namespace of this anonymous function

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

[9] If the program in the same anonymous function is very complex, the variable name is many, the namespace can be further expanded to generate a level two namespace

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

Take function A as an example (function () {var a = 1, b = 2; GLOBAL.　　A = {}; GLOBAL.　　A.cat = {}; GLOBAL.　　A.dog = {}; GLOBAL.　　A.cat.name = ' Mimi '; GLOBAL.　　A.dog.name = ' Xiaobai '; GLOBAL.　　A.cat.move = function () {}; GLOBAL.　　A.STR1 = A; GLOBAL.    B.str = b; })();

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

[10] because the generation of namespaces is a very common feature, further defining the function of generating namespaces as a function for easy invocation, the full version of the rewritten code is as follows

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

var global = {};　　Global.namespace = function (str) {var arr = str.split ('. ');　　var o = global;　　var start = 0;　　if (arr[0] ==  ' GLOBAL ') {start = 1;　　}else{start = 0; } for (var i = start; i < arr.length; i++) {O[arr[i]] = o[arr[i]]  | |　　　　 {};　　o = o[arr[i]];　　}};//function A (function () {var a = 1;　　var b = 2;　　Global.namespace (' A.cat ');　　Global.namespace (' A.dog '); GLOBAL.　　a.cat.name =  ' Mimi '; GLOBAL.　　a.dog.name =  ' Xiaobai '; GLOBAL.　　A.cat.move = function () {}; GLOBAL.　　a.str1 = a; GLOBAL.　　a.str = b;     alert (a+b);//3}) ();//function B (function () {var a = 2;　　var b = 1;　　Global.namespace (' B '); GLOBAL.　　b.str1 = a; Alert (A-B);//1}) ();//function C (function () {Var a = global.　　A.STR1; VAr b = global.　　A.STR; alert (a*b);//2}) ();//function d (functions () {Var a = global.　　B.STR1; alert (a*2);//4}) ();

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

[11] The conflict of code has been resolved, but maintainability is not strong. For example, now you need to have engineer a go to modify function B. Because the script written by engineer A is about function A, he doesn't know the script of feature B. To improve this situation, you need to add the appropriate annotations to the code.

var global = {};　　Global.namespace = function (str) {var arr = str.split ('. ');　　var o = global;　　var start = 0;　　if (arr[0] ==  ' GLOBAL ') {start = 1;　　}else{start = 0; } for (var i = start; i < arr.length; i++) {O[arr[i]] = o[arr[i]]  | |　　　　 {};　　o = o[arr[i]]; }};/**  @method   Function A: implementing addition *  @author   engineer a *  @connect  1234567*  @time  　　2015-01-01*/(function () {var a = 1;　　var b = 2;　　Global.namespace (' A.cat ');　　Global.namespace (' A.dog '); GLOBAL.　　a.cat.name =  ' Mimi '; GLOBAL.　　a.dog.name =  ' Xiaobai '; GLOBAL.　　A.cat.move = function () {}; GLOBAL.　　a.str1 = a; GLOBAL. a.str = b;     alert (a+b);//3}) ();/**  @method   function B: Implement the subtraction Operation *  @author   Engineer B *  @connect  1234567*  @time 2015-01-01*/(function () {var a = 2;　　var b = 1;　　Global.namespace (' B '); GLOBAL.　　b.str1 = a; Alert (A-B);//1}) ();/**  @method   function C: Implement multiplication *  @author   engineer C *  @connect  1234567*  @time  2015-01-01*/(function () {Var a = global.　　A.STR1; Var b = global.　　A.STR; alert (a*b);//2}) ();/**  @method   function D: Implement multiply 2 operations *  @author   Engineer Ding *  @connect  1234567*  @time  2015-01-01*/(function () {Var a = global.　　B.STR1; alert (a*2);//4}) ();

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

Let JavaScript no longer conflict, need

[1] Avoid flooding of global variables

[2] Proper use of namespaces

[3] Add the necessary comments for the code

How to avoid conflicts in JavaScript