2019-12-25 09:24:53 編程手札

我們都知道Vue之所以這麼受大眾喜愛的原因之一就是Vue的組件化開發模式，這樣不僅提高了組件的可重用性，而且每個 Vue 組件都是Vue的實例，可接受相同的選項對象並提供相同的生命週期鉤子。這就讓項目調試起來更加簡單方便，整個開發效果也更高，可維護性也更強，也能適合多人協同開發。我們在閱讀別人項目的時候經常會看到文件中出現require和import，作用都是用來引入模塊化編程使用的。那麼這兩個有什麼區別呢？

CommonJS的由來

在早期沒有模塊化思想時代碼沒有很好的編寫規範，導致很多代碼、邏輯重複、缺乏條理性且不易管理維護，這也讓很多開發者頭疼不已。隨著JavaScript 社區的發展，社區為JavaScript制定了相應的規範，而CommonJS規範的提出得到了大家的承認和廣泛的應用，2009年CommonJS就此誕生了。

CommonJS介紹

CommonJS實現了Javascript的模塊化規範，規範了模塊的特性和各模塊之間的相互依賴性，使得代碼可以更好的編寫和維護，同時提高了代碼的複用性。定義每個文件都是一個模塊（module變量代表當前模塊）並有自己的作用域，而每個文件裡面定義的變量、函數、類，都是私有的，對於其他模塊是不可見。模塊的exports屬性是對外的接口，只有通過exports導出的屬性才能被加載識別。Node就是基於CommonJs規範實現的，因為CommonJS規範加載模塊是同步的，而服務器中的Node模塊都直接存儲在服務器本地硬盤中的，加載起來自然比較快，可以說node項目是CommonJs規範目前的最好實踐應用。

require

require是Node內置的用於加載模塊文件函數，require函數可以讀取並執行一個JavaScript文件，然後返回該模塊的exports對象。module.exports變量（用於導出模塊），require函數（用於導入模塊）是CommonJS定義了兩個主要概念，module.exports屬性表示當前模塊對外輸出的接口，當其他文件通過require函數加載該模塊時實際上就是讀取module.exports中的變量。

ECMAScript 6 （簡稱ES6）

ECMAScript是（European Computer Manufacturers Association Script）的縮寫，它是由ECMA國際標準化定製的一項JavaScript腳本語言的標準化規範。ECMAScript 6 是ECMA在2015年發佈的JavaScript 的規範標準，解決 ES5 的很多先天不足並引入了模塊化思想。ES6模塊的設計思想是儘量的靜態化，使得編譯時就能確定模塊的依賴關係以及輸入和輸出的變量。

import

import是ES6中的語法標準也是用來加載模塊文件的，import函數可以讀取並執行一個JavaScript文件，然後返回該模塊的export命令指定輸出的代碼。export與export default均可用於導出常量、函數、文件、模塊，export可以有多個，export default只能有一個。

require與import的區別

1，require是CommonJS規範的模塊化語法，import是ECMAScript 6規範的模塊化語法；

2，require是運行時加載，import是編譯時加載；

3，require可以寫在代碼的任意位置，import只能寫在文件的最頂端且不可在條件語句或函數作用域中使用；

4，require通過module.exports導出的值就不能再變化，import通過export導出的值可以改變；

5；require通過module.exports導出的是exports對象，import通過export導出是指定輸出的代碼；

6，require運行時才引入模塊的屬性所以性能相對較低，import編譯時引入模塊的屬性所所以性能稍高。

require的使用

定義模塊：module變量代表當前模塊，它的exports屬性是對外的接口。通過exports可以將模塊從模塊中導出，其他文件加載該模塊實際上就是讀取module.exports變量，他們可以是變量、函數、對象等。在node中如果用exports進行導出的話系統會系統幫您轉成module.exports的，只是導出需要定義導出名。