我还能学什么？

如果前面的所有作业你都能很好完成，那么你可以算入门了。当然这也是这门课的授课目标。

如果是20年前，可以到此为止了。但现在是4022年了，前端发展早就一日千里，你需要学的还有很多很多。

被重力束缚的人类

高达里夏亚有句名言，人类被地球的重力束缚，无法走向更广阔的可能。所以他试图将小行星阿克西斯推向地球，扫清人类发展的障碍（这样做显然是错误，小朋友们不要学）。

当然最后他失败了。败于阿姆罗和众多NT的意志之下，地球联邦（你确定不是高达系列？）得以苟延残喘。

JavaScript有类似的困境，对于JavaScript来说，这个重力就是浏览器。 一直以来JavaScript只能运行于浏览器之中，只能是浏览器的附庸，这大大限制了这么语言的发展——直到他的阿克西斯Node.js的到来。

谁是Node.js？

Node.js（以及依附于其上的各种包环境）是目前前端开发的主流环境。你可能已经听说过Node.js的大名。

很难对Node.js做一个准确的定义，在有些人眼里他是一整套库；在有些人眼里他是一个用来进行后端开发的语言；在某些人眼里，他可能是一个完整的开发环境。而实际上Node.js最准确的描述是，他是一个JavaScript语言的解释器。是一个可以脱离浏览器运行JS的工具。

Node.js本身基于Google的v8引擎，这是一个开源的JS引擎，被用于Chrome和Chronium浏览器内。 Node.js最初的作者Ryan Dahl最初想寻找一个事件驱动和非阻塞I/O的服务器开发语言。他认为JS非常符合他的要求，但JS是不能脱离浏览器运行的。 于是他根据开源的v8引擎开发了Node.js，并为他增加了必须的网络处理、文件io等底层模块。使JS可以独立于浏览器运行。^1

和很多开源产品一样，Node.js最初可能只是一个程序员提高自己工作效率或者自娱自乐的产物。但市场的需求、活跃的社区使其发展非常迅速。到今天已经成为前端开发是事实上的标准。 其应用的领域已经不仅仅局限于服务器框架，而是几乎可以做任何事^2。比如桌面GUI开发（写这篇文章所用的vscode，就是由Node.js的Electron框架开发的）。如手机软件开发（React-Native，Cordova），甚至可以做操作系统NodeOS，虽然底层还是依赖于Linux，但上层都是用js处理的。

安装Node.js

你可以去官网下载对应的包，初学者或者普通开发者一般建议选择LTS版本，写本文时，这个版本是16.15.0。 所谓LTS，是Long Term Support，也就是所谓的长期支持版本。属于比较稳定的版本。而旁边的最新版本是当前开发的迭代版本，可以勇于尝鲜。 我建议你选择打包的“绿色版”，下载后解压，并将其路径加入PATH环境变量，这样你就可以直接使用：

$ node -v
v16.15.0

来查看安装是否成功。

另一种方法是通过nvm来安装，nvm是一个Node.js的版本管理软件，类似于Python的virtualenv。 你可以通过他方便地在不同的node版本之间进行切换。

为什么你推荐这么复杂的安装方式

因为这种方式让你更了解安装过程你都要做什么，让你对系统有全面的了解。使你更容易排错。而不是遇到错误连个安装路径都找不到。 下载一个安装包然后一路yes固然是很方便，但你也会失去对系统的掌控，只能任凭系统摆布，这是一个程序员应该极力避免的。

此外还有一个好处，是你卸载，重安装也会更方便。

当然最重要的是，逼你学会很多新的东西，例如，什么是PATH环境变量，他有什么用？

和大多数解释器一样，你可以通过node直接启动交互界面，你输入的每条指令都会获得实时反馈，你也可以写一个xxx.js的文件，然后用命令：

node xxx.js

来执行，查看执行结果。

一切和浏览器上没有太大区别，不过要注意的是有一些对象是浏览器页面特有的，例如window、document等对象，在这个环境里你无法获得他们。

不知道怎么退出node交互界面？

请仔细查看所有交互信息，你应该可以在首行看到：

Welcome to Node.js v16.15.0.
Type ".help" for more information.

包管理器

如果你是一名还算勤奋的C语言学生，并试图写一些复杂一点的功能，你可能就需要使用到第三方的库，例如EasyX。 你一定曾有过灵魂三问：

第三方库的灵魂三问

1. 我要找的库去哪里下？
2. 下下来的库要怎么加到项目里去？
3. 还需要下什么库才能把他跑起来？

最怕的是你想要包A来帮你完成工作，但A依赖于B、C，B又依赖于D、E……然后你不断重复上面的三问。当你把所有需要的包都装完之后，你才发现，你下的B版本和A不兼容。 别笑，这是真实发生过的情况，如果你在史前Java里做过开发的话。

对合格的程序员来说，能用机器解决的绝对不该徒手来解决。于是想来想去，我只有四个字：包管理器。

