JS模組與命名空間的介紹

2022-09-16 05:42:10 字數 1553 閱讀 4547

起因

將**組織到類中的乙個重要原因是讓**更加「模組化」,可以在很多不同的場景中實現**的重用。但類不是唯一的模組化**的方式。

一般來講,模組是乙個獨立的js檔案。模組檔案可以包含乙個類定義、一組相關類、乙個實用函式庫或者一些待執行的**。

模組化的目標是支援大規模的程式開發,處理分散源中**的組裝,並且能讓**正確執行,哪怕包含了不需要的模組**,也可以正確執行**。

理想狀態下,所有模組都不應當定義超過乙個全域性標識。

模組函式

通過把模組定義在某個函式的內部來實現,定義的變數和函式都屬於該函式的區域性變數,在函式外不可見。實際上,可以將這個函式作用域用做模組的命名空間(模組函式)

一旦將模組**封裝進乙個函式中,就需要一些方法匯出公用api,以便在模組函式外部呼叫它們。下面有幾種方式匯出公用api:

首先建立乙個命名空間

// 建立乙個全域性變數用來存放與學校相關的模組

var school;                // 建立school命名空間

if(!school) school = {};

1. 利用建構函式

// 返回student建構函式來匯出公共api

school.student = (function()

// ...... 定義student的原型物件和私有屬性和方法 ........

return student;        // 返回student構造方法匯出公共api

})();

2. 返回命名空間物件

如果模組api包括多個單元,則它可以返回命名空間物件

// 為school新增students模組

school.students = (function()

function grade()

// 通過返回命名空間物件將api匯出

return ;

})();

3. 通過關鍵字new呼叫

另外一種類似類似技術:把模組函式當做建構函式,通過new來呼叫。把它們(公共api)賦值給this屬性來將其匯出

school.students = (new function() ());    // 括號寫在裡面。這裡是建立新例項,new後面應緊跟建構函式的呼叫而不是表示式

4. 已定義命名空間物件

作為一種替代方案,如果已經定義了全域性命名空間物件,通過模組函式可以直接設定那個物件的屬性。

// 如果已經定義了命名空間物件

var school;                // 建立school命名空間

if(!school) school = {};

school.students = {};    // student命名空間已經定義

(function(students) )(school.students);

Js中的模組函式和命名空間的介紹

命名空間namespace 某些語言中叫package 是乙個在靜態語言中常見的概念。它可以幫助我們更好地整理 並可避免命名衝突。遺憾的是,js中並不提供原生的命名空間支援。在js中建立的任何物件都預設是全域性物件。在現代的大規模js開發中,不採用命名空間會造成非常糟糕的命名方式,比如用字首命名函式...

JS命名空間

命名空間namespace 某些語言中叫package 是乙個在靜態語言中常見的概念。它可以幫助我們更好地整理 並可避免命名衝突。舉乙個簡單的例子,如果有兩個人都叫小明,我們很難區分和引用這兩個人。但如果我們在他們前面加上命名空間,比如 北京的小明和上海的小明,那麼區分起來就容易的多了,也不會因為重...

JS命名空間with

眾所周知乙個頁面可能會被很多人開發,那麼這時候就有乙個問題,那就是命名的重複 變數,函式名 所以為了解決這個問題,命名空間就應用而生了。可以先看如下 var org jerry groupb org.groupa.jerry.name那麼此時可以發現,如果要使用某個變數,那麼要層層呼叫,但是這回很麻...