ECMAScript笔记——ES6模块和字符串模板

ES6模块的定义

• 在ES6提供了模块化的概念，通过引用时改变type属性，加载模块。
• 模块是自动运行在严格模式下且没有办法退出运行的JavaScript代码。
• 模块可以是函数、数据、类。需要导出指定的模块名，才能被其他模块访问。
• 加载模块时，总是从上至下加载，因为module类型默认使用defer属性。

<script type="module" src="module1.js"></script>
<script type="module" src="module2.js"></script>

非模块化的弊端

• 代码杂乱无章，没有条理性，不便于维护，不便于复用。
• 很多代码重复、逻辑重复。
• 全局变量污染。
• 不方便保护私有数据（闭包）。

ES6模块的导出

• 给数据、函数、类添加一个export，就可以导出模块。
• 一个配置型的JavaScript文件中，可能会封装多种函数，给函数加上export关键字，就能在其他文件里访问到。

// 数据模块
export const obj = {a:1}
// 函数模块
export const sum = (a,b) => a + b;
// 类模块
export class My extends React.Components {}

ES6模块的引用

• 在另外的JS文件中，可以引用上面定义的模块。
• 使用import关键字，选择引用指定模块，或者是引用所有模块。
• 当模块没有可导出模块，全都是定义的全局变量的时候，可以使用无绑定引用。
• 如果给模块加上default关键字，那么该JS默认只导出该模块。

1、引用指定模块。

// 引用obj数据、My类
import {obj,My} from './xx.js'

2、引用所有模块。

// 引用所有模块
import * as all from './xx.js'

3、无绑定引用。

import './xx.js'

4、默认模块的使用。

// 默认模块的定义
let sum = (a,b) => a + b;
export default sum;

// 导入默认模块
import sum from './xx.js'

字符串模板

• ES6之前，在JS里拼接字符串，是通过连接符”+”来进行拼接的。
• 并且如果换行等需要使用转义字符，否则就会报错。
• 这样让我们书写十分不便。在ES6中就引入了模板字符串，解决这一问题。
• 模板字符串使用反引号``来代替普通字符串中的用双引号和单引号。
• 模板字符串可以包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串。
• 该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。
• 在模版字符串内使用反引号``时，需要在它前面加转义符\。

let sum = (a,b) => a + b;
document.body.innerHTML = `1+2 的计算结果为 ${sum(1,2)} 。`;

运行结果：