2020-09-05 前端模塊化以及commonJS與ES6模塊化

在計算機程序開發(fā)中,開發(fā)一個項目往往需要大量的代碼,如果把這些代碼都放在一個文件中太多太多 ,維護起來太困難 。我們根據(jù)功能和方法的把代碼放在不同的文件中這樣每個文件包含的代碼就相對較少。(一個js文件就是一個模塊)這就是模塊化。

模塊化后的優(yōu)點:一、提到代碼的可維護性,二、提高代碼的復用性,三、避免代碼污染

模塊化之后每個js文件都有自己的作用域,就是說每個js文件都是私有的要用的話要遵循一定的規(guī)則:commonJS和ES6模塊化。

CommonJS:

Node應用由模塊組成,采用commonJS模塊規(guī)范。每一個文件就是一個模塊,有自己的作用域。在一個文件里面的定義的變量、函數(shù)、類、都是私有的,其他文件不能隨便用。在服務器端模塊的加載是運行時同步加載的,而在瀏覽器端,模塊需要提前編譯打包處理

基本語法:

導出模塊:exports.變量=value 或者module.exports=value

引入模塊:require(),括號里面可以是第三方的模塊名,可以是自定義的模塊文件路徑

例:let a = 5;

? ? ? ? let addx= function(value) {

? ? ? ? ????return? value + a

};

module.exports.x=x

module.exports.addx= addx

上面的代碼通過module.exports輸出變量x和addx

var ex =reqire("./example.js")

console.log(example);

console.log(example.x);

console.log(example.addx(1));

通過上面的代碼可以發(fā)現(xiàn)require引入的是一個對象


ES6模塊化:

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

export命令用于規(guī)定模塊的對外接口,import命令用于輸入其他模塊提供的功能

let num= 0;

let add =function(a,b){

return a+b

};

export { num ,add };

import { num , add} from "./math";

function test (else) {?

ele.textcontent=add(99+num);

}

如上圖所示,使用import命令的時候,用戶需要知道所要加載的變量名或者函數(shù)名,否則無法加載,為了給用戶提供方便,讓他們不用讀文檔就能加載模塊,就要用到export default命令,為模塊指定默認輸出

ES6模塊與CommonJS模塊的差異

兩個重大的差異:

一、CommonJS模塊輸出的是一個值得拷貝,ES6模塊輸出的是值得引用

二、CommonJS模塊試運行時加載,ES6模塊是編譯時輸出接口

第二個差異是因為CommonJS加載的是個對象,該對象只有在腳本運行時才會生成,而ES6模塊不是對象,它的對外接口只是一種靜態(tài)定義,在代碼靜態(tài)解析階段就會生成


CommonJS規(guī)范主要用于服務端編程,加載模塊是同步的,這并不適合在瀏覽器環(huán)境,因為瀏覽器是異步加載的,因此有了AMD和CMD解決方案

AMD規(guī)范在瀏覽器環(huán)境中異步加載模塊,而且可以并行加載多個模塊,

CMD和AMD規(guī)范相似,都用于瀏覽器編程,依賴就近,延遲執(zhí)行,很容易在Node,js中運行,不過依賴SPM打包

ES6在語言標準層面上,實現(xiàn)了模塊功能,而其實現(xiàn)的簡單,完全可以取代CommonJS和AMD規(guī)范,成為服務器和瀏覽器的模塊化通用的解決方案。

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容