>[success] # JS -- improt、require、amd三者經行模塊化開發，三者的區別 ~~~ 1使用improt、require、amd三者經行模塊化開發，三者的區別 ~~~ >[danger] ##### improt、require、amd三者 ~~~ 1.三者都是可以讓js進行模塊化的方案，import是es6 開始支持方式，require 是node支持的commonJs規范，Amd是支持客戶端的一種方式 ~~~ * commonJs -- 支持服務端 ~~~ 1.CommonJS模塊的設計考慮了服務器開發。當然，API是同步的，執行的順序是 依次使用requrie 導入的順序決定的 優點： 1.簡單:開發人員無需查看文檔就可以掌握概念。 2.集成了依賴關系管理:模塊需要其他模塊并按所需順序加載。 3.require可以在任何地方調用:可以以編程方式加載模塊。 4.支持循環依賴項。 缺點: 1.同步API使它不適合某些用途(客戶端)。 2.每個模塊一個文件。 3.瀏覽器需要加載程序庫或傳送。 4.靜態代碼分析器很難分析 ~~~ * amd -- 支持客戶端 ~~~ 1.AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它 采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。所有依賴這個模 塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運 行。 優點: 1.異步加載(更好的啟動時間)。 2.支持循環依賴項。 3.需求和導出的兼容性。 4.完全集成了依賴性管理。 5.如果需要，可以將模塊分割成多個文件。 6.支持構造函數。 7.插件支持(自定義加載步驟)。 缺點: 1.語法稍微復雜一點。 2.除非進行了傳輸，否則需要加載程序庫。 3.靜態代碼分析器很難分析。 ~~~ * es6 -- import ~~~ 1.es6 后來進行了重新規范，因此引申出import 這種模塊化方式 優點 1.支持同步和異步加載。 2.語法簡單。 3.支持靜態分析工具。 4.集成在語言中(最終在任何地方都支持，不需要庫)。 5.循環依賴的支持。 缺點 1.新版以后的瀏覽器支持 ~~~ * 總結 ~~~ 1.CommonJS 加載模塊是同步的，所以只有加載完成才能執行后面的操作。像 Node.js主要用于服務器的編程，加載的模塊文件一般都已經存在本地硬盤，所以 加載起來比較快，不用考慮異步加載的方式，所以CommonJS規范比較適用。但 如果是瀏覽器環境，要從服務器加載模塊，這是就必須采用異步模式。所以就有 了 AMD 解決方案 2.import 誕生讓整體的導入更加方便，但由于，沒有一個主流JavaScript運行時在 其當前穩定的分支中支持ES2015模塊。這意味著不支持Firefox、Chrome或 Node.js。幸運的是，許多變頻器都支持模組和填充。目前，為Babel預置的 ES2015可以輕松處理模塊。 3.構建模塊和處理依賴關系非常麻煩。以庫或ES2015模塊形式出現的新解決方案 消除了大部分痛苦。如果您正在考慮啟動一個新的模塊或項目，那么ES2015是正 確的選擇。它將永遠被支持，目前的支持使用變頻器和填充是優秀的。另一方 面，如果您更喜歡使用普通的ES5代碼，那么通常在客戶端的AMD和服務器端的 CommonJS/Node之間進行分割仍然是常見的選擇 4.import在靜態解析階段執行，所以它是一個模塊之中最早執行的 5.`require`是運行時加載模塊 ~~~ [AMD , CMD, CommonJS，ES Module，UMD](https://juejin.cn/post/6844903663404580878) * 參考文章 1.<a href=“https://www.jianshu.com/p/ce92a09ad6eb”>關于node模塊化對import 支持</a> 2.<a href="https://auth0.com/blog/javascript-module-systems-showdown/">關于三者對比的英文文檔</a> 3.<a href="http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html">阮一峰的關于amd 和commjs 區別</a> 4.<a href="https://zccst.iteye.com/blog/2215317">amd/cmd/commonjs三者區別</a>[TOC] md/cmd/commonjs三者區別</a> [參考文章](https://my.oschina.net/qcloudcommunity/blog/2992386)