欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端JavaScript模塊化解析之ESModule用法示例

 更新時間：2025年07月11日 09:25:55   作者：果殼~  
ES Module是ECMAScript 2015引入的模塊化規(guī)范,通過export和import關(guān)鍵字實(shí)現(xiàn)模塊的導(dǎo)入導(dǎo)出,這篇文章主要介紹了前端JavaScript模塊化解析之ESModule用法的相關(guān)資料,需要的朋友可以參考下

基本介紹

  • JavaScript沒有模塊化一直是它的痛點(diǎn)，所以才會產(chǎn)生我們前面學(xué)習(xí)的社區(qū)規(guī)范:CommonJS、AMD、CMD等
    所以在ES推出自己的模塊化系統(tǒng)時，大家也是興奮異常。
  • ES Module和CommonJS的模塊化有一些不同之處
  • 一方面它使用了import和export關(guān)鍵字:
  • 另一方面它采用編譯期的靜態(tài)分析，并且也加入了動態(tài)引用的方式
  • ES Module模塊采用export和import關(guān)鍵字來實(shí)現(xiàn)模塊化
    • export負(fù)責(zé)將模塊內(nèi)的內(nèi)容導(dǎo)出，
    • import負(fù)責(zé)從其他模塊導(dǎo)入內(nèi)容;
  • 了解:采用ES Module將自動采用嚴(yán)格模式:use strict

基本使用

// foo.js
export const name = "why"
export const age = "18"

// main.js
import {name,age} from "./foo.js"

console.log(name)
console.log(age)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <!--這里必須設(shè)置 type="module" 否則瀏覽是無法識別的-->
		<script src="main.js" type="module"></script>
	</body>
</html>

讓模塊化生效的兩個前提條件

  1. script標(biāo)簽要加上 type=“module”
  2. index.html的訪問必須是以服務(wù)器的方式訪問。也就是訪問協(xié)議必須是http或者https 直接本地文件打開file://這個協(xié)議是不支持的

導(dǎo)入導(dǎo)出方式3種

// foo.js
// 導(dǎo)出方式
// 1. 第一種方式: export 聲明語句
export const name = "why"
export const age = "18"
export function foo(){
	console.log("foo function")
}
export class Person {}

// 2. 第二種: export 導(dǎo)出 和 聲明分開
const name = "why"
const age = "18"
function foo(){
	console.log("foo function")
}
export {
	name,
	age,
	foo
}

// 3. 第三種方式：第二種導(dǎo)出時起別名
const name = "why"
const age = "18"
function foo(){
	console.log("foo function")
}
export {
 	name as fName,
 	age as fAge,
 	foo as fFoo
}

導(dǎo)入方式

// 導(dǎo)入方式
// 1.導(dǎo)入方式1：普通導(dǎo)入
import {name,age,foo,Person} from "./foo.js"
// 2.導(dǎo)入方式二：起別名
import {name as fName,age as fAge,foo as fFoo} from "./foo.js"
// 3.導(dǎo)入方式三：將所有哦的內(nèi)容放到一個標(biāo)識符中
import * as foo from "./foo.js"

console.log(foo.name)
console.log(foo.age)

console.log(name)
console.log(age)

結(jié)合使用

當(dāng)我們某個目錄下有很多js文件,導(dǎo)出了很多工具方法如下

// utils/math.js
function add(a,b){
	return a+b;
}

function sub(a,b){
	return a-b
}

export {
	add,
	sub
}

//  utils/format.js
function timeFormat(){
	return "2222-12-12"
}

function priceFormat(){
	return "222.22"
}

export {
	timeFormat,
	priceFormat
}

然后在main.js中引入這些模塊的函數(shù)，代碼會變的很麻煩如下

// main.js
import {add,sub} from "./utils/math.js"
import {timeFormat,priceFormat} from './format.js'

因此一般在utils目錄下會統(tǒng)一定義一個index.js用來將該目錄下的所有需要導(dǎo)出的變量進(jìn)行一個統(tǒng)一導(dǎo)出。如下
這樣mian.js就可以只導(dǎo)入utils/index.js即可

// utils/index.js
// 導(dǎo)出方式一
import {add,sub} from './math.js'
import {timeFormat,priceFormat} from './format.js'

export {
add,
sub,
timeFormat,
priceFormat
}

導(dǎo)出方式一還是顯得太復(fù)雜，可以結(jié)合使用

// utils/index.js
// 導(dǎo)出方式二：
export {add,sub} from './math.js'
export {timeFormat,priceFormat} from './format.js'

// 如果要全部導(dǎo)出可如下寫法
// 導(dǎo)出方式三：
export * from './math.js'
export * from './format.js'

default用法

當(dāng)寫的某一個變量，是非常常用的時候，可以使用默認(rèn)導(dǎo)出。默認(rèn)導(dǎo)出的方式如下

// foo.js
const name = "zxh"
const age = 18 
const foo = 'foo value'

// 1.默認(rèn)導(dǎo)出的方式一：
export {
	name,
	age,
	foo as default
}

// 2.默認(rèn)導(dǎo)出的方式二：常見
export default foo

