初识Node.js与模块
浏览器中的JavaScript的组成部分
- 浏览器中的JS
- ECMAScript(核心语法)ES3 --> ES4 --> ES5 --> ES6(2015) --> ES2016 -->ES2017 …
- 变量、常量
- 数据类型
- 函数
- 流程控制(if、switch、for、while、for…in、continue、break)
- 运算符
- JS内置对象(Array、String、RegExp、Date、Math…)
- WebAPI (浏览器提供的API)
- DOM(文档对象模型,document)
- BOM(浏览器对象模型,location、history、…)
- XMLHttpRequest
- Canvas
- …
- ECMAScript(核心语法)ES3 --> ES4 --> ES5 --> ES6(2015) --> ES2016 -->ES2017 …
为什么JavaScript 可以在浏览器中被执行
浏览器内核
- 浏览器内核 包括 CSS解析引擎,包括 JS解析引擎
- 目前,JS解析引擎基本上从内核中独立出来了
- 所以,平时所说的浏览器内核一般和CSS有关系
不同的浏览器使用不同的 JavaScript 解析引擎:
- Chrome 浏览器 => V8
- Firefox 浏览器=> OdinMonkey(奥丁猴)
- Safri 浏览器=> JSCore
- IE 浏览器=> Chakra(查克拉)
- etc…
其中,Chrome 浏览器的 V8 解析引擎性能最好!
浏览器中的 JavaScript 运行环境
运行环境
指的是代码正常运行所需的必要条件。- V8 引擎负责解析和执行 JavaScript 代码。
- 内置 API 是由运行环境提供的特殊接口,只能在所属的运行环境中被调用。
Node.js简介
Node.js 的出现,使得JavaScript有了做后端开发的能力。
Node.js可以做什么
Node.js 作为一个 JavaScript 的运行环境,仅仅提供了基础的功能和 API。然而,基于 Node.js 提供的这些基础功能,很多强大 的工具和框架如雨后春笋,层出不穷,所以学会了 Node.js ,可以让前端程序员胜任更多的工作和岗位!
- 基于 Express/Koa 框架(http://www.expressjs.com.cn/),可以快速构建 Web 应用
- 基于 Electron 框架(https://electronjs.org/),可以构建跨平台的桌面应用
- 基于 restify 框架(http://restify.com/),可以快速构建 API 接口项目
- 读写和操作数据库、创建实用的命令行工具辅助前端开发
- etc…
总之,Node.js 是大前端时代的“大宝剑”,有了 Node.js 这个超级 buff 的加持,前端程序员的行业竞争力会越来越强!
什么是 Node.js
Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
Node.js
是
一个基于 Chrome V8 引擎的 JavaScript
运行环境
。
通俗的理解:Node.js 为 JavaScript 代码的正常运行,提供的必要的环境。
Node.js 的官网地址: https://nodejs.org/zh-cn/
Node.js中的JavaScript运行环境
注意:
- 浏览器是 JavaScript 的
前端
运行环境。(浏览器是客户端安装的软件) - Node.js 是 JavaScript 的
后端
运行环境。(正常情况下,Nodejs要安装到服务器上) - Node.js 中无法调用 DOM 和 BOM 等 浏览器内置 API。
Node.js环境安装
下载安装
如果希望通过 Node.js 来运行 Javascript 代码,则必须在计算机上安装 Node.js 环境才行。
安装包可以从 Node.js 的官网首页直接下载,进入到 Node.js 的官网首页,点 击绿色的按钮,下载所需的版本后,双击直接安装即可。
进入官网(中文),可以看到如下两个版本:
- LTS 为长期稳定版,对于追求稳定性的企业级项目来说,推荐安装 LTS 版本。
- Current 为新特性尝鲜版,对于热衷于尝试新特性的用户来说,推荐安装 Current 版本的 Node.js。但是,Current 版本 中可能存在隐藏的 Bug 或安全性漏洞,因此不推荐在企业级项目中使用 Current 版本的 Node.js。
建议使用 长期支持版
查看已安装的Node.js的版本号
打开终端(黑窗口,或者蓝窗口),在终端输入命令 node –v
后,按下回车键,即可查看已安装的 Node.js 的版本号。
如果你能够看到版本号,说明你已经安装成功了。
在Node.js环境中运行JavaScript
终端窗口运行(了解)
此种方式,类似于浏览器调试工具的“Console”面板,只适合运行少量的测试代码,所以了解即可。
操作步骤:
- 打开任意终端,直接输入 node 命令并回车
- 执行你的JS代码,按回车表示执行
- 按两次“Ctrl+C”退出。
使用node命令执行JS文件(掌握)
此种方式,比较常用。可以运行写到 “xx.js
” 里面的JS代码,可以运行JS文件中的代码。
操作步骤:
- 打开终端
- 输入 “
node 要执行的js文件
”
vscode自带终端:
xxx.js
文件上,鼠标右键 --> 在终端中打开 --> 出现一个终端窗口 -->node xxx.js
注意终端的路径,注意在此路径中,是否能找到你的js文件。
常见问题
- 如果在vscode终端中,运行node命令报错,重启vscode。
- 执行node的路径一定要对(vscode中,文件上右键,在终端中打开,这样的路径肯定是对的)
- 执行文件的时候,需要保证
node xxx.js
这种格式 - node只能运行JS代码(也就是不要 node xxx.html)
- 注意,最好不要使用多个终端
终端命令
// 用 node命令 执行 js 文件 ( 文件的路径相对或者绝对路径都可以)
node ./index.js
使用 ↑ 键,可以快速定位到上一次执行的命令
使用 tab 键,能够快速补全路径
使用 esc 键,能够快速清空当前已输入的命令
输入 cls 命令,可以清空终端
系统存在问题解决
window7 的 powershell 问题: https://blog.csdn.net/appleyuchi/article/details/80155233
node 和 nodemon 问题: https://www.jianshu.com/p/321003445e13
vscode中无法使用node命令:用管理员权限打开 vscode
模块化
什么是模块化
模块化,就是把一个大的文件拆分成若干小文件,而且还能把小文件通过特定的语法组合到一起的实现过程。
比如手机、电脑…等等几乎所有,都是模块化的设计,拿电脑来说,可以把电脑拆分成显示器、键盘、硬盘、内存等一个一个的小模块,当然也能够组装到一起。
优点
模块化的优势:
- 更利于维护(比如电脑屏幕坏了,只换屏幕就可以了;比如想升级显卡,只换显卡就行了);
- 更好的复用性(比如有一块移动硬盘或U盘,大家都能用)
Node中,规定每个JS文件都是一个小模块。一个项目由许许多多的小模块(JS文件)组合而成。
Node中模块化的优势:
- 更利于维护(比如,项目需要对登录模块升级,则不会影响其他模块)
- 更好的复用性(比如有一个公共的函数,封装起来。其他所有JS文件都能使用这个函数)
了解几种模块化规范
- AMD
- CMD
- CommonJS(Node中的模块化,使用的是这种方案)
- ES6
Node使用的是CommonJS规范。
模块的分类
- 自定义模块
- NodeJS中,创建的JS文件都是自定义模块。(也就是处处皆模块)
- 内置模块(核心模块)
- 安装Node之后,自带了很多内置模块。我们可以直接加载使用他们。
- 第三方模块
- 其他人编写的模块,发布到 npm 网站 上,我们可以下载使用。
自定义模块
我们创建的每个JS文件都是一个自定义模块,并且具有模块作用域,也就是在一个模块中创建的变量、常量、函数等等一切,都只能在当前模块中使用。
- 共享(导出/暴露)内容给其他模块用,需要使用
module.exports
导出内容。module
是Node中的一个全局对象,对象包含当前模块的详细信息。module.exports
是模块的出口,通俗的说,就是导出内容用的,默认值是{}
- 比如,02-test.js 导出 age、name、fn 给其他模块用,可以
module.exports = {age, name, fn}
- 其他模块,如果需要使用上述模块导出的内容,可以使用
require()
加载let 结果 = require('模块路径')
- 比如,
let test = require('./02-test');
- 加载自定义模块,必须加路径,即使是
./
也必须加。但是可以省略后缀。
示例:
02-test.js – 导出内容
let age = 30;
let name = 'laotang';
let height = '175cm';
let weight = '75kg';
let square = x => x * x;
// 导出age、name、fn给其他模块使用
module.exports = { age, name, square };
03-use.js – 导入内容
let test = require('./02-test');
console.log(test); // { age: 30, name: 'laotang', square: Function... }
一个模块导出什么,另一个模块加载后,就会得到什么。
就比如,我给你三个苹果,你只能得到三个苹果,不可能得到其他的。
内置模块
内置模块是Node.js 平台自带的一套基本的 API(功能模块)。也叫做核心模块。
下面介绍几个内置模块。
注意,加载内置模块,不能写路径,这是和加载自定义模块不一样的。
path模块
path
是 Node 本身提供的 API,专门用来处理路径。- http://nodejs.cn/api/path.html
-
使用
-
加载模块
// 使用核心模块之前,首先加载核心模块 let path = require('path'); // 或者 const path = require('path');
-
调用path模块中的方法,来处理相应的问题,下面列举path模块中的几个方法
方法 作用 path.basename(path[, ext]) 返回 path 的最后一部分(文件名) path.dirname(path) 返回目录名 path.extname(path) 返回路径中文件的扩展名(包含.) path.format(pathObject) 将一个对象格式化为一个路径字符串 path.join([…paths]) 拼接路径 path.parse(path) 把路径字符串解析成对象的格式 path.resolve([…paths]) 基于当前工作目录拼接路径 const path = require('path'); // extname -- 获取文件后缀 console.log(path.extname('index.html')); // .html console.log(path.extname('index.coffee.md')); // .md // join -- 智能拼接路径 // ------------------- 智能拼接路径 ----------------------------- // console.log(path.join('a', 'b', 'c')); // a/b/c // console.log(path.join('a', 'b', 'c', 'index.css')); // a/b/c/index.css // a里面有b,b里面有../c,言外之意,c和b同级。 // console.log(path.join('a', 'b', '../c', 'index.js')); // a/c/index.js // __dirname 永远表示当前js文件的绝对路径 console.log(path.join(__dirname, 'css', 'demo.css')); // /Users/tangfengpo/Study/123/Node01/code/css/demo.css
-
fs模块
- fs,即 file system,文件系统,该模块可以实现对 文件、文件夹的操作
- http://nodejs.cn/api/fs.html
-
使用
-
加载模块
// 引入模块,引入模块的时候,可以使用var、let,但是建议使用const,因为我们不希望它改变 const fs = require('fs');
-
调用fs模块的方法,下面列举fs模块中的常用方法
API 作用 备注 fs.access(path, callback) 判断路径是否存在 fs.appendFile(file, data, callback) 向文件中追加内容 fs.copyFile(src, callback) 复制文件 fs.mkdir(path, callback) 创建目录 fs.readDir(path, callback) 读取目录列表 fs.rename(oldPath, newPath, callback) 重命名文件/目录 fs.rmdir(path, callback) 删除目录 只能删除空目录 fs.stat(path, callback) 获取文件/目录信息 fs.unlink(path, callback) 删除文件 fs.watch(filename[, options][, listener]) 监视文件/目录 fs.watchFile(filename[, options], listener) 监视文件 … 一大堆
-
```js
// readFile -- 异步读取文件
fs.readFile('./test.json', (err, data) => {
if (err) {
console.log('读取文件出错');
} else {
console.log(data); // 读取到的二进制数据
console.log(data.toString()); // 得到原始数据
}
});
fs.readFile('./test.json', 'utf-8', (err, data) => {
if (err) {
console.log('读取文件出错');
} else {
console.log(data); // 读取到的原始数据
}
});
```
```js
// writeFile -- 异步写入文件
fs.writeFile('./abc.html', 'hello world', (err) => {
if (err) {
console.log('写入文件失败');
} else {
console.log('文件写入成功');
}
});
```
querystring模块
querystring模块
查询字符串(id=1&name=zs&age=20)处理模块
- 处理查询字符串(请求参数)的模块
-
使用方法
-
加载模块
const querystring = require('querystring');
-
调用querystring模块中的方法
// parse -- 将查询字符串解析成JS对象 console.log(querystring.parse('id=1&name=zs&age=20')); // { id: '1', name: 'zs', age: '20' } // stringify -- 将JS对象转成查询字符串 console.log(querystring.stringify({ id: '1', name: 'zs', age: '20' })); // id=1&name=zs&age=20
-
内置模块 - http模块
http服务器处理模块,可以使用http模块
搭建服务器
- http是一个系统模块,让我们能够通过简单的流程创建一个Web服务器
入门示例
-
使用http模块搭建Web服务器
创建 Web 服务器的步骤
- 导入 http 核心模块
- 创建 server 对象(server 对象负责建立连接,接收数据)
- 注册 request 事件,当浏览器发送请求到服务器执行,设置处理请求的函数
- 监听端口(这个步骤也可以放到注册request事件之前)
// 1. 加载http模块 const http = require('http'); // 2. 创建服务对象,一般命名为server const server = http.createServer(); // create创建、server服务器 // 3. 给server对象注册请求(request)事件,监听浏览器的请求。只要有浏览器的请求,就会触发该事件 server.on('request', (req, res) => { // 设置响应状态码 res.statusCode = 200; // 设置响应头 res.setHeader('Content-Type', 'text/plain; charset=utf-8'); // 设置响应体 res.end('hello,欢迎访问服务器,这是服务器给你的回应'); }); // 4. 设置端口,开启服务 server.listen(3000, () => { console.log('服务器启动了'); });
- 当服务器接收到浏览器的请求后,如果没有做出响应,浏览器会等待
- 服务器的最终目的是要根据请求做出响应,肯定要调用 res.end() 方法。
req 和 res 参数
上述代码的格式基本固定。只有 请求事件 的处理函数需要说明一下。
当收到浏览器的请求后,会触发request事件,事件处理函数有两个形式参数 req 和 res。
// 代码片段
server.on('request', function (req, res) {
// 该函数就是处理请求响应的函数
// 形参res是响应response的简写
})
- 形参 req
- 形参 req 是request的缩写,即请求。
- 通过 req 对象,可以获取到 请求相关信息。
- req.url 获取请求行中的路径
- req.method 获取请求行中的请求方法
- req.headers 获取请求头
- 形参 res
- 形参res是response的缩写,即响应
- 做出响应,需要使用 res 对象。
- statusCode 设置响应状态码,必须在end方法前调用。
- res.setHeader() 设置响应头,比如设置响应体的编码,必须在end方法前调用。
- res.end() 把响应报文(响应行、响应头、响应体)发送给浏览器,通俗的讲就是做出响应。
- end() 调用,表示做出响应
- end() 调用后,不能再设置响应状态码和响应头
- end() 的参数表示响应结果;只能填字符串。
浏览器在请求服务器的时候,默认会请求网站根目录下的
/favicon.ico
网站图标,先不要管它。
根据不同 url 地址处理不同请求
前面已经可以对浏览器的请求做出响应了,但是响应的内容总是一样的。能不能根据url的不同,做出合适的响应呢?当然可以,那么首先就需要知道浏览器请求的url是什么。
涉及到和请求相关的信息,都是通过请求响应处理函数的第一个参数完成的。
server.on('request', function (req, res) {
// 形参req 是 请求request的意思,所有和请求相关的信息,都在req对象中
})