Contoh untuk menerangkan cara mengelakkan konflik JavaScript

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

.

[2] Jurutera B menambah fungsi baharu B

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

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

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

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

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

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

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

[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 = 'mimi';
　　GLOBAL.A.DOG.name = 'xiaobai';
　　GLOBAL.A.CAT.move = function(){};
　　GLOBAL.A.str1 = a;
　　GLOBAL.B.str = b;  
})();

[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('.');
　　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]];
　　}
};
//功能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
})();

[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('.');
　　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 功能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
})();

Untuk mengelakkan javascript daripada bercanggah, anda perlu

• 　　[1 ] Elakkan Percambahan pembolehubah global

• 　[2] Penggunaan ruang nama yang munasabah

• 　[3] Tambahkan komen yang diperlukan pada kod

Di atas ialah kandungan terperinci artikel ini, saya semoga bermanfaat untuk bantuan pembelajaran semua.

【Tutorial berkaitan yang disyorkan】

1.

Tutorial video JavaScript2
Manual dalam talian JavaScript3 tutorial bootstrap