規避Javascript多人開發函數和變量重名問題


 函數和變量重名始終是一個令人頭痛的問題,先講變量吧,相信了解JS的朋友都知道,在JS中

是沒有塊級作用域的只有函數作用域,也就是說那些以大括號為界定符的代碼塊是管不住其中定義

的變量的作用域的,舉例:

1 {
2     var num = 110;
3 }
4 console.log(num);//打印結果:110,而不是num is not defined
1 for(var j = 0; j < 5; j++);
2 console.log(j);//結果:5

怎么解決? 一般來說有經驗的程序員會盡量少的使用全局變量,盡可能使用局部變量,這不僅會減少變量重名的幾率,

更會減少內存開銷,因為局部變量一般都會在函數結束后自動銷毀釋放出內存,而全局變量會直到進程結束才會被銷毀

掉。其次,當我們需要一個作用域來關住變量時一般會用一個匿名函數來充當這個作用域。如:

1 (function(){
2     var gender = '男';
3 })();
4 console.log(gender);//結果是:gender is not defined

匿名函數充當作用域這種方法一般已經能夠滿足一部分程序員的需求了,但問題來了,函數重名怎么解決?

項目中必須要使用大量全局變量又該如何解決呢?

其實解決辦法跟上面方法的思路一樣,只是有一點技巧性,JS既然缺少作用域限制,那我們自己再給它人為加上一個

作用域,並且保證每個作用域不重復,這樣一來問題不就解決了嗎。好了接下來我們缺少的就是這么一個神奇的作用域

替代品,令人開心的是,這個東西本身JS就有,那就是對象!

具體我們可以這么操作:假如現在有三個同學要一起合作一個教務系統的項目,這個系統需要老師和學生還有工作人員

的信息,三個同學分工解決這三類信息的工作,具體代碼如下:

 1 // A同學負責的工作人員信息
 2 var A = {} //定義一個空對象
 3 A.name = 'tom';
 4 A.gender = 'male';
 5 A.age = 30;
 6 A.showName = function() {
 7     alert(this.name);
 8 }
 9 A.showAge = function() {
10     alert(this.age);
11 }
12 
13 // B同學負責的老師信息
14 var B = {}
15 B.name = 'Jack';
16 B.gender = 'male';
17 B.age = 28;
18 B.showName = function() {
19     alert(this.name);
20 }
21 B.showAge = function() {
22     alert(this.age);
23 }
24 
25 // C同學負責的學生信息
26 var C = {}
27 C.name = 'Lucy';
28 C.gender = 'female';
29 C.age = 17;
30 C.showName = function() {
31     alert(this.name);
32 }
33 C.showAge = function() {
34     alert(this.age);
35 }

可以看到,ABC同學負責的模塊中都出現了同名的區域,name,age,showName,showAge等,此時卻並不會

出現沖突的問題,因為這些變量和方法都掛載到了不同的對象上,這無形中就給每個同名變量和方法增加了一個

頂部命名空間,這樣一來困擾我們的問題就可以很輕易的解決了。

1 // 正常使用,不會沖突
2 console.log(A.name);//結果:tom
3 console.log(B.name);//結果:Jack
4 console.log(C.name);//結果:Lucy
5 A.showAge();//結果:30
6 B.showAge();//結果:28
7 C.showAge();//結果:17

 最有效的方法,還是采用面向對象開發吧,面向對象非常適合團隊化開發,這樣可以最大化的減少代碼耦合的幾率,項目也容易維護。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM