前端模塊化規范筆記

honmaple 發布于2019-08-21 10:56 / 1771人閱讀

摘要：目前通行的的模板規范共有兩種和的模塊系統，是參照規范實現的即為服務器端模塊的規范。規范則是非同步加載模塊，允許指定回調函數。

目前通行的Javascript的模板規范共有兩種：CommonJS 和 AMD commonjs

nodejs的模塊系統，是參照commonjs規范實現的

commonjs即為服務器端模塊的規范。 commonjs的規范：根據commonjs規范，一個多帶帶的文件就是一個模塊。加載模塊使用require方法，該方法讀取一個文件并執行，最后返回文件內部的exports對象

commonjs模塊的加載原理

commonjs模塊無論加載多少次，都只會在第一次加載時運行一次，以后再加載，就返回第一次運行的結果，除非手動清除系統緩存。

AMD

commonjs規范加載模塊是同步的，也就是說，只有加載完成，才能執行后面的操作。AMD規范則是非同步加載模塊，允許指定回調函數。由于Node.js主要用于服務器編程，模塊文件一般都已經存在于本地硬盤，所以加載起來比較快，不用考慮非同步加載的方式，所以commonjs規范比較適用。但是，如果是瀏覽器環境，要從服務器端加載模塊，這時就必須采用非同步模式，因此瀏覽器端一般采用AMD規范。

可以理解為AMD即為能在客戶端環境，并且能兼容服務器端模塊的一種模塊規范

AMD的模塊定義：
AMD規范使用define方法定義模塊

Define第一個參數表達依賴的模塊數組，第二個為加載完依賴的模塊數組后，模塊執行的函數

AMD的模塊加載定義：跟commonjs一樣，AMD也采用require()語句來加載模塊，但是與commonjs不同的是，它要求有兩個參數：
第一個參數[module]，是一個數組，里面的成員就是要加載的模塊；第二個參數callback，則是加載成功之后的回調函數

AMD和CMD對比

對于依賴的模塊，AMD是提前執行，CMD是延遲執行。不過 RequireJS 從 2.0 開始，也改成可以延遲執行（根據寫法不同，處理方式不同）。CMD推崇 as lazy as possible.

CMD推崇依賴就近，AMD推崇依賴前置

AMD的API默認是一個當多個用，CMD的API 嚴格區分，推崇職責單一。比如AMD里，require分全局require和局部require，都叫require。CMD里，沒有全局 require，而是根據模塊系統的完備性，提供seajs.use來實現模塊系統的加載啟動。CMD里，每個API都簡單純粹。

ES6 Modules

ES6模塊的設計思想，是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。commonjs和AMD模塊，都只能在運行時確定這些東西。比如，commonjs模塊就是對象，輸入時必須查找對象屬性。

// CommonJS模塊
let { stat, exists, readFile } = require("fs");

// 等同于
let _fs = require("fs");
let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;

上面代碼的實質是整體加載fs模塊（即加載fs的所有方法），生成一個對象（_fs），然后再從這個對象上面讀取3個方法。這種加載稱為“運行時加載”，因為只有運行時才能得到這個對象，導致完全沒辦法在編譯時做“靜態優化”。

ES6模塊不是對象，而是通過export命令顯式指定輸出的代碼，輸入時也采用靜態命令的形式。

// ES6模塊
import { stat, exists, readFile } from "fs";

上面代碼的實質是從fs模塊加載3個方法，其他方法不加載。這種加載稱為“編譯時加載”，即ES6可以在編譯時就完成模塊加載，效率要比CommonJS模塊的加載方式高。當然，這也導致了沒法引用ES6模塊本身，因為它不是對象。

由于ES6模塊是編譯時加載，使得靜態分析成為可能。有了它，就能進一步拓寬JavaScript的語法，比如引入宏（macro）和類型檢驗（type system）這些只能靠靜態分析實現的功能。

除了靜態加載帶來的各種好處，ES6模塊還有以下好處。

不再需要UMD模塊格式了，將來服務器和瀏覽器都會支持ES6模塊格式。目前，通過各種工具庫，其實已經做到了這一點。
將來瀏覽器的新API就能用模塊格式提供，不再必要做成全局變量或者navigator對象的屬性。
不再需要對象作為命名空間（比如Math對象），未來這些功能可以通過模塊提供。
瀏覽器使用ES6模塊的語法如下。

上面代碼在網頁中插入一個模塊foo.js，由于type屬性設為module，所以瀏覽器知道這是一個ES6模塊。

Node的默認模塊格式是CommonJS，目前還沒決定怎么支持ES6模塊。所以，只能通過Babel這樣的轉碼器，在Node里面使用ES6模塊。

