(ES6)ECMAScript6新特性 – 模块化

模块化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"属性。
转载请注明出处,谢谢!
THE END
分享
二维码
打赏
< <上一篇
下一篇>>