Web开发（F12调试）

参考学习：

• 参考：Node.js v12.16.1 文档
• 参考：Node.js 教程 | 菜鸟教程

1.1 Node.js介绍

简单的说 Node.js 就是运行在服务端的 JavaScript（客户端应用）。

Node.js 是一个基于Chrome V8引擎的 JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

node -v // 通过命令查看当前Node的版本

Node.js与在浏览器中写JS的差异性：

1. Node.js没有浏览器API，即document, window等；
2. 加了很多Node.js API。

对于开发者来说，Node.js：

1. 在Chrome里写Javascript控制浏览器；
2. Node.js让你用类似的方式，控制整个计算机。

1.2 Node.js作用

举例：

1. Web服务 - 腾讯视频，在服务端渲染，网页端直接输出；
   1. 搜索引擎优化 + 首屏速度优化 = 服务端渲染
   2. 服务端渲染 + 前后端同构 = Node.js
2. 构建工作流（如Webpack），使用Node.js做JS构建工具，是最保险的选择；
   1. 构建工具不会永远不出问题；
   2. 构建工具不会永远满足需求。
3. 开发工具：Visual Code
4. 可扩展性
   1. 大型应用需要给使用者自定义模块的能力；
   2. 使用Node.js做复杂本地应用；
      1. 可以利用JS的灵活性提供外部扩展；
      2. JS庞大的开发者基数让他们的灵活性得到利用。
5. 客户端应用 - twitch.tv
   1. 在已有网站的情况下需要新开发客户端应用；
   2. 用Node.js客户端技术（electron）实现，最大限度服用现有工程。

1）新建一个文件nodetest.js

console.error("Node Test: Hello, world!");

2）通过node命令执行

在该文件资源管理器中，地址栏输入cmd启动。

// CMD 执行
node nodetest.js

// 输出结果：
// Node Test: Hello, world!

// 或者在 Visual Studio Code 下方，Terminal中输入命令
cd C:UserszyjhandsomeDesktopNodeJS // 先进入该脚本文件目录
node nodetest.js

3）Node.js全局变量

console.log("Hello, world!"); // Hello, world!

console.log(Date); // [Function: Date]
console.log(Math); // Object [Math] {}

console.log(setTimeout); // [Function: setTimeout] { [Symbol(util.promisify.custom)]: [Function] }
console.log(setInterval); // [Function: setInterval]

// 等价于浏览器：requestAnimationFrame
console.log(setImmediate); // [Function: setImmediate] { [Symbol(util.promisify.custom)]: [Function] }

// 特有的环境变量
console.log(__filename); // 当前运行脚本所在的文件位置, C:UserszyjhandsomeDesktopNodeJSindex.js
console.log(__dirname); // 当前运行脚本所在的目录位置, C:UserszyjhandsomeDesktopNodeJSindex.js

// version: 版本号
// platform: 操作系统
// kill: 进程操作
// exit: 进程操作
// hrtime: 时间统计相关，微妙级
// cpuUsage: CPU占用率
// resourceUsage: 资源占用率
// memoryUsage: 内存占用率
// env: node.js 运行的环境变量配置
// argv: 启动Node.js进程时候，记录用户敲击的命令
console.log(process);

// argv举例
/* 
 * process.argv，初始值：
 * [
 *   'C:\Program Files\nodejs\node.exe',
 *   'C:\Users\zyjhandsome\Desktop\NodeJS\index.js',
 * ]
 */
console.log(process.argv);

/* 
 * process.argv，敲击命令 node index.js rock 之后的值（为后续的石头剪刀布游戏做铺垫）
 * [
 *   'C:\Program Files\nodejs\node.exe',
 *   'C:\Users\zyjhandsome\Desktop\NodeJS\index.js',
 *   'rock'
 * ]
 */
console.log(process.argv);

3.1 NPM使用介绍

NPM是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的Node.js已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功：

npm -v // 通过命令查看当前Node的版本

// 如果安装是旧版的npm，可通过以下命令进行升级
npm install npm -g

3.2 使用 npm 安装模块

npm 安装 Node.js 模块语法格式如下：

$ npm install <Module Name>

以下实例，我们使用 npm 命令安装常用的 Node.js web框架模块 express:

$ npm install express

安装好之后，express 包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require('express') 的方式就好，无需指定第三方包路径。

var express = require('express');

3.3 全局安装与本地安装

npm 的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g而已，比如

npm install express // 本地安装
npm install express -g // 全局安装

如果出现以下错误：

npm err! Error: connect ECONNREFUSED 127.0.0.1:8087 

解决办法为：

$ npm config set proxy null

1）本地安装

• 1. 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
• 2. 可以通过 require() 来引入本地安装的包。

2）全局安装

• 1. 将安装包放在 /usr/local 下或者你 node 的安装目录。
• 2. 可以直接在命令行里使用。

3.4 查看、卸载、更新、搜索、创建及常用命令

// 查看安装信息
npm list -g

├─┬ cnpm@4.3.2
│ ├── auto-correct@1.0.0
│ ├── bagpipe@0.3.5
│ ├── colors@1.1.2
│ ├─┬ commander@2.9.0
│ │ └── graceful-readlink@1.0.1
│ ├─┬ cross-spawn@0.2.9
│ │ └── lru-cache@2.7.3
……

// 查看某个模块的版本号
npm list grunt

// 卸载模块
npm uninstall express
// 卸载后，你可以到 /node_modules/ 目录下查看包是否还存在，或者使用以下命令查看
npm ls

// 更新模块
npm update express

// 搜索模块
npm search express

// 创建模块
// 创建模块，package.json 文件是必不可少的。我们可以使用 NPM 生成 package.json 文件，生成的文件包含了基本的结果。

4.1 介绍

• 运行方式
• Node.js 全局变量

4.2 运行代码

新建一个index.js文件：

var playAction = process.argv[process.argv.length - 1];
console.log(playAction);

var random = Math.random() * 3;
var computerAction = "rock";

if (random < 1) {
    computerAction = "rock";
} else if (random > 2) {
    computerAction = "scissor";
} else {
    computerAction = "paper";
}

if (playAction == computerAction) {
    console.log("平局");
} else if (
    (playAction == "rock" && computerAction == "scissor") ||
    (playAction == "scissor" && computerAction == "paper") ||
    (playAction == "paper" && computerAction == "rock")
) {
    console.log("你赢了");
} else {
    console.log("你输了");
}

CMD或者Visual Studio Code控制台运行命令：

node index.js rock

node index.js scissor

node index.js paper