包管理器的优势在于你可以直接通过命令来获取你想要的东西，并且会自动处理包的依赖关系。以前面那个依赖地狱的例子为例，当你向他请求A时，包管理器会自动把B、C，D、E……所有依赖的包都拉下来，同时保证他们的版本都是兼容的。这极大的方便了开发者和使用者。

在2022年的今天，基本所有主流的系统（说的就是你，Windows）、语言、环境，都会有自己的包管理器。例如RH的yum、Debian的apt、MacOS的brew、Python的pip、Java的maven等等。

Node.js的包管理器比较特别，他有很多个，比较出名的有3个：

1. npm
2. yarn
3. pnpm

他们的使用都大同小异，只在性能上有所区别。npm是Node.js自带的包管理器，和IE类似，可能他最大的作用是用来安装其他包处理器。yarn是现在的中坚力量，大多数库文档里首选都是yarn。pnpm则是后起之秀，而且势头强劲。

我们以npm安装axios为例演示他们如何运作，先新建文件夹，打开命令行，输入：

$ npm init

你会看到下面的信息

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (新建文件夹)

这里要求你输入项目的名称，我们随便输入一个，注意不能是中文，会报错。

package name: (新建文件夹) test
version: (1.0.0)

接下来所有输入都按默认即可。

description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to [你的路径]\package.json:

