黑马程序员
《 前端模块化开发教程
（）》
教学设计
课程名称：
授课年级：
授课学期：
教师姓名：
年月
课题名称 第 章 模块化开发
计划
课时
课时
教学引入
随着互联网的发展，全栈工程师（）的概念开始兴起，
全栈工程师可以承担用户界面、业务逻辑、数据建模、服务器、网络和环境等
方面的开发工作，这意味着全栈工程师应该熟悉各层间的交互。现
在， 的出现使 语言可以进行服务器端的开发并可与数据库交
互，从而降低了开发人员的学习成本，为程序开发创造了良好的条
件。 是采用模块化开发的，下面将详细讲解 的安装和模块化开
发的基础知识。
教学目标
使学生掌握 的安装和使用，能够完成运行环境的搭建
使学生掌握 模块化开发，能够完成模块化成员的导入和导出操作
使学生掌握 系统模块和第三方模块的使用，能够实现项目的功能
使学生掌握 项目中 模块的使用，能够完成项目的自动化构建
使学生熟悉 项目依赖管理，能够理解 文件的作用
使学生熟悉 中的模块加载机制，能够正确完成模块的加载
教学重点
中的 和 !
使用 " 模块进行文件操作
工具
压缩并抽取 #$%& 中的公共代码
压缩并转换 & 语法
压缩并转换 语法
教学难点
工具
压缩并抽取 #$%& 中的公共代码
压缩并转换 & 语法
压缩并转换 语法
模块加载机制
教学方式 课堂教学以 ''$ 讲授为主，并结合多媒体进行教学
教
学
过
程
第一课时（Node.js 下载和安装、Node.js 环境常见安装失败情况、Node.js 的
组成、Node.js 基础语法）
一、复习巩固
教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲
解。
二、通过直接引入的方式导入新课
是一个基于 ()!*+ 引擎的 代码运行环境，也可以
说是一个运行时平台，提供了一些功能性的 ,'-，例如文件操作 ,'-、网络通
信 ,'-。大家在学习 基础知识时，一般是在浏览器中运行
代码，浏览器就是 代码的运行环境；而如果在 平台运行
代码， 就是 代码的运行环境。
本节讲解 下载和安装、 环境常见安装失败情况、
的组成，以及 基础语法。
三、新 课讲 解
知识点 1-Node.js 下载和安装
教师通过 ''$ 结合实际操作的方式讲解 的下载和安装步骤，并验证
是否安装成功。
./ 的下载和安装。
首先打开 官方网站，找到 下载地址。
下载“+0&$”版本（&$ 是提供长期支持的版本，只进行微
小的 Bug 修复且版本稳定）。
下载成功后，去保存路径里找到 1+01 2! 文件，此
文件就是我们下载的 安装包。
双击 1+01 2! 安装包进行安装，会弹出安装提示对
话框，安装过程全部使用默认值，直至安装完成。
./ 测试 是否安装成功。
按“3”组合键，打开“运行”对话框，输入 !。
单击“确定”按钮，或者直接按“”键，会打开 ! 命令提示符
界面。
在 ! 命令提示符界面中，输入命令“1”，按“”键，显
示当前安装的 版本。
若想要退出 ! 窗口，可以输入“ ”并按“”键，或者单击
右上角的“4”关闭按钮退出。
小提示，如果是 55 系统可以使用 '5) 工具测试
是否安装成功。
知识点 2-Node.js 环境常见安装失败情况
教师通过 ''$ 结合实际操作的方式讲解如何处理 环境安装失败的
情况。
./ 为什么会有安装失败的情况。
由于使用的系统配置是不统一的，在一些系统配置中会有不稳定
的配置，可能会导致 环境安装失败。
./ 错误代号 60 的解决方法。
失败原因是：系统账户权限不足。
解决步骤：
使用管理员身份运行 '5) 命令提示符工具。
以管理员身份进入 '5) 命令提示符界面。
在 '5) 命令提示符界面中，输入运行安装包命令
“! 7 安装包位置”，例如 !
78(9:;::<5:1+01 2!
.0/ 执行命令报错的解决方法。
失败原因是： 安装目录写入环境变量失败。
解决步骤：
首先找到 的安装目录，本机的 安装目录是
(9:'!:，将该目录地址进行复制。
右击“此电脑”图标，选择“属性”命令，进入“系统”界面，执行
一系列操作，设置 ') 环境变量。
0
完成上述步骤后，如果命令提示符工具处于打开状态，则需
要关闭命令提示符工具并重新打开它，') 环境变量才能生
效。
知识点 3-Node.js 的组成
教通过 ''$ 的方式讲解 的组成，并对比和浏览器端 组成
的区别。
./ 对比 和浏览器端 。
浏览器端 和 的核心语法都是 (%,。
是运行在服务端的 。
./ 回顾浏览器端 的组成部分。
(%, 是 的核心语法。
<=%（文档对象模型）是 #$%& 和 >%& 的应用程序接口
（,'-），用于控制文档的内容与结构。
?=%（浏览器对象模型）可以对浏览器窗口进行访问和操作。
.0/ 的组成部分。
是由 (%, 以及 环境提供的一些附加 ,'- 组
成的，包括文件、网络和路径等一些更加强大的 ,'-。
.2/ 在客户端和服务端的区别。
在客户端， 需要依赖浏览器提供的 引擎解析
执行，浏览器还提供了对 <=% 的解析，所以客户端的
不仅应用核心语法 (%,，还会操作 <=% 和
?=%，常见的应用场景如用户交互、动画特效、表单验证、发
送 , 请求等。
在服务器端， 不依赖浏览器，而是由特定的运行环境
提供的 引擎解析执行，例如 。服务器端的
应用核心语法 (%,，但是不操作 <=% 和
?=%。它常常用来做一些在客户端做不到的事情，例如操作数
据库、操作文件等。另外，在客户端的 , 操作只能发送请
求，而接收请求和做出响应的操作就需要服务端的 来
完成。
知识点 4-Node.js 基础语法
教师通过 ''$ 结合实际操作的方式讲解如何使用 基础语法。
./ 教师通过案例演示在 中如何执行一个 脚本文件。
定义一个 文件（如 )5），并在该文件中使用
./输入一句代码。
在命令行工具中，切换到该 )5 文件所在目录，输入
)5。
观察命令行工具中是否会打印出 ./中的内容。
./ 通过 命令解析和执行一个 脚本文件。
根据 命令指定的文件名称，读取 脚本文件。
解析和执行 代码。
将执行后的结果输出到命令行中。
四、归纳总结
2
教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予
指导。
五、布置作业
教师通过高校教辅平台（)977)@ !）布置本节课作业以及下节课的
预习作业。
第二课时（Node.js 全局对象 global、传统 JavaScript 开发的弊端、模块化的
概念）
一、复习巩固
教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲
解。
二、通过直接引入的方式导入新课
在使用 的过程中，在浏览器中默认声明的变量、函数等都属于
全局对象 5，而在 代码的运行环境中没有 <=% 和 ?=%，那么
我们刚在 )5 文件中使用的 ./是来自于哪里呢？由此问题
引出 全局对象 。
支持模块化开发，用模块化可以把一个非常复杂的系统结构细化
到具体的功能点，每个功能点看作一个模块，然后通过某种规则把这些小的模
块组合到一起，构成模块化系统。
在讲解 模块化开发前，先分析传统 开发的弊端，再引出
模块化开发的概念。
三、新课讲解
知识点 1-Node.js 全局对象 global
教师通过 ''$ 结合实际操作的方式讲解 全局对象 。
./ 对象的作用。
中的 对象类似于浏览器中的 55 对象，用于定
义全局命名空间，所有全局变量（除了 本身以外）都是
对象的属性，在实际使用中可以省略 。
中的 全局对象包含
./、$!./、$!./、-./、-
./等方法，可以在任何地方使用。
./ 通过案例演示 对象的使用
知识点 2-传统 JavaScript 开发的弊端
教师通过 ''$ 的方式讲解传统 开发的弊端。
./ 文件依赖问题。
在 中文件的依赖关系是由文件的引入先后顺序决定
的。
在开发过程中，一个页面可能需要多个文件依赖，但是仅从代码
上是看不出来各个文件之间的依赖关系，这种依赖关系存在不确
定性。
如果将文件的引入先后顺序更改的话，就很有可能导致程序错
误。
./ 命名冲突问题。
6
评论0