用法

export
優先考慮這種寫法而不是一個一個的export

// profile.js
var firstName = "Michael";
var lastName = "Jackson";
var year = 1958;

export {firstName, lastName, year};

提供對外接口必須在接口名與模塊內部變量之間保持一一對應關系

// 報錯
function f() {}
export f;

// 正確
export function f() {};

// 正確
function f() {}
export {f};

最后，export命令可以出現在模塊的任何位置，只要處于模塊頂層就可以。如果處于塊級作用域內，就會報錯，下一節的import命令也是如此。這是因為處于條件代碼塊之中，就沒法做靜態優化了，違背了ES6模塊的設計初衷。

import
使用export命令定義了模塊的對外接口以后，其他JS文件就可以通過import命令加載這個模塊（文件）。

// main.js

import {firstName, lastName, year} from "./profile";

function setName(element) {
  element.textContent = firstName + " " + lastName;
}

上面代碼的import命令，就用于加載profile.js文件，并從中輸入變量。import命令接受一個對象（用大括號表示），里面指定要從其他模塊導入的變量名。大括號里面的變量名，必須與被導入模塊（profile.js）對外接口的名稱相同。

如果想為輸入的變量重新取一個名字，import命令要使用as關鍵字，將輸入的變量重命名。

import { lastName as surname } from "./profile";

注意，import命令具有提升效果，會提升到整個模塊的頭部，首先執行。

ES6模塊加載的實質

ES6模塊加載的機制，與CommonJS模塊完全不同。CommonJS模塊輸出的是一個值的拷貝，而ES6模塊輸出的是值的引用。
ES6的輸入有點像Unix系統的“符號連接”，原始值變了，import輸入的值也會跟著變。因此，ES6模塊是動態引用，并且不會緩存值，模塊里面的變量綁定其所在的模塊。

參考資料

IMWEB團隊博客
知乎問答
阮一峰老師的ES6教程

GPU云服務器云服務器前端規范前端規范文檔前端模塊化前端模塊

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

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

webpack 學習筆記（一）

摘要：引言最近在學習，發現好多知識點，之前一點都沒有接觸過，如等等。使用本地安裝，會存于文件夾內與屬性內，更方便項目文件遷移以及協同開發等情況。引言最近在學習webpack，發現好多知識點，之前一點都沒有接觸過，如babel、core-js、browserslist等等。以前習慣了使用cli構建項目，很多東西不用考慮，拿來就用，這樣的碼農是不會有能力提升的，必須了解更多的知識點，才能成為...

zhangwang 2019-08-26 10:36 評論0 收藏0
JS學習筆記 - 模塊化

摘要：在開發大型的項目中，可能會使用到管理的模塊化工具。說道，學習過的同學會比較熟悉，是服務器模塊的規范，采用了這個規范。可能是未來模塊化解決方案的首選。本文章記錄本人在學習 JavaScript 中理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。在開發大型的web項目中，可能會使用到管理js的模塊化工具。但是在前端輪子漫天飛的時代。那一款js模塊化工具真正適合我...

CntChen 2019-08-22 10:57 評論0 收藏0
CSS學習筆記(十六) CSS最佳實踐之可維護性篇

摘要：國內各大公司都已經投入使用，在一些常見的網站，如淘寶騰訊小米等移動站點，隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及，這里推薦閱讀同學寫的專題文章。前言 CSS代碼難維護眾所皆知。為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現；作用于某個元素上的樣式又可能來自單個樣式規...

newtrek 2019-08-28 18:21 評論0 收藏0
CSS學習筆記(十六) CSS最佳實踐之可維護性篇

摘要：國內各大公司都已經投入使用，在一些常見的網站，如淘寶騰訊小米等移動站點，隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及，這里推薦閱讀同學寫的專題文章。前言 CSS代碼難維護眾所皆知。為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現；作用于某個元素上的樣式又可能來自單個樣式規...

keke 2019-08-01 14:55 評論0 收藏0
CSS學習筆記(十四) 我們前端是怎么跟設計師溝通的

摘要：前端期望中的設計能給予的除了之外，還有設計上游崗位傳遞下來的東西。份文件一份好的文件是分層清晰，設計規范的文件。有些頁面設計師沒有考慮到。地址如下原文鏈接我們前端是怎么跟設計師溝通的豪情博客園 1.交付一般設計師給前端的只有psd，沒有其它多余的東西，連基本的文檔都懶得給。前端期望中的設計能給予的除了psd之外，還有設計上游崗位傳遞下來的東西。比如：產品原型，需求文檔，交...

NusterCache 2019-08-28 18:06 評論0 收藏0