{
  "name": "dd",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

这样我们初始化了一个项目。接下来我们安装axios，通过：

$ npm install axios

added 8 packages in 949ms

将axios安装到该项目，此时你可以看到项目文件夹下多了一个臭名昭著的目录node_modules，点击进去，可以看到除了axios，还有很多的其他的文件夹，这些都是axios的依赖包。

我们简单写一个程序main.js:

import 'axios'

axios.get("http://127.0.0.1:5000/get")
.then(function(resp){
    console.log(resp.data.data);
})

为package.json加上一行配置：

  "type":"module",

告诉node这是一个模块，否则无法使用import指令。

启动你的后端，然后用

node main.js

运行解释器执行main.js文件，你应该可以看到结果：

[
  { no: 1, name: '张三', s1: 99, s2: 83, s3: 99 },
  { no: 2, name: '李四', s1: 79, s2: 75, s3: 80 },
  { no: 3, name: '王五', s1: 83, s2: 85, s3: 90 },
  { no: 4, name: '赵六', s1: 69, s2: 40, s3: 63 },
  { no: 99, name: '庄体育', s1: 60, s2: 50, s3: 40 }
]

你知道吗？

我们的C语言OJ除了支持很多主流语言之外，也支持js，你可以试试（我没试过，所以如果有问题也是正常的）。

作为前端开发语言的JS

解除了限制的JavaScript立刻迎来了飞速的发展。深受前端程序员的喜爱。 之前前端开发基本是后端开发的附庸，前端事实上是在后端语言的模板上进行开发的（例如，jsp）。 前端程序员进行交互测试、调试等工作时，还需要后端来配合，需要多掌握一门语言。

但有了Node之后，前端程序员可以用js来编写后端，不再需要后端的配合，前后端开发语言的统一减轻了前端程序员的负担（真的吗？）。 在这种趋势下，前后端越来越解耦合，终于发展到现在前后端分离的开发模式。

要注意的是Node不仅仅拓展了JS的应用范围，更大程度上他深刻地改变了JS的开发模式，

打包工具Webpack

webpack传统前端开发最常用的打包工具。自然而然的我们就会有这样的疑问：

1. 把什么打包？
2. 为什么要打包？
3. 怎么打包

我们看官方怎么说：

官方定义

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

这里所谓的静态资源可能会让你产生误解是非js资源，但实际上你要理解为不是（由JS）动态加载的内容，换句话说，出现在html里的这些资源。所以js源文件也是静态资源。

这样的描述对初学者还是不够友好，所以我们先要说说为什么需要打包。

现代的前端项目已经不是像之前简单的js项目那样一两个js文件再加一两个外部库文件就足够了，这样的情况下只需要用<link rel>引入即可。

但现代的前端项目非常复杂，想象一下你要用到几十个库，而你项目的源代码又可能分散在几十个html和几十个js里，这要怎么管理？

webpack可以负责将这里涉及的静态资源打包到一个或多个js文件里，这样你就可以不用操心最后要怎么将这些资源呈现到最终的html里，专心写你的部分即可。

除此之外，你可能还需要：

针对不同阶段配置不同的开发环境：开发阶段你可能希望引入调试版的库/代码，而在部署阶段移除这部分调试代码。并且不同环境可以自动（或者一键）切换。不要开发者过度干预。

对js进行压缩和加密：js的尺寸会影响下载的速率和流量，所以需要尽可能的压缩。同时出于知识产权保护要求，可能需要对js的源码进行加密或混淆。

自动构建和热部署：类似live-server那样的功能，有修改则自动重新构建并自动加载，方便开发者开发。

实际上还有很多额外的功能，比如扩大兼容性、针对不同js版本的进行支持，进行代码检查等等的自动化功能。这些都在webpack将构建项目进行自动化之后称为可能。

所以可以说只有有了打包工具，才可能将前端作为一个工程项目来进行管理，否则就只能当作小作坊里的个人工艺品。而webpack就是第一个这样的工具。

哇这么厉害？我怎么学？

实际上不需要，我也不建议你专门学，基本在后续项目中打包工具会无缝集成到你的项目中。除非你真的需要掌握细节，否则现阶段你不需要特别花时间去掌握它。

目前这个阶段你们最好还是把项目做出来为先。

那么跟我Node.js又有什么关系呢？webpack本身就是一个用js写的工具，它必须依赖于Node.js来在本地运行，从这个角度看，Node.js是所有前端项目的基础设施。

MVVM框架Vue

如果你在之前的作业中都好好做了，那么你一定会有一种感觉前端的主要工作是如何把内容（数据）呈现出来。

这里要点有两个：数据和呈现。这学期的作业里有大量的将数据贴到页面上的要求。回忆一下你做的作业，是不是相当复杂？ 你需要在js代码里写html代码，既无法使用vscode的代码提示，又容易出错。

前端开发界开始的解决方案是jQuery，一个对原生js进行简化和包装的库。

而现在我们普遍使用MVVM框架来实现这一功能。

jQuery还需要学吗？

不需要！

你可以直接从MVVM框架开始学，我们的课程上做了不少准备（例如，回调函数），以便你可以很容易平滑地过度到MVVM框架的学习。

你可能会对其中的一些细节不甚清楚，但不影响你使用，你可以在掌握熟练之后，再回来慢慢研究。

我要怎么开始？

这当然不可能用一章来解决，实际上你们在大三会有一门专门的前端课。这里我给出我的学习建议。我们都以Vue为例——从难度和学习资源这两者来说，这都是非常合理的。

1. 从官网开始

排除语言原因，首选的学习资源都是官网——你至少要先浏览一下官网以获得全面的认识。Vue官网的学习资料非常的完善，而且相当友好。

当前Vue的主版本是3.x，不过2.x也得到了比较广泛的应用，相对来说2.x的文档对初学者会更友好一些。3.x的同学可以从这里开始：

快速开始

此外这里有一个非常好的教程，可以直接上手的：

Vue3教程

但我要提醒一下，以命令行方式创建单页面应用是前端开发的普遍形式，你应该尽快适应。

官网的教程我建议跟随做到基础部分结束，对Vue如何运作掌握个大概，剩下的我建议最好跟着一个具体的项目学习。

1.5 实践一下

如果你已经觉得自己已经掌握得比较好了，我建议可以稍微挑战一下自己——把从黑洞数开始的作业用Vue做一下。

你会立刻发现MVVM框架的强力之处，它真的非常好用！尤其是期末作业，可以说是两个难度。

2. 网课

这个大家都知道从哪里学了。随便选一个你看着顺眼的网课即可。

剩下的我还是要老生常谈：

动手，动手，动手！

不动手 == nothing

3. 我还能干什么

当你做完一个完整的项目你就有资格选择自己的前进方向了。

这里建议你可以选择移动端的框架来进一步学习，例如Vant和uni-app，他们都可以很方便地构建移动端应用。尤其是uni-app，号称可以部署到多个平台，包括各种小程序。

4. 完了？

是的，上了这么久的课你应该知道我对你们的期望了，请开启自学模式好好学习。

这里要多说两句：

这次期末作业里我看到了下面的描述：

作业方面，花费的时间不等，都很长时间，很痛苦，不过我在作业后对于课程的掌握更深了是真的。但是我写的js经常特别长，而且就是那种好像都可以写一个函数调用就好了的但是我想不出要怎么改，老师不会所有作业都讲，所以我想在作业提交截止之后可以看到类似老师做的作业的模板，好让我对老师的思路有所理解

这里我必须说，是的，痛苦是对的，痛苦说明你在学习，非常棒。你们也应该能看出作业并不是故意为难你们，我刻意的设计是比课堂的内容难一点。

第二点要说的是，你的感觉是对的，你用了很长的代码来写js，确实是效率比较低的作法。然而：效率再低也比没有效率（不做）好！

你解出来了——你意识到你的解法不够好——你开始思考，并希望做得更好。这是进步的第一步。就像刘慈欣在《朝闻道》里写的：

这个原始人仰望星空的时间超过了预警阀值，已对宇宙表现出了充分的好奇。

这很难理解吗？当生命意识到宇宙奥秘的存在时，距它最终解开这个奥秘只有一步之遥了。

如果说那个原始人对宇宙的几分钟凝视是看到了一颗宝石，其后你们所谓的整个人类文明，不过是弯腰去拾它罢了。

你需要的是多做，多思考，多看，多对照。另外要多考虑计算机的思维——例如：循环和判断——来解决问题。也可以多回来看看、重写自己原来的代码验证自己的想法。 不要被困难吓住，你已经克服过这样的困难了，下一个一样可以克服。

希望每个同学都在学习中获得乐趣！