① 概述
-
在 ES6 之前，社区制定了一些模块加载方案：
- 最主要的有 CommonJS 和 AMD 两种。前者用于服务器node.js，后者用于浏览器。
-
ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
-
ES6 Module 模块带来的好处？
- 提高代码的复用率、维护性
- 可以很好地解决依赖关系的管理
- 避免变量的污染、命名冲突
- 开发大型应用程序
-
注意：ES6模块化测试必须在服务器上测试，如果本地浏览器访问会报错！
-
我们需要提前搭建一个静态页面Web服务器，在这里我给大家提前准备了一个名为
server.jsNode.js文件 -
具体运行命令： node server.js （需要提前安装node环境，在命令行处执行）
② ES6模块化的基本使用：
-
模块功能主要由两个命令构成：export和import。
- export命令用于规定模块的对外接口
- import命令用于输入其他模块提供的功能。
-
export命令：用于规定模块的对外接口
- 外部能够读取模块内部的某个变量、函数、类等
- 使用as关键字可以重命名
- 该命名可以出现在模块的任何位置，除了块作用域内，必须处在顶层
- 一个模块就是一个独立的文件
-
import命令：用于输入其他模块提供的功能。
- 变量、函数
- 可以使用as关键字
- 输入的变量都是只读的
- import命令具有提升效果
-
module的加载实现-浏览器加载
- 在HTML中加载使用传统的JavaScript脚本？ 是通过
<script></script>标签直接加载加载 - 但是要加载ES6模块，就得在
<script></script>标签上增加type="module"属性
- 在HTML中加载使用传统的JavaScript脚本？ 是通过
<script type="module" src="xxx.js"></script>
案例1：
- 接下来做一个简单实例，我们首先定义三个文件
- profile.js 模块文件，负责定义模块，使用export输出变量、函数
- main.js 使用模块文件，负责导入并使用模块
- index.html 引入demo.js，测试模块的使用
- 具体代码如下：
//===== profile.js 文件 ==========
//使用export 导出两个变量与1个函数
export let name = 'zhangsan';
export let age = 22;
export function fun() {
console.log("Hello World!");
}
//==== main.js 文件 =====
//通过import命令加载模块，接受一对大括号，里面指定要从其他模块导入的变量名。
//大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。
import {
name,age,fun} from "./profile.js";
//输出测试
console.log(name);
console.log(age);
fun();
- index.html 测试文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6 Module的基本使用</title>
</head>
<body>
<h3>ES6 Module</h3>
<script type="Module" src="./main.js"
最低0.47元/天 解锁文章
3595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
