（ES6）ECMAScript6新特性 – 模块化

Ne-21 • 2021-08-13 • 编程技术 • 364 阅读

模块化Module

ES5不支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。

在项目目录下新建user.js


// 属性
let name = "admin"
let age = 20
let email = "admin@qq.com"

// 方法
function run() {
    console.log("跑步");
}

// 一个对象
let param = { id: 10, phone: 12315 }

// 当前js中的属性，函数，对象，想让外部js使用，必须导出

export { name, param, run } // 指定导出的对象

export default "User.js" // 全部导出

在新建main.js
 来调用上面user.js 中的内容


// 调用方需要导入才可以使用

// import { name, param,run } from "./User.js"

// console.log(name);
// console.log(param.id);

// 全部导出对应的全部导入
import * as user from "./User.js"

console.log(user.name);
console.log(user.run);

注意：

由于浏览器脚本的默认语言是 JavaScript，因此type="application/javascript"可以省略。在报错中了解到，是说无法在模块外部使用import语句，因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。

版权声明：
作者：Ne-21
链接：https://blog.gocos.cn/archives/86.html
来源：云淡风轻
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
（ES6）ECMAScript6新特性 – 模块化
模块化Module ES5不支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域……
<<上一篇
下一篇>>