目前前端模組化規範比較多,有主張非同步載入的amd和cmd,還有同步載入的commonjs,還有es6實現的esm,等等(以後再有新知識再補充),這裡做一下總結
amd和cmd都使用非同步載入的方式,代表作如下
規範代表作
amdrequirejs
cmdseajs
我個人比較喜歡seajs,用起來方便好用
amd和cmd都是執行時引入
commonjs是同步載入的方式,適用於服務端.
因為服務端使用此標準載入的都是本地的檔案,非常快,也就無所謂了
commonjs是require進入乙個物件,是非靜態的,是在執行時才引入
es module,也就是es6的模組化機制
esm是靜態模組化實現,當使用import的時候,引入模組不是物件,而是通過export指定輸出的**,import引入輸出的**(只是乙個記憶體引用位址,同時是不能改變的這個位址的,所以物件屬效能修改,但是變數不能修改),能夠實現靜態檢查,在編譯之時就已經確定模組關係
esm預設使用嚴格模式
import具有提公升效果,提公升到模組的頂部,並要寫在模組的頂層作用域內,不能寫在if-else內或者函式內
這是esm不同於amd , cmd , commonjs 的地方.
amd和cmd都是非同步載入實現,但是amd推薦依賴前置並先載入好(後來好像也變成了和cmd一樣的策略了),而cmd推薦依賴就近載入 ; 個人比較喜歡seajs
amd/cmd是非同步載入方案,適用於瀏覽器端
commonjs是同步載入方案,適用於服務端,比如node
commonjs
esm執行時載入
編譯時輸出介面(唯讀的,類似於const宣告的變數)
輸出值得拷貝(輸出後,模組內再變化就不能被外部感知,除非寫函式獲取)
輸出值得引用(或者說是輸出記憶體位址的引用),模組內部的變化會被外部感知,如例1
/*-----------------------moduleb-------------------------------*/
let counter = 3;
function
inccounter
() function
getcounter
() module.exports = ;
/*-----------------------modulea-------------------------------*/
let b = require('./moduleb');
// 獲取counter不會變化
console.log(b.counter); // 3
b.inccounter();
console.log(b.counter); // 3
// 寫乙個函式獲取counter變數
console.log(b.getcounter()); // 3
b.inccounter();
console.log(b.getcounter()); // 4
前端模組化方案總結
js設計之初，是用來進行表單驗證等工作的，所以那個年代的js 量相當少，邏輯也是比較簡單的。但是隨著cpu 瀏覽器效能的大幅度提公升，js從乙個簡單的驗證器一躍成為當前最為流行的程式語言之一。隨之而來的是前端 量的迅速膨脹，邏輯也是變的相當複雜。如果我們還是像當初一樣，把變數和方法寫在根作用於win...
前端模組化
前端模組化解決什麼問題？有了模組，我就可以很方便的使用別人的 想要什麼功能，就用載入什麼模組。但是，這樣做需要有乙個前提，那就是大家必須以同樣的方式編寫模組，否則就亂套了。所以組內需要有一套統一的模組規範。如何實現模組？1 物件字面量的變體 2 js設計模式的模組模式 3 採用成熟的庫檔案。前兩種方...
前端模組化
定義 具有相同屬性和行為的事物的集合 在前端中 將一些屬性比較類似和行為比較類似的內容放在同乙個js檔案裡面，把這個js檔案稱為模組 目的 為了每個js檔案只關注與自身有關的事情，讓每個js檔案各行其職 模組化 指的就是遵守commonjs規範，解決不同js模組之間相互呼叫問題 commonjs a...