简介
早期的 Web 网站主要由 HTML 和 CSS 组成。如果有任何 JavaScript 的代码需要在页面中执行，通常是以小的代码片段的形式来提供功能和交互性。结果就是通常 JavaScript 的代码都会被编写在一个文件中，然后通过 script 标签加载到页面中。开发人员可以将 JavaScript 代码拆分成多个 js 文件，但是所有 JavaScript 变量和函数都会被添加到全局作用域中。
但是随着 Angular、React 以及 Vue 等 Web 框架技术的发展，并且大部分公司都在开发高级 Web 应用而非桌面应用，JavaScript 就变得越来越重要了。将能够复用的代码逻辑封装成公共代码，并且在避免全局命名空间污染的前提下，将其模块化，这一需求就成为了必要。
ECMAScript 2015 规范引入了允许使用 import 和 export 语句的 modules 概念。在本教程中，你将学习什么是 JavaScript 模块以及如何使用 import 和export 管理代码结构。
模块化编程
在 JavaScript 引入模块化概念之前，当开发人员想要将代码封装时，需要创建多个文件并将这些文件链接为单独的脚本。作者为了说明这一点，创建了一个示例：index.html 文件和两个 JavaScript 文件，functions.js 和script.js。
index.html 文件将显示两个数字的和，差，乘积和商的结果，并在脚本标签中链接到两个 JavaScript 文件。在文本编辑器中新建 index.html 并添加以下代码：
html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Modulestitle>
head>
<body>
<h1>Answersh1>
<h2><strong id="x">strong> and <strong id="y">strong>h2>
<h3>Additionh3>
<p id="addition">p>
<h3>Subtractionh3>
<p id="subtraction">p>
<h3>Multiplicationh3>
<p id="multiplication">p>
<h3>Divisionh3>
<p id="division">p>
<script src="functions.js">script>
<script src="script.js">script>
body>
html>
该 HTML 将在 h2 标签中显示变量 x 和 y 的值，并在其下 p 元素中显示这些变量的运算值。元素 id 属性为了方便 script.js 文件中的 DOM 操作，script.js 文件还会设置 x 和 y 的值。更多 HTML 相关内容可以参考我的如何使用 HTML 创建网站系列文章。
functions.js 文件则提供第二个脚本中将要使用到的数学函数。打开 functions.js 文件并添加以下内容：
最低0.47元/天 解锁文章
438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
