JavaScript模塊化入門:理解模塊

一、什么是模塊化


類似書本,作家會把他的書分成章節和段落;程序猿也會把他的代碼分成模塊。

就像書籍的一章,模塊僅僅是一坨代碼。

二、為何要使用模塊


模塊化可以使你代碼低耦合,功能模塊直接不相互影響。好處如下

1.可維護性:每個模塊都是獨立的。良好設計的模塊會盡量與外部的代碼撇清關系,以便于獨立對其進行改進和維護。

2.命名空間:在JacaScript中,最高級別的函數外定義的變量都是全局變量。因為如此,當一些無關的代碼碰巧使用到同名變量到時候,我們就會遇到"命名空間"污染問題。

3.可復用性:工作中,我們 會經常復制自己之前寫過的代碼到新項目中。復制粘貼雖然方便,但是可以重復利用到模塊更佳。

三、如何引入模塊


模塊模式

模塊模式一般用來模擬類的概念,這樣我們就能把公有和私有方法還有變量存儲在一個對象中。這樣我們就能在公開調用API的同時,仍然在一個閉包范圍內封裝私有變量和方法。

例一:匿名閉包函數


通過這種構造,匿名函數有啦自己的作用域或者‘閉包’,這允許我們從全局(父局)命名空間隱藏變量

這種方法的好處是,你可以在函數內部使用局部變量,而不會意外覆蓋同名全局變量,但仍然能夠訪問到全局變量。如下圖所示:


注意:一定要用括號把匿名函數包起來,以關鍵詞function開頭的語句總是會被解析成函數聲明(js中不允許沒有命名的函數聲明),加上括號后,內部的代碼會被識別為函數表達式。這個也叫立即執行函數。

例二:全局引入

另一種比較受歡迎的方法是一些諸如jQuery的庫使用的全局引入。和剛才的匿名閉包函數很相似,只是傳入全局變量的方法不同


這個例子中 globalVariable是唯一的全局變量。這種方法的好處是可以預先聲明好全局變量,讓你的代碼更加清晰可讀。

例3:對象接口

如圖,這是種創建模塊的方法是使用獨立的對象接口:


例四:模塊模式 Revealing module pattern

這和之前的實現方法非常接近,除了它會確保,在所有的變量和方法暴露之前都會保持私有:


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 定義函數的方式有兩種:函數聲明和函數表達式。 函數聲明的一個重要特征就是函數聲明提升,意思是在執行代碼前會先讀取函...
    oWSQo閱讀 678評論 0 0
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,820評論 25 708
  • 高三第一講:<七月> 縱使你腳下有一千名挑戰者,那就把我算作第一千零一名。 ——北島《回答》 ·到高...
    呈紫衛閱讀 457評論 0 0
  • 我是蝶 為你舞來絢麗的色彩 揮著五彩斑斕的翅 輕輕的飛落你的窗欞 我是雨滴 帶著甜潤 在潮濕晦暗中成為你溫柔的淚滴...
    大眼睛鼴鼠76閱讀 272評論 2 0
  • 進入測試目錄 cd $GOPATH/src/github.com/hyperledger/fabric/examp...
    莫名FCJ閱讀 1,619評論 0 4