Examples to explain the ways to avoid JavaScript conflicts _javascript Tips

This article illustrates how to avoid conflicts in JavaScript, and friends who need to know

[1] Engineer A to write function a

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

[2] Engineer B Add new function B

var a = 2;
var b = 1;
alert (a-b);//1

[3] In the previous step, engineer B, without knowing it, defined the variable a with the same name, resulting in a conflict. The anonymous function is used to wrap the script so that the variable scope is controlled within the anonymous function.

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

[4] With the new requirements, add function c to the Web page and use the variable B in function A. So we define a global variable in window scope and use it as a bridge to complete communication between anonymous functions.

global variable
var str;
feature a
(function () {
var a = 1;
Assign the value of B to str
var b = str = 2;
alert (a+b);//3
}) ();
Functional b
(function () {
var a = 2;
var b = 1;
alert (a-b);//1
}) ();
Feature C
(function () {
//Assign the value of str to b
var b = str;
alert (b);//2
}) ();

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

global variable
var str,str1;
feature a
(function () {
//Assign a value to Str1
var a = str1 = 1;
Assign the value of B to str
var b = str = 2;
alert (a+b);//3
}) ();
Functional b
(function () {
var a = 2;
var b = 1;
alert (a-b);//1
}) ();
Feature C
(function () {
//Assign str1 value to
var a = str1;
Assign the value of str to b
var b = str;
alert (a*b);//2
}) (); 

[6] But as more variables are required to communicate between anonymous functions, the more global variables are required. Therefore, we need to strictly control the number of global variables, using the hash object as a global variable, you can use the required variables as the object's attributes, you can ensure that the number of global variables is small enough, while the expansion of the very good

Global variable
var global = {};
feature a
(function () {
//Assign a value 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
}) ();
Functional b
(function () {
var a = 2;
var b = 1;
alert (a-b);//1
}) ();
Feature C
(function () {
//Assign GLOBAL.STR1 value to
var a = global.str1;
Assigning the value of Global.str to B
var b = global.str;
alert (a*b);//2
}) ();

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

Global variable
var global = {};
feature a
(function () {
//Assign a value 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
}) ();
Feature b
(function () {
//Assign a value to Global.str1
var a = GLOBAL.STR1 = 2;
var b = 1;
alert (a-b);//1
}) ();
Feature C
(function () {
//Assign GLOBAL.STR1 value to
var a = global.str1;
Assigning the value of Global.str to B
var b = global.str;
alert (a*b);//2
}) ();
Feature d
(function () {
//Assign GLOBAL.STR1 value to
var a = global.str1;
alert (a*2);//4
}) (); 

[8] Because the engineer Ding is only concerned about their anonymous functions and function B of the anonymous function, the use of global.str but inadvertently overwrite the function set of the same name variable, resulting in function C error. The namespace is used to resolve this problem by declaring a different namespace based on the function under different anonymous functions, and then the properties of the global object in each anonymous function are not directly attached to the global object, but are hung under the namespace of this anonymous function

Global variable
var global = {};
feature a
(function () {
GLOBAL.　　A = {};
Assigns the value of a to Global.a.str1
var a = GLOBAL.　　A.STR1 = 1;
Assigns the value of B to Global.a.str
var b = GLOBAL.　　A.str = 2;
alert (a+b);//3
}) ();
Feature b
(function () {
GLOBAL.　　B = {};
Assigns the value of a to Global.b.str1
var a = GLOBAL.　　B.STR1 = 2;
var b = 1;
alert (a-b);//1
}) ();
Feature C
(function () {
//Assign GLOBAL.A.STR1 value to
var a = GLOBAL.　　A.STR1;
Assigns the value of Global.a.str to B
var b = GLOBAL.　　A.str;
alert (a*b);//2
}) ();
Feature d
(function () {
//Assign GLOBAL.B.STR1 value to
var a = GLOBAL.　　B.STR1;
alert (a*2);//4
}) (); 

[9] If the program in the same anonymous function is very complex and has a lot of variable names, the namespace can be further expanded to generate a level two namespace

Take feature 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;  
}) ();

[10] because generating namespaces is a very common feature, it further defines the function of generating namespaces as a function to facilitate invocation, and the full version of the rewritten code follows

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]];
}
};
feature 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
}) ();
Functional b
(function () {
var a = 2;
var b = 1;
Global.namespace (' B ');
GLOBAL.　　B.STR1 = A;
alert (a-b);//1
}) ();
Feature C
(function () {
var a = GLOBAL.　　A.STR1;
var B = GLOBAL.　　A.str;
alert (a*b);//2
}) ();
Feature d
(function () {
var a = GLOBAL.　　B.STR1;
alert (a*2);//4
}) ();

[11] The conflict of the code has been resolved, but maintainability is not strong. For example, it is now necessary to have engineer a modify function B. Because the script written by engineer A is about function A, he doesn't know the script of function B. To improve this situation, you need to add appropriate annotations to your 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: implement addition operation * @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: implementation subtraction * @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 functionD: Implement Multiply 2 * @author Engineer D * @connect 1234567 * @time 2015-01-01 * * (function () {var a = GLOBAL.
　　B.STR1;


 alert (a*2);//4}) ();

Let JavaScript no longer conflict, need

• 　[1] Avoid flooding of global variables
• [2] Rational use of namespaces
• [3] Add the necessary comments for the code

The above is the detailed content of this article, I hope to help you learn.