浏览器中的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
-
...
-
为什么JavaScript 可以在浏览器中被执行
不同的浏览器使用不同的 JavaScript 解析引擎:
Chrome 浏览器 => V8
Firefox 浏览器=> OdinMonkey(奥丁猴)
Safri 浏览器=> JSCore
IE 浏览器=> Chakra(查克拉)
etc...
浏览器中的 JavaScript 运行环境
V8 引擎负责解析和执行 JavaScript 代码。
内置 API 是由运行环境提供的特殊接口,只能在所属的运行环境中被调用。
Node.js简介
Node.js可以做什么
基于 Express/Koa 框架(Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网http://www.expressjs.com.cn/),可以快速构建 Web 应用
基于 Electron 框架(Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.https://electronjs.org/),可以构建跨平台的桌面应用
基于 restify 框架(Restifyhttp://restify.com/),可以快速构建 API 接口项目
读写和操作数据库、创建实用的命令行工具辅助前端开发
什么是 Node.js
Node.js
是
一个基于 Chrome V8 引擎的 JavaScript
运行环境
。
通俗的理解:Node.js 为 JavaScript 代码的正常运行,提供的必要的环境。
浏览器是 JavaScript 的前端
运行环境。
Node.js 是 JavaScript 的后端
运行环境。
Node.js 中无法调用 DOM 和 BOM 等 浏览器内置 API。
Node.js环境安装
下载安装
进入官网https://nodejs.org/zh-cn/(中文),可以看到如下两个版本:
LTS 为长期稳定版,对于追求稳定性的企业级项目来说,推荐安装 LTS 版本。
Current 为新特性尝鲜版,对于热衷于尝试新特性的用户来说,推荐安装 Current 版本的 Node.js。但是,Current 版本 中可能存在隐藏的 Bug 或安全性漏洞,因此不推荐在企业级项目中使用 Current 版本的 Node.js。
查看已安装的Node.js的版本号
打开终端,在终端输入命令 node –v
后,按下回车键,即可查看已安装的 Node.js 的版本号。
在Node.js环境中运行JavaScript
终端窗口运行
操作步骤:
打开任意终端,直接输入 node 命令并回车
执行你的JS代码,按回车表示执行
按两次“Ctrl+C”退出。
常见问题
如果在vscode终端中,运行node命令报错,重启vscode。
执行node的路径一定要对
执行文件的时候,需要保证 node xxx.js
这种格式
node只能运行JS代码
最好不要使用多个终端
终端命令
用 node命令 执行 js 文件 node ./index.js
使用 ↑ 键,可以快速定位到上一次执行的命令
使用 tab 键,能够快速补全路径
使用 esc 键,能够快速清空当前已输入的命令
输入 cls 命令,可以清空终端
模块化
什么是模块化
模块化,就是把一个大的文件拆分成若干小文件,而且还能把小文件通过特定的语法组合到一起的实现过程。
模块化优点
更利于维护(比如,项目需要对登录模块升级,则不会影响其他模块)
更好的复用性(比如有一个公共的函数,封装起来。其他所有JS文件都能使用这个函数)
Node中,规定每个JS文件都是一个小模块。一个项目由许许多多的小模块(JS文件)组合而成
了解几种模块化规范
AMD
CMD
CommonJS(Node中的模块化,使用的是这种方案)
ES6
Node使用的是CommonJS规范。
模块的分类
自定义模块
NodeJS中,创建的JS文件都是自定义模块。
内置模块
安装Node之后,自带了很多内置模块。我们可以直接加载使用他们。
第三方模块
其他人编写的模块,发布到 npm 网站https://www.npmjs.com/ 上,我们可以下载使用。
自定义模块
我们创建的每个JS文件都是一个自定义模块,并且具有模块作用域,也就是在一个模块中创建的变量、常量、函数等等一切,都只能在当前模块中使用。
共享(导出/暴露)内容给其他模块用,需要使用 module.exports
导出内容。
module
是Node中的一个全局对象,对象包含当前模块的详细信息。
module.exports
是模块的出口,通俗的说,就是导出内容用的,默认值是 {}
其他模块,如果需要使用上述模块导出的内容,可以使用 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,专门用来处理路径。
使用:
加载模块
// 使用核心模块之前,首先加载核心模块
let path = require('path');
// 或者
const path = require('path');
调用path模块中的方法,来处理相应的问题
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,文件系统,该模块可以实现对 文件、文件夹的操作
使用:
加载模块
// 引入模块,引入模块的时候,可以使用var、let,但是建议使用const,因为我们不希望它改变
const fs = require('fs');
调用fs模块的方法,下面列举fs模块中的常用方法
// 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); // 读取到的原始数据
}
});
// writeFile -- 异步写入文件
fs.writeFile('./abc.html', 'hello world', (err) => {
if (err) {
console.log('写入文件失败');
} else {
console.log('文件写入成功');
}
});
querystring模块
处理查询字符串(请求参数)的模块
使用方法
加载模块
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模块搭建服务器
创建 Web 服务器的步骤
1.导入 http 核心模块
2.创建 server 对象(server 对象负责建立连接,接收数据)
3.注册 request 事件,当浏览器发送请求到服务器执行,设置处理请求的函数
4.监听端口(==这个步骤也可以放到注册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('服务器启动了');
});
req 和 res 参数
当收到浏览器的请求后,会触发request事件,事件处理函数有两个形式参数 req 和 res。
req 是request的缩写,即请求。 res是response的缩写,即响应