ES6新特性模块化Modules

发布时间：2026-09-26 01:13:52 阅读量： 19 来源： 互联网转载

前言

今天来讲解一下ES6的原生模块化，模块化就是把程序拆分成一个一个的文件，然后通过搭积木一样的方式把这些文件最后整合一个完整的程序。再ES6之前，js并没有自己的模块化体系，一般借助第三方工具，为了避免全局污染问题经常使用闭包，IIFE（立即调用函数表达式）等等再ES6之前是随处可见的。再ES6发布后引入了原生的模块化Module，使用模块化有如下好处。

1.代码高度可重复利用。

2.避免全局污染，每一个模块都有自己独立的空间。

3.更利于升级和维护

4.适合团队协作。

ES6原生模块化使用方法

1.编写模块文件

export default {    id:1}//保存为test.js 放置再根目录下

2.为<ｓｃｒｉｐｔ> 加入type="module"属性，并引入文件。

<ｓｃｒｉｐｔ type="module" src="./test.js"></ｓｃｒｉｐｔ>

3.通过import导入模块

<ｓｃｒｉｐｔ type="module">    import test from "./test.js"    console.log(test)</ｓｃｒｉｐｔ>

至此整个流程就演示完毕了，浏览器运行后就得到test.js的值。需要注意的事项如下

1.必须再ｓｃｒｉｐｔ里加入type="module",否则你将收获一个浏览器的报错信息.

2.import里from的值必须为 / ./ ../ 这3种路劲格式，不能像这样import test from "test.js"。

3.module主要export import2个命令。export用来暴露一个接口，import用来接收暴露的接口.。

export

我们把我们需要的数据通过export给暴露出去。就是如果我这个文件想给与使用者什么东西，那我就通过export给出去，没给出去的别人也就拿不到。export也就相当于一个通道的作用。数据通过我export传输给使用者，下面是export一系列的用法示例。

export default "我是首模块"export Const a="我是字符模块"export const b= {    info:"我是一个对象模块"}//花括号暴露接口Let c={},d= {}export {c,d}//重命名接口使用关键字aslet e=()=>{    alert(3)}export {e as NewName}//此代码存为test.js 在讲解到import的时候可用

可以看到，一个文件可以包含多个export，但是，请注意一个文件只允许有一个或则零个export default 。它的引入方法后面会讲。export的模块必须与暴露的对象建立对应的关系。

错误的export示例

//错误：不能直接给与值export "示例"//错误：必须用{}除非使用export defaultlet a="示例2"export a;//错误：export必须处于顶层let c="示例3"let b=(function (){export c;})()

import

在讲解export的时候我们做了一个test.js现在可以使用它了。import的作用就是接收export并把它们给保存起来。

<ｓｃｒｉｐｔ type="module">    //export default暴露的对象可以取任何名字而且不能使用花括号{}    import test from "./test.js" //export default    import {a} from "./test.js" //export const a    import {b} from "./test.js" //export const b    import {c,d} from "./test.js" //export {c,d}    import {NewName} from "./test.js" //export {e as NewName}    import {f as nf } from "./test.js" //export {f}    //export {f}在import时可通过关键字as改名    console.log(test,a,b,c,d,NewName(),nf)</ｓｃｒｉｐｔ>

除了使用export default不使用花括号外，其他的export在import的时候必须使用花括号。

ES6新特性合集 ES6新特性 Let Const Var的区别 ES6新特性解构赋值 ES6异步编程Promise对象全解析 ES6异步编程从Generator到Async/Await ES6新特性模块化Modules ES6新特性模板字符串Template String ES6新特性 Map的使用方法 ES6新特性之箭头函数 ES6新特性 map() filter() find()使用方法总结

上一篇: 大连企业网站建设如何整理策划与计划书

下一篇: 大连中小企业网站如何写出好的原创内容

ES6新特性模块化Modules

热门文章