前端JavaScript模块化解析之ESModule用法示例_javascript技巧

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

// main.jsimport {name,age} from "./foo.js"console.log(name)console.log(age)

让模块化生效的两个前提条件

// 导入方式// 1.导入方式1：普通导入import {name,age,foo,Person} from "./foo.js"// 2.导入方式二：起别名import {name as fName,age as fAge,foo as fFoo} from "./foo.js"// 3.导入方式三：将所有哦的内容放到一个标识符中import * as foo from "./foo.js"console.log(foo.name)console.log(foo.age)console.log(name)console.log(age)

当我们某个目录下有很多js文件,导出了很多工具方法如下

// utils/math.jsfunction add(a,b){ return a+b;}function sub(a,b){ return a-b}export { add, sub}

// utils/format.jsfunction timeFormat(){ return "2222-12-12"}function priceFormat(){ return "222.22"}export { timeFormat, priceFormat}

然后在main.js中引入这些模块的函数，代码会变的很麻烦如下

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

因此一般在utils 目录下会统一定义一个index.js用来将该目录下的所有需要导出的变量进行一个统一导出。如下这样mian.js就可以只导入utils/index.js即可

// utils/index.js// 导出方式一import {add,sub} from './math.js'import {timeFormat,priceFormat} from './format.js'export {add,sub,timeFormat,priceFormat}

导出方式一还是显得太复杂，可以结合使用

// utils/index.js// 导出方式二：export {add,sub} from './math.js'export {timeFormat,priceFormat} from './format.js'// 如果要全部导出可如下写法// 导出方式三：export * from './math.js'export * from './format.js'

当写的某一个变量，是非常常用的时候，可以使用默认导出。默认导出的方式如下

// foo.jsconst name = "zxh"const age = 18 const foo = 'foo value'// 1.默认导出的方式一：export { name, age, foo as default}// 2.默认导出的方式二：常见export default foo// 注意默认导出只能有一个

main.js在导入默认导出的变量时 如下使用

// 不用进行结构,可自定义接收的变量名 实际上是将 foo.js中的 foo赋值到aaa上import aaa from './foo.js'console.log(aaa)

如下代码，在执行的时候是同步执行的，首先浏览会先将要导入的文件下载下来，进行解析，然后才会执行后续的代码。

import {name,age,foo} from './foo.js'console.log("导入的代码没有解析完之前，后续的代码是不会运行的")

如果希望异步执行：比如页面初始化的时候并不需要用到导出的函数，只是在特定时候才需要使用。那么就可以使用import函数来进行异步执行

import("./foo.js").then(res=>{ console.log("res:",res.name)})console.log("main.js 执行成功")

// 查看控制台输出,可以看出是异步执行main.js 执行成功res:zxh

需要重点提醒一下：导出的变量，是不允许在导入端被修改的如下

// foo.jsexport let name = "zifeiyu"

import {name} from "./foo.js"// 这里修改是会报错的name = 333

// 控制台报错Uncaught TypeError: Assignment to constant variable. at main.js:3:6

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

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

可以看到控制台输出，说明导出方可以修改这个值

能否实现呢？得分情况

# 在一个干净的目录下# 1.通过npm帮我们初始化一下项目，也就是生成 package.jsonnpm init# 2.要使用webpack 需要安装 webpack 和 webpack-clinpm install webpack webpack-cli -D# 3.新建目录src,因为webpack默认的打包入库是 src/index.js

编写几个js进行互相引用这边案例是打算

// src/foo.jsconst fooName = "foo"const fooAge = 18// commonjs导出module.exports = { fooName, fooAge}

// src/bar.jsconst barName = "foo"const barAge = 18// esmodule导出export{ barName, barAge}

// src/index.jses moduleimport { fooName, fooAge } from "./foo"console.log(fooName, fooAge)// commonjs 导入const {barName,barAge} = require('./bar')console.log(barName, barAge)

# 打包 会在当前命令所在目录下 创建一个dist文件夹 dist文件夹下会有一个main.jsnpx webpack

在当前目录下创建index.js 对打包后的js进行引用即可

浏览器访问可以看到正常输出，说明互相引用是可以的。

具体原理还得看main.js webpack打包出来的文件

到此这篇关于前端JavaScript模块化解析之ESModule用法示例的文章就介绍到这了,更多相关JS模块化ESModule内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

上一篇：从加载到渲染的前端性能优化全攻略指南java

下一篇：php编程基础教程源码下载