在JavaScript中建立名稱空間的幾種寫法
在JavaScript中全域性變數經常會引起命名衝突,甚至有時侯重寫變數也不是按照你想像中的順序來的,可以看看下面的例子:
var sayHello = function() { return 'Hello var'; }; function sayHello(name) { return 'Hello function'; }; sayHello();
最終的輸出為
> "Hello var"
為什麼會這樣,根據 StackOverFlow 的解釋,實際上JavaScript的是按如下順序解析的。
function sayHello(name) { return 'Hello function'; }; var sayHello = function() { return 'Hello var'; }; sayHello();
不帶var的function宣告被提前解析了,因此現代的JS寫法建議你始終使用前置var宣告所有變數;
避免全域性變數名衝突的最好辦法還是建立名稱空間,下面是在JS中合建名稱空間的幾種常用方法。
通過函式(function)建立
這是一種比較常見的寫法,通過宣告一個function實現,函式裡設定初始變數,公共方法寫入prototype,如:
var NameSpace = NameSpace || {}; /* Function */ NameSpace.Hello = function() { this.name = 'world'; }; NameSpace.Hello.prototype.sayHello = function(_name) { return 'Hello ' + (_name || this.name); }; var hello = new NameSpace.Hello(); hello.sayHello();
這種寫法比較冗長,不利於壓縮程式碼(jQuery使用fn代替prototype),而且呼叫前需要先例項化(new)。使用Object寫成JSON形式可以寫得緊湊些:
通過JSON物件建立Object
/* Object */ var NameSpace = NameSpace || {}; NameSpace.Hello = { name: 'world' , sayHello: function(_name) { return 'Hello ' + (_name || this.name); } };
呼叫
NameSpace.Hello.sayHello('JS'); > Hello JS;
這種寫法比較緊湊,缺點是所有變數都必須宣告為公有(public)的,導致所有對這些變數的引用都需要加this指示作用域,寫法也略有冗餘。
通過閉包(Closure)和Object實現
在閉包中宣告好所有變數和方法,並通過一個JSON Object返回公有介面:
var NameSpace = NameSpace || {}; NameSpace.Hello = (function() { //待返回的公有物件 var self = {}; //私有變數或方法 var name = 'world'; //公有方法或變數 self.sayHello = function(_name) { return 'Hello ' + (_name || name); }; //返回的公有物件 return self; }());
Object和閉包的改進型寫法
上個例子在內部對公有方法的呼叫也需要新增self,如:self.sayHello(); 這裡可以最後再返回所有公有介面(方法/變數)的JSON物件。
var NameSpace = NameSpace || {}; NameSpace.Hello = (function() { var name = 'world'; var sayHello = function(_name) { return 'Hello ' + (_name || name); }; return { sayHello: sayHello }; }());
Function的簡潔寫法
這是一種比較簡潔的實現,結構緊湊,通過function例項,且呼叫時無需例項化(new),方案來自stackoverflow:
var NameSpace = NameSpace || {}; NameSpace.Hello = new function() { var self = this; var name = 'world'; self.sayHello = function(_name) { return 'Hello ' + (_name || name); }; };
歡迎補充。
相關文章
- 在Js中匿名函式的幾種寫法JS函式
- 你知道JavaScript的繼承有幾種寫法嗎?JavaScript繼承
- 單例的幾種寫法單例
- spring框架中的名稱空間Spring框架
- 面試中單例模式有幾種寫法?面試單例模式
- Python中名稱空間是什麼?名稱空間生命週期是多久?Python
- 名稱空間
- Stream 的幾種中間操作
- SAP 產品線中寫法很接近,容易混淆的幾個名稱
- 請寫出幾種匿名自執行的寫法(至少三種)
- JavaScript中遍歷的幾種方法JavaScript
- 單例模式有幾種寫法?單例模式
- TypeScript 定義函式的幾種寫法TypeScript函式
- 使用p名稱空間和c名稱空間的XML快捷方式XML
- Python中名稱空間包簡介Python
- PHP名稱空間PHP
- PHP 名稱空間PHP
- 20200109 - 名稱空間
- python名稱空間Python
- vuex名稱空間Vue
- 沉浸式空間場景的使用有哪幾種方式?
- 單例模式你會幾種寫法?單例模式
- 分享幾種清理“其他儲存”並在Mac上獲得更多可用空間的方法Mac
- yaml檔案中在哪加名稱空間?YAML
- 15-名稱空間
- Python名稱空間包Python
- 11. 名稱空間
- webservice修改名稱空間Web
- ts---名稱空間
- C++名稱空間C++
- 【TUNE_ORACLE】檢視Oracle的壞塊在空閒空間中還是在已用空間中的SQL參考OracleSQL
- TypeScript中函式過載寫法,你在第幾層!TypeScript函式
- win8 C盤空間不足的幾種解決方法
- Java虛擬機器的記憶體空間有幾種Java虛擬機記憶體
- Java虛擬機器的記憶體空間有幾種!Java虛擬機記憶體
- 孔乙己的疑問:單例模式有幾種寫法單例模式
- [20220104]in list 幾種寫法效能測試.txt
- 使用 NGINX 在 Kubernetes 中實現多租戶和名稱空間隔離Nginx
- JavaScript中更好的迴圈寫法大全JavaScript