Contoh untuk menerangkan cara mengelakkan konflik JavaScript-tutorial js-php.cn

Contoh untuk menerangkan cara mengelakkan konflik JavaScript

PHPz

Lepaskan： 2018-10-13 16:45:07

asal

888 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara mengelakkan konflik dalam javascript Rakan yang memerlukannya boleh mempelajarinya

[1] Jurutera A menulis fungsi A

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

Salin selepas log masuk

[2] Jurutera B menambah fungsi baharu B

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

Salin selepas log masuk

[3] Dalam langkah sebelumnya, Jurutera B mentakrifkan pembolehubah a dengan nama yang sama tanpa mengetahuinya, menyebabkan konflik. Jadi gunakan fungsi tanpa nama untuk membungkus skrip, supaya skop pembolehubah dikawal dalam fungsi tanpa nama.

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

Salin selepas log masuk

[4] Pada masa ini, terdapat keperluan baharu Fungsi C ditambahkan pada halaman web, dan pembolehubah b dalam fungsi A perlu digunakan. Jadi tentukan pembolehubah global di bawah skop tetingkap dan gunakannya sebagai jambatan untuk melengkapkan komunikasi antara fungsi tanpa nama

//全局变量
var str;
//功能A
(function(){
　　var a = 1;
　　//将b的值赋给str
　　var b = str = 2;
　　alert(a+b);//3
})();
//功能B
(function(){
　　var a = 2;
　　var b = 1;
　　alert(a-b);//1
})();
//功能C
(function(){
　　//将str的值赋给b
　　var b = str;
　　alert(b);//2
})();

Salin selepas log masuk

[5] Tetapi jika fungsi C Kita juga perlu pembolehubah a dalam fungsi A. Pada masa ini, kita perlu mentakrifkan satu lagi pembolehubah global

//全局变量
var str,str1;
//功能A
(function(){
　　//将a的值赋给str1
　　var a = str1 = 1;
　　//将b的值赋给str
　　var b = str = 2;
　　alert(a+b);//3
})();
//功能B
(function(){
　　var a = 2;
　　var b = 1;
　　alert(a-b);//1
})();
//功能C
(function(){
　　//将str1的值赋给a
　　var a = str1;
　　//将str的值赋给b
　　var b = str;
　　alert(a*b);//2
})();

Salin selepas log masuk

[6] Tetapi kerana fungsi tanpa nama perlu berkomunikasi antara satu sama lain, lebih banyak pembolehubah diperlukan , semakin banyak pembolehubah global diperlukan. Oleh itu, adalah perlu untuk mengawal dengan ketat bilangan pembolehubah global Menggunakan objek cincang sebagai pembolehubah global boleh menggunakan pembolehubah yang diperlukan sebagai atribut objek, yang boleh memastikan bahawa bilangan pembolehubah global adalah cukup kecil dan skalabiliti adalah sangat baik<. 🎜>

//全局变量
var GLOBAL = {};
//功能A
(function(){
　　//将a的值赋给GLOBAL.str1
　　var a = GLOBAL.str1 = 1;
　　//将b的值赋给GLOBAL.str
　　var b = GLOBAL.str = 2;
　　alert(a+b);//3
})();
//功能B
(function(){
　　var a = 2;
　　var b = 1;
　　alert(a-b);//1
})();
//功能C
(function(){
　　//将GLOBAL.str1的值赋给a
　　var a = GLOBAL.str1;
　　//将GLOBAL.str的值赋给b
　　var b = GLOBAL.str;
　　alert(a*b);//2
})();

Salin selepas log masuk

[7] Tetapi jika fungsi D ditambah, fungsi D perlu berkomunikasi dengan fungsi B dan menggunakan pembolehubah a dalam skrip fungsi B D ialah jurutera Ding

//全局变量
var GLOBAL = {};
//功能A
(function(){
　　//将a的值赋给GLOBAL.str1
　　var a = GLOBAL.str1 = 1;
　　//将b的值赋给GLOBAL.str
　　var b = GLOBAL.str = 2;
　　alert(a+b);//3
})();
//功能B
(function(){
　　//将a的值赋给GLOBAL.str1
　　var a = GLOBAL.str1 = 2;
　　var b = 1;
　　alert(a-b);//1
})();
//功能C
(function(){
　　//将GLOBAL.str1的值赋给a
　　var a = GLOBAL.str1;
　　//将GLOBAL.str的值赋给b
　　var b = GLOBAL.str;
　　alert(a*b);//2
})();
//功能D
(function(){
　　//将GLOBAL.str1的值赋给a
　　var a = GLOBAL.str1;
　　alert(a*2);//4
})();

Salin selepas log masuk

[8] Memandangkan Jurutera Ding hanya mengambil berat tentang fungsi tanpa namanya sendiri dan fungsi tanpa nama bagi fungsi B, menggunakan GLOBAL.str secara tidak sengaja menimpa pembolehubah dengan nama yang sama ditetapkan dalam fungsi A, menyebabkan ralat dalam fungsi C. . Jadi kami menggunakan ruang nama untuk menyelesaikan masalah ini Di bawah fungsi tanpa nama yang berbeza, mengisytiharkan ruang nama yang berbeza mengikut fungsi Kemudian atribut objek GLOBAL dalam setiap fungsi tanpa nama tidak boleh digantung secara langsung pada objek GLOBAL, tetapi digantung di sini ruang nama bagi fungsi tanpa nama

