The example explains how to avoid javascript conflicts, and the example explains javascript

The example explains how to avoid javascript conflicts, and the example explains javascript

This article explains how to avoid conflicts in javascript.

[1] engineer A's writing function

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

[2] engineer B adds new function B

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

[3] in the previous step, engineer B, without knowledge, defined the variable a with the same name, resulting in a conflict. Therefore, the anonymous function is used to package the script so that the variable scope can be controlled within the anonymous function.

// Function 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 })();

[4] Now we have A new requirement. Function C is added to the webpage and function A variable B needs to be used. Therefore, a global variable is defined in the window scope as a bridge to complete communication between anonymous functions.

// Global variable var str; // function A (function () {var a = 1; // assign 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 () {// assign the value of str to B var B = str; alert (B); // 2 })();

[5] But if Function C still needs variable A in function a, then A global variable needs to be defined.

// Global variables var str, str1; // function A (function () {// assign the value of a to str1 var a = str1 = 1; // assign 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 () {// assign the str1 value to a var a = str1; // assign the str value to B var B = str; alert (a * B ); // 2 })();

[6] But the more variables that need to communicate between anonymous functions, the more global variables are required. Therefore, we need to strictly control the number of global variables. By using the hash object as the global variable, we can use all the required variables as the attributes of the object to ensure that the number of global variables is small enough and the scalability is very good.

// GLOBAL variable var GLOBAL ={}; // function A (function () {// assign 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 () {// set GLOBAL. the str1 value is assigned to a var a = GLOBAL. str1; // set GLOBAL. the str value is assigned to B var B = GLOBAL. str; alert (a * B); // 2 })();

[7] but if function D is added, function D needs to communicate with function B and use the variable a in function B script. Engineer D is used to develop function D.

// GLOBAL variable var GLOBAL ={}; // function A (function () {// assign 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 () {// assign the value of a to GLOBAL. str1 var a = GLOBAL. str1 = 2; var B = 1; alert (a-B); // 1}) (); // function C (function () {// set GLOBAL. the str1 value is assigned to a var a = GLOBAL. str1; // set GLOBAL. the str value is assigned to B var B = GLOBAL. str; alert (a * B); // 2}) (); // function D (function () {// set GLOBAL. the str1 value is assigned to a var a = GLOBAL. str1; alert (a * 2); // 4 })();

[8] Because engineer Ding only cares about his anonymous function and function B's anonymous function, using GLOBAL. str overwrites the variable with the same name set in function A, leading to function C errors. Therefore, namespace is used to solve this problem. Under Different anonymous functions, a different namespace is declared according to the function, then, do not directly link the GLOBAL object attributes of each anonymous function to the GLOBAL object, but to the namespace of the anonymous function.

// GLOBAL variable var GLOBAL ={}; // function A (function () {GLOBAL. A = {}; // assign the value of a to GLOBAL. a. str1 var a = GLOBAL. a. str1 = 1; // assign the value of B to GLOBAL. a. str var B = GLOBAL. a. str = 2; alert (a + B); // 3}) (); // function B (function () {GLOBAL. B ={}; // assign the value of a to GLOBAL. b. str1 var a = GLOBAL. b. str1 = 2; var B = 1; alert (a-B); // 1}) (); // function C (function () {// set GLOBAL. a. the str1 value is assigned to a var a = GLOBAL. a. str1; // set GLOBAL. a. the str value is assigned to B var B = GLOBAL. a. str; alert (a * B); // 2}) (); // function D (function () {// set GLOBAL. b. the str1 value is assigned to a var a = GLOBAL. b. str1; alert (a * 2); // 4 })();

[9] if the program in the same anonymous function is very complex and has many variable names, the namespace can be further expanded to generate a second-level namespace

// Take function A as an example (function () {var a = 1, B = 2; GLOBAL. A = {}; GLOBAL. a. CAT ={}; GLOBAL. a. DOG ={}; GLOBAL. a. CAT. name = 'mimimi'; GLOBAL. a. DOG. name = 'xiaoba'; GLOBAL. a. CAT. move = function () {}; GLOBAL. a. str1 = a; GLOBAL. b. str = B ;})();

[10] as generating a namespace is a very common function, the generated namespace function is further defined as a function for easy calling. The code after the complete version is rewritten is as 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] ;}}; // function A (function () {var a = 1; var B = 2; GLOBAL. namespace ('a. cat'); GLOBAL. namespace ('a. DOG '); GLOBAL. a. CAT. name = 'mimimi'; GLOBAL. a. DOG. name = 'xiaoba'; 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 (function () {var a = GLOBAL. b. str1; alert (a * 2); // 4 })();

[11] Code conflicts have been solved, but the maintainability is not strong. For example, engineer a needs to modify function B. Because the script written by engineer A is about function A, he does not know the script of function B. To improve this situation, you need to add appropriate comments 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: Implements addition operations * @ 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 = 'mimimi'; GLOBAL. a. DOG. name = 'xiaoba'; 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 operation * @ 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 multiplication 2 operation * @ author engineer Ding * @ connect 1234567 * @ time 2015-01-01 */(function () {var a = GLOBAL. b. str1; alert (a * 2); // 4 })();

So that javascript does not conflict with each other.

• 　[1] avoiding the proliferation of global variables
• [2] rational use of namespaces
• [3] add necessary comments to the code

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

Articles you may be interested in:

• JS learning notes prevent name conflicts
• Solutions to conflicts between jQuery Library and other JS Libraries
• Js does not perfectly solve the conflict between click and dblclick events
• Conflict between jquery and js Functions
• Two solutions to conflicts between css and js {} And smarty delimiters
• Solution to the conflict between single quotes and double quotes in js
• Use the conflict solution when importing extjs and jquery files
• Quick Solution for conflicts between JQuery $ and other JS
• Comparison between jQuery's method to avoid conflict between $ operator and other JS Libraries
• Conflict between js function name and form element with the same name