前端模塊化（一）nodeJS中的CommonJS規范

Charlie_Jade 發布于2019-08-22 18:10 / 879人閱讀

摘要：要想讓模塊再次運行，必須清除緩存。模塊加載的順序，按照其在代碼中出現的順序。最近參加了公司開展的一次培訓，結構性思維培養。

序言

模塊化，大家用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的模塊分類

云服務器 GPU云服務器前端規范前端規范文檔 nodejs模塊 Nodejs模塊封裝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95576.html

【js基礎】前端模模塊化知識點整理

摘要：其中命令用于輸入其他模塊提供的功能，命令用于規定模塊的對外接口。簡單記錄下自己對前端模塊化的一些淺薄理解，不對之處歡迎指正在介紹前端模打包工具之前，我們先簡單說一下瀏覽器、v8和nodejs，因為我們現在用到的大部分前端模打包工具，都是需要nodejs環境運行的，同時他們都能通過npm進行下載 1. 瀏覽器：瀏覽器組成可分兩部分：Shell+內核。瀏覽器內核又可以分成兩部分：渲染...

IamDLY 2019-08-21 17:49 評論0 收藏0
關于JavaScript模塊規范之CommonJSAMDCMD

摘要：所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。也采用語句加載模塊，但是不同于，它要求兩個參數第一個參數，是一個數組，里面的成員就是要加載的模塊第二個參數，則是加載成功之后的回調函數。本篇文章來自對文章《js模塊化編程之徹底弄懂CommonJS和AMD/CMD！》的總結，大部分摘自文章原話，本人只是為了學習方便做的筆記，之后有新的體會會及時補充...

binaryTree 2019-08-26 13:22 評論0 收藏0
前端構建工具整理

摘要：常見前端構建工具的分類和對比是附帶的包管理器，是內置的一個功能，允許在文件里面使用字段定義任務在這里，一個屬性對應一段腳本，原理是通過調用去運行腳本命令。前文端技術范圍不斷發展，前端開發不僅限于直接編寫html，css和javascript，Web應用日益龐大，代碼也更加龐大，因此許多新的思想（例如模塊化和工程化等）和框架（React和Vue等），以及新的語言（Es6 TypeSc...

leo108 2019-08-23 10:53 評論0 收藏0
JS模塊化編程

摘要：也就是說，外部模塊輸出值變了，當前模塊的導入值不會發生變化。三規范的出現，使得模塊化在環境中得到了施展機會。模塊化這種加載稱為編譯時加載或者靜態加載。總結的模塊化規范經過了模塊模式的演進，利用現在常用的打包工具，非常方便我們編寫模塊化代碼。前言什么是模塊化？模塊就是實現特定功能的一組方法,而模塊化是將模塊的代碼創造自己的作用域，只向外部暴露公開的方法和變量，而這些方法之間高度解耦...

騫諱護 2019-08-26 13:34 評論0 收藏0
前端模塊化詳解

摘要：提倡依賴前置，在定義模塊的時候就要聲明其依賴的模塊。適用場景按需加載條件加載動態的模塊路徑注關于模塊化，詳細見阮一峰的入門模塊與模塊化區別模塊化的規范和兩種。模塊化開發方便代碼的管理，提高代碼復用性，降低代碼耦合，每個模塊都會有自己的作用域。當前流行的模塊化規范有CommonJS，AMD，CMD，ES6的import／export CommonJS的主要實踐者就是nodejs,一般...

zhangfaliang 2019-08-23 17:11 評論0 收藏0