//全局变量
var GLOBAL = {};
//功能A
(function(){
　　GLOBAL.A = {};
　　//将a的值赋给GLOBAL.A.str1
　　var a = GLOBAL.A.str1 = 1;
　　//将b的值赋给GLOBAL.A.str
　　var b = GLOBAL.A.str = 2;
　　alert(a+b);//3
})();
//功能B
(function(){
　　GLOBAL.B = {};
　　//将a的值赋给GLOBAL.B.str1
　　var a = GLOBAL.B.str1 = 2;
　　var b = 1;
　　alert(a-b);//1
})();
//功能C
(function(){
　　//将GLOBAL.A.str1的值赋给a
　　var a = GLOBAL.A.str1;
　　//将GLOBAL.A.str的值赋给b
　　var b = GLOBAL.A.str;
　　alert(a*b);//2
})();
//功能D
(function(){
　　//将GLOBAL.B.str1的值赋给a
　　var a = GLOBAL.B.str1;
　　alert(a*2);//4
})();

Salin selepas log masuk

[9] Jika atur cara dalam fungsi tanpa nama yang sama adalah sangat kompleks dan mempunyai banyak nama berubah, ruang nama boleh dikembangkan lagi kepada jana ruang nama Sekunder

//以功能A为例
(function(){
　　var a = 1, b = 2;
　　GLOBAL.A = {};
　　GLOBAL.A.CAT = {};
　　GLOBAL.A.DOG = {};
　　GLOBAL.A.CAT.name = &#39;mimi&#39;;
　　GLOBAL.A.DOG.name = &#39;xiaobai&#39;;
　　GLOBAL.A.CAT.move = function(){};
　　GLOBAL.A.str1 = a;
　　GLOBAL.B.str = b;  
})();

Salin selepas log masuk

[10] Oleh kerana menjana ruang nama adalah fungsi yang sangat biasa, fungsi menjana ruang nama ditakrifkan lagi sebagai fungsi untuk panggilan mudah, dan versi lengkap ialah ditulis semula Kod akhir adalah seperti berikut

var GLOBAL = {};
GLOBAL.namespace = function(str){
　　var arr = str.split(&#39;.&#39;);
　　var o = GLOBAL;
　　var start = 0;
　　if(arr[0] == &#39;GLOBAL&#39;){
　　　　start = 1;
　　}else{
　　　　start = 0;
　　}
　　for(var i = start; i < arr.length; i++){
　　　　o[arr[i]] = o[arr[i]] || {};
　　　　o = o[arr[i]];
　　}
};
//功能A
(function(){
　　var a = 1;
　　var b = 2;
　　GLOBAL.namespace(&#39;A.CAT&#39;);
　　GLOBAL.namespace(&#39;A.DOG&#39;);
　　GLOBAL.A.CAT.name = &#39;mimi&#39;;
　　GLOBAL.A.DOG.name = &#39;xiaobai&#39;;
　　GLOBAL.A.CAT.move = function(){};
　　GLOBAL.A.str1 = a;
　　GLOBAL.A.str = b;  
　　alert(a+b);//3
})();
//功能B
(function(){
　　var a = 2;
　　var b = 1;
　　GLOBAL.namespace(&#39;B&#39;);
　　GLOBAL.B.str1 = a;
　　alert(a-b);//1
})();
//功能C
(function(){
　　var a = GLOBAL.A.str1;
　　var b = GLOBAL.A.str;
　　alert(a*b);//2
})();
//功能D
(function(){
　　var a = GLOBAL.B.str1;
　　alert(a*2);//4
})();

Salin selepas log masuk

[11] Masalah konflik kod telah diselesaikan, tetapi kebolehselenggaraan tidak kukuh. Sebagai contoh, sekarang kita perlu meminta jurutera A untuk mengubah suai fungsi B. Kerana skrip yang ditulis oleh Jurutera A adalah mengenai fungsi A, dia tidak tahu situasi skrip fungsi B. Untuk memperbaiki keadaan ini, komen yang sesuai perlu ditambahkan pada kod.

var GLOBAL = {};
GLOBAL.namespace = function(str){
　　var arr = str.split(&#39;.&#39;);
　　var o = GLOBAL;
　　var start = 0;
　　if(arr[0] == &#39;GLOBAL&#39;){
　　　　start = 1;
　　}else{
　　　　start = 0;
　　}
　　for(var i = start; i < arr.length; i++){
　　　　o[arr[i]] = o[arr[i]] || {};
　　　　o = o[arr[i]];
　　}
};
/*
* @method 功能A:实现加法运算
* @author 工程师甲
* @connect 1234567
* @time 2015-01-01
*/

(function(){
　　var a = 1;
　　var b = 2;
　　GLOBAL.namespace(&#39;A.CAT&#39;);
　　GLOBAL.namespace(&#39;A.DOG&#39;);
　　GLOBAL.A.CAT.name = &#39;mimi&#39;;
　　GLOBAL.A.DOG.name = &#39;xiaobai&#39;;
　　GLOBAL.A.CAT.move = function(){};
　　GLOBAL.A.str1 = a;
　　GLOBAL.A.str = b;  
　　alert(a+b);//3
})();
/*
* @method 功能B:实现减法运算
* @author 工程师乙
* @connect 1234567
* @time 2015-01-01
*/
(function(){
　　var a = 2;
　　var b = 1;
　　GLOBAL.namespace(&#39;B&#39;);
　　GLOBAL.B.str1 = a;
　　alert(a-b);//1
})();
/*
* @method 功能C:实现乘法运算
* @author 工程师丙
* @connect 1234567
* @time 2015-01-01
*/
(function(){
　　var a = GLOBAL.A.str1;
　　var b = GLOBAL.A.str;
　　alert(a*b);//2
})();
/*
* @method 功能D:实现乘2运算
* @author 工程师丁
* @connect 1234567
* @time 2015-01-01
*/
(function(){
　　var a = GLOBAL.B.str1;
　　alert(a*2);//4
})();

Salin selepas log masuk

Untuk mengelakkan javascript daripada bercanggah, anda perlu