// 注意默認(rèn)導(dǎo)出只能有一個

main.js在導(dǎo)入默認(rèn)導(dǎo)出的變量時 如下使用

// 不用進(jìn)行結(jié)構(gòu),可自定義接收的變量名 實(shí)際上是將 foo.js中的  foo賦值到aaa上
import aaa from './foo.js'

console.log(aaa)

import函數(shù)

如下代碼，在執(zhí)行的時候是同步執(zhí)行的，
首先瀏覽會先將要導(dǎo)入的文件下載下來，進(jìn)行解析，然后才會執(zhí)行后續(xù)的代碼。

import {name,age,foo} from './foo.js'
console.log("導(dǎo)入的代碼沒有解析完之前，后續(xù)的代碼是不會運(yùn)行的")

如果希望異步執(zhí)行：比如頁面初始化的時候并不需要用到導(dǎo)出的函數(shù)，只是在特定時候才需要使用。那么就可以使用import函數(shù)來進(jìn)行異步執(zhí)行

import("./foo.js").then(res=>{
	console.log("res:",res.name)
})

console.log("main.js 執(zhí)行成功")

// 查看控制臺輸出,可以看出是異步執(zhí)行
main.js 執(zhí)行成功
res:zxh

ES Module的解析流程

具體流程省略

導(dǎo)入的變量無法，導(dǎo)入方無法修改

需要重點(diǎn)提醒一下：導(dǎo)出的變量，是不允許在導(dǎo)入端被修改的
如下

// foo.js
export let name = "zifeiyu"

import {name} from "./foo.js"
// 這里修改是會報(bào)錯的
name = 333

// 控制臺報(bào)錯
Uncaught TypeError: Assignment to constant variable.
    at main.js:3:6

導(dǎo)出的變量，只能由導(dǎo)出方進(jìn)行修改

// foo.js
export let name = "zifeiyu"
setTimeout(() => {
	name = "Kobe"
},100)

// main.js
import {name} from "./foo.js"
console.log(name)
setTimeout(()=>{
	console.log(name)
},2000)

可以看到控制臺輸出，說明導(dǎo)出方可以修改這個值

zifeiyu
Kobe

如果確實(shí)想在導(dǎo)入這邊對導(dǎo)出的值進(jìn)行修改，可以自定義set回調(diào)函數(shù)

// foo.js
export let name = "zxh"
export function setName(a){
	name = a
}

import {name,setName} from "./foo.js"
console.log(name)
setName(3333333)
console.log(name)

CommonJS和ESModule相互引用

解釋一下：

  1. 模塊A通過commonJS進(jìn)行導(dǎo)出，然后模塊B通過ESModule的方式進(jìn)行導(dǎo)入。
  2. 模塊C通過ESModule的方式進(jìn)行導(dǎo)出，然后模塊B通過commonJS的方式進(jìn)行導(dǎo)入。

能否實(shí)現(xiàn)呢？
得分情況

  1. 瀏覽器：不能實(shí)現(xiàn)，因?yàn)槟J(rèn)不支持CommonJS
  2. node環(huán)境下：分情況
    1. 之前的node版本，只支持CommonJS
    2. 現(xiàn)在node版本逐漸在轉(zhuǎn)用ESModule
  3. 正常開發(fā)環(huán)境webpack： 可以使用

實(shí)驗(yàn)一下

# 在一個干凈的目錄下
# 1.通過npm幫我們初始化一下項(xiàng)目，也就是生成 package.json
npm init
# 2.要使用webpack 需要安裝 webpack 和 webpack-cli
npm install webpack webpack-cli -D
# 3.新建目錄src,因?yàn)閣ebpack默認(rèn)的打包入庫是  src/index.js

編寫幾個js進(jìn)行互相引用
這邊案例是打算

  • foo.js 通過commonjs導(dǎo)出
  • bar.js 通過ESmodule導(dǎo)出
  • index.js
    • 通過ESmodule 導(dǎo)入foo.js
    • 通過commonjs導(dǎo)入bar.js

代碼如下

// src/foo.js
const fooName = "foo"
const fooAge = 18
// commonjs導(dǎo)出
module.exports = {
	fooName,
	fooAge
}

// src/bar.js
const barName = "foo"
const barAge = 18
// esmodule導(dǎo)出
export{
	barName,
	barAge
}

// src/index.js
es module
import { fooName, fooAge } from "./foo"
console.log(fooName, fooAge)


// commonjs 導(dǎo)入
const {barName,barAge} = require('./bar')
console.log(barName, barAge)

# 打包 會在當(dāng)前命令所在目錄下 創(chuàng)建一個dist文件夾  dist文件夾下會有一個main.js
npx webpack

在當(dāng)前目錄下創(chuàng)建index.js 對打包后的js進(jìn)行引用即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="dist/main.js"></script>
	</body>
</html>

瀏覽器訪問可以看到正常輸出，說明互相引用是可以的。

具體原理還得看main.js webpack打包出來的文件

總結(jié)

到此這篇關(guān)于前端JavaScript模塊化解析之ESModule用法示例的文章就介紹到這了,更多相關(guān)JS模塊化ESModule內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論