前端模組化(一)nodeJS中的CommonJS規範
序言
模組化,大家用vue
,react
等東西,都會接觸到像exports
,module.exports
,export
,export default
,require
,define
,import
等等欄位,感覺很多人對於這些東西還是分不清,概念非常的模糊,便想著寫這麼一篇文章,一是幫助自己梳理知識點,二是跟大家一起成長。其中有寫得不對的,請及時提出來 ,我及時更正。
剛開始寫的時候有些無從下手,一是因為知識點太多,二是因為自己的經驗還不足以幫助大家從深層次剖析js的模組化中的區別,以及其實現原理、思想。這是一篇自己的學習筆記整理,我只能帶大家瞭解前端模組化,區分他們並正確的使用他們。
先給大家扔出幾條知識:
CommonJS
:NodeJS
模組系統具體實現的基石。AMD
:非同步模組規範,是RequireJS
在推廣過程中對模組定義的規範化產出的,推崇依賴前置;UMD
:相容AMD
和commonJS
規範的同時,還相容全域性引用的方式;CMD
:是SeaJS
在推廣過程中對模組定義的規範化產出的,推崇依賴就近;ES6
:ES6模組的設計思想是儘量的靜態化,使得編譯時就能確定模組的依賴關係,以及輸入和輸出的變數;
CommonJS規範
CommonJS官網上寫道,它希望js不僅僅可以在瀏覽器上執行,而是可以在任何地方執行,使其具備開發大型應用的能力。
javascript: not just for browsers any more!
CommonJS定義的模組分為:
- 模組引用(
require
) - 模組定義(
exports
) - 模組標識(
module
)
他可以做到:
- 伺服器端JavaScript應用程式
- 命令列工具
- 圖形介面應用程式
- 混合應用程式(如,Titanium或Adobe AIR)
CommonJS模組的特點如下
- 所有程式碼都執行在模組作用域,不會汙染全域性作用域。
- 模組可以多次載入,但是隻會在第一次載入時執行一次,然後執行結果就被快取了,以後再載入,就直接讀取快取結果。要想讓模組再次執行,必須清除快取。
- 模組載入的順序,按照其在程式碼中出現的順序。
先談一談包的概念
前面給大家說過,node.js
CommonJS
的規範實現的,NPM
大家一定都很熟悉,它實踐了CommonJS
的包規範。
包規範
關於包規範,類比於git
倉庫,我們可以這麼理解:
git init
在當前資料夾中生成了隱藏檔案.git
,我們把它叫做git倉庫
。npm init
命令在當前資料夾中生成了配置檔案package.json
,它描述了當前這個包,我們管這個檔案叫做包(概念不準確,可以這麼理解)。
包結構
嚴格按照CommonJS
規範來的話,包的目錄應當包含以下檔案或目錄。
package.json
:包描述檔案,存在於包頂級目錄下bin
:存放可執行二進位制檔案的目錄lib
:存放js程式碼的目錄doc
:存放文件的目錄test
:存放單元測試用例程式碼的目錄
而package.json
則是一個配置檔案,它描述了包的相關資訊。
NodeJS模組
既然node.js
是基於CommonJS
實現的,那麼我們先來簡單看看NodeJS
的模組原理。
最近參加了公司開展的一次培訓,結構性思維培養。任何東西都能夠進行分類,事物一旦進行分類,更利於大家對此事物的認知,也能方便大家記憶。所以我們先來看看Node
的模組分類。
通常分類
先給大家講講模組的分類
-
核心模組
- 核心模組指的是那些被編譯進Node的二進位制模組
- 預置在Node中,提供Node的基本功能,如fs、http、https等。
- 核心模組使用C/C++實現,外部使用JS封裝
-
第三方模組
Node
使用NPM
(Node Package Manager
)安裝第三方模組NPM
會將模組安裝(可以說是下載到)到應用根目錄下的node_modules
資料夾中- 模組載入時,
node
會先在核心模組資料夾中進行搜尋,然後再到node_modules
資料夾中進行搜尋
-
檔案模組
- 檔案可放在任何位置
- 載入模組檔案時加上路徑即可
-
資料夾模組(後續的
nodeJS的載入規則
將會詳細介紹)-
Node
首先會在該資料夾中搜索package.json
檔案,- 存在,Node便嘗試解析它,並載入main屬性指定的模組檔案
- 不存在(或者
package.json
沒有定義main
屬性),Node預設載入該資料夾下的index.js檔案(main
屬性其實NodeJS
的一個拓展,CommonJS
標準定義中其實並不包括此欄位)
-
估計大家對於資料夾模組概念都比較模糊,它其實相當於一個自定義模組,給大家舉一個栗子