node相关

------------------------------------------------------------------------------------------
node.js（ECMAScript+内置对象）

什么是nod.js 
开源 跨平台 的js运行时环境
用的chrome的v8引擎 性能好

模块化
优点：
避免命名冲突(减少命名空间污染)
更好的分离, 按需加载
利于维护
利于复用

Nodejs 引入了 模块化语法Commonjs（民间）

ESM ES6（js官方） 模块化语法

nodejs中的模块分类
自定义模块（js文件，处处皆模块，万物皆模块）

内置模块
导入语法：
const fs = require('fs')  内置模块写模块名
// 读文件
// 没有该文件会报错
fs.readFile('文件路径',（err,data）=>{
// 如果失败err有值
// 如果成功err为空
// data中的中文字符会是二进制被表现为16进制
// toString可以转换为中文
})
// 写入文件 
// 写入的时候没有该文件会创建 已有该文件会替换
fs.writeFile('文件路径',写入内容,err=>{

})

第三方模块
导入导出语法：
暴露的语法 module.experts = 暴露的数据（通常是对象，也可以是普通数据）
导入语法 const 变量 = require('路径名') 第三方和自定义导入写路径名

node中的路径 不是以当前文件为相对路径 而是以cmd中当前打开的文件夹为相对路径

内置变量 __dirname
__dirname 相当于得到了当前index.js的路径
__dirname + '\\1.txt' 得到了当前文件下的1.txt

window中 fs模块既把/ 又把\当文件夹区分   /    unix中mac中 以/当文件夹区分
__dirname + '/1.txt' = __dirname + '\\1.txt'

用__dirname 无法拼接./ 和 ../

用内置模块path
path.join(__dirname,'1.txt') 自动把当前文件夹 拼接一个1.txt
path.join(__dirname,'./1.txt') 自动把当前文件夹 拼接一个1.txt
path.join(__dirname,'../1.txt') 自动把当前文件夹上一级文件夹 拼接一个1.txt

导入文件的时候不用path 直接根据当前文件路径导入就可以

提供数据的服务 数据库（实际开发）、JSON文件（前端测试）

nodejs
可以开发服务器（搭配对应的模块）
可以开发web应用（搭配对应的模块）  
可以开发桌面应用（搭配对应的模块）

------------------------------------------------------------------------------------------

异步任务：Promise setInterval ajax 读写文件   目前学到的

可以用回调函数拿到函数里异步代码的结果

回调地狱：回调函数嵌套太多
Promise 三种状态 pending fulfilled（resolved） rejected
resolve 被调用就执行then
reject 被调用就执行catch
catch执行之后会返回Promise 状态为 resolved

fs/promises fs的Promise版本

Promise会默认return 一个空Promise对象

finally总会返回原来返回的值

await和async搭配使用

await不能作用于非promise对象
同步代码优先于await（await只让被修饰的promise 和它后面的代码等待）

加了 async之后 默认返回Promise 值为undefined
return 10  ==  return Promise((resolve,reject)=>{resolve(10)})

async结合try catch来写

Promise.allSettled([]) 里面传Promise数组 所有都会完成 不管是 fulfilled 还是 rejected都会返回

const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);

const allSettledPromise = Promise.allSettled([resolved, rejected]);

allSettledPromise.then(function (results) {
  console.log(results);
});
返回的数组是 status value 错误的是 status reason
// [
//    { status: 'fulfilled', value: 42 },
//    { status: 'rejected', reason: -1 }
// ]
 
npm 包管理工具（可以上传 下载 删除）
包的概念：一个或多个模块

node集成了npm

npm init -y 直接创建 成功后出现 package.json （文件夹不能是中文）

npm i axios 安装 axios包
npm install axios 安装 axios包
npm i express bootstrap 安装多个包 空格隔开

npm un axios 卸载 axios包
npm uninstall axios 卸载 axios包
npm uninstall express bootstrap  卸载多个包 空格隔开

package-lock 记住dependencies中第三方依赖的下载地址

如果没有package-lock文件 会先去源服务器搜索 然后下载
如果有package-lock文件 不会先去源服务器搜索 然后下载

遇到下载不下来的时候 可能是应为package-lock中的文件下载地址失效 删除package-lock 这样就会去源服务器搜索 然后下载

node_modules文件夹
里面保存了当前项目下载的各种包
一般不会上传到git远程仓库

------------------------------------------------------------------------------------------
require
在nodejs中,区分加前缀和不加前缀,不加路径前缀的表示的是包,而加入路径前缀的表示本地文件
require('./dog') 如果写相对路径，才代表找自己的自定义模块
require('fs') 如果没写相对路径，它是先找内置模块，后找node_module中的模块（第三方模块）,都没找到就报错

导入一个文件时 先看缓存里有没有 如果没有 就去找到这个文件
执行里面的代码 再把里面的数据缓存起来 后面再导入多次就取缓存里的数据
dog.js
console.log('哈哈')
module.exports = {
age:16
}

const  age1 = require('./dog.js')
const  age2 = require('./dog.js')
age1 === age2 
只会log一次哈哈
后面的都是从缓存中获取

找本地自定义文件
require('./test') 
默认会去找test文件
然后找test.js文件
然后找test.json文件
都没有就报错
require('./test.js')
会去找test.js文件

找第三方模块会先找模块名的文件
再找package.json 中的main指定的js做导入
会依次向三级目录找 也就是向外层找node_modules文件夹

开发自己的包
必须包含的文件
package.json
index.js
README.md

查看npm源
npm config get registry
设置为npm源
npm config set registry https://registry.npmjs.org
npm config set registry https://registry.npmmirror.com/
登录到npm源（先切换到npm源，为了上传包）
npm adduser
查看当前账号登录名
npm who am i
退出
npm logout
查看npm源上hmjoy包名是否存在 或者 直接在npmjs.com上搜索包名结果为0说明可用
npm view hmjoy
在包文件夹里面敲（发布到npm源）
npm publish
淘宝源同步最新的包会慢一些 因为淘宝源会隔一段时间同步一次npm源（可以用npm源下载自己刚上传的包）

全局模块 通常是工具（例如nrm） 不在项目中require
全局安装
npm i 模块名 -g
npm i -g 模块名
查看全局安装的文件的路径
npm root -g

express
GET
req.query获取到get请求的所有参数用点语法访问其中的属性
POST
传参方式
form-data 传图片
json 传普通参数

设置express接收req传的数据为json格式
app.use(express.json())

接口部署 
具有公网ip的电脑做服务器 然后运行(node index.js)就上线了

域名解析ip的文件
C:\Windows\System32\drivers 下的hosts文件

http端口号80
https端口号443
端口号和ip都是唯一的

同源策略
浏览器 不允许使用 ajax 请求访问不同源的资源
不同源（跨域）

同源
协议头、域名、端口一致，就叫同源，有一个不一样就叫不同源（跨域）

服务器是：http://www.zll.com:80/joke/list
如果你当前发 ajax请求 的 网页 是
https://www.zll.com:80/ 跨域 因为协议不一致
http://www.zll.com:3000 跨域 因为端口不一致
http://www.zllxx.com:80/joke/list 跨域 因为域名不一致
http://www.zll.com:80/index.html 同源

解决跨域问题 后端人员决定的
CORS 跨域资源共享
JSONP 

导入cors node 中 express跨域的解决用法
1.
把网页和接口放到同一目录下
2.
app.use(cors()) 就解决了跨域
原理
在响应报文头
加了 Access-Control-Allow-Origin: *

------------------------------------------------------------------------------------------
node中 顶层对象是global

restful规范
后端写接口的一个规范
根据url
请求方式就可以判断这个接口是干嘛的
get
post
delete

模块化规范 CMD AMD CommonJS 
AMD CMD 适用于浏览器端的js模块化
CommonJS 适用于服务器端的js模块化
ECMA 官方推出es6 前端 后端都用这个

node 默认使用CommonJS导入导出语法
在node中使用es6导入导出语法
在package.json中加一个属性"type":"module"

es6的模块化语法在node中导入时不能省略.js后缀
一个包中只能有一个export default 

默认导出
export default {}
默认导入
import obj from '路径/文件名.js'

按需导出 
export const name = ‘aa’
export const age = 16
按需导入
import { name , age } from '路径/文件名.js'
给导入的文件取别名
import { age as nianling } from '路径/文件名.js'

写了按需导出还可以写默认导出

一次性获取所有按需导出数据 和 默认导出数据
import * as obj from '路径/文件名.js'
默认导出数据在 obj.default 中

直接导入（只是为了执行文件名中的代码）
import '路径/文件名.js'

es6也有缓存 缓存机制跟require是一样的
会先看缓存里有没有 没有就执行 有就去缓存中取
即便导入多次 被导入的代码也只执行一次

浏览器也可以使用ES6模块化语法
script 以一定要给type 且 type 为 module
使用时需要满足以下两个要求
<script type="module"></scrip>
不能以file://协议打开  要以服务器形式打开

前端工程化
模块化: js模块化、组件化、less
编码规范:命名规范、eslint
优化：代码压缩、git ignore、忽略node_modules、
高版本js转换成低版本：babel

webpack是js（前端）打包工具，把项目中复杂的依赖查找出顺序然后再打包成极少的文件，会把浏览器不认识的文件解析成浏览器认识的文件
也可以理解为Node的第三方模块，
安装webpack的时候 安装两个文件
npm i webpack webpack-cli 
webpack 总结：
1.压缩代码
2.减少代码文件
3.尽可能帮你优化代码
4.默认支持ES6模块化语法，不用在package.json中指定type为module
5.js文件可以默认不写.js后缀

webpack修改文件后需要重新打包
默认入口文件
打包开始的文件
src/index.js

默认出口文件
打包完成的文件
dist/main.js

./ 当前目录
../ 上一级目录
/ 当前环境下的根目录
path.resolve和path.join区别
他们在其他情况下无区别
在右边给了/的情况下，有区别

path.join(__dianame, '/dist')  当前目录/dist
path.resolve(__dianame, '/dist') 根目录/dist

先加入webpack.config.js文件
output中加一个属性（自动清除dist文件夹）
clean:true

先npm install --save-dev html-webpack-plugin包（可以在dist中每次打包后加入一个指定html文件）
const HtmlWebpackPlugin = require('html-webpack-plugin');
  plugins: [
    new HtmlWebpackPlugin({
      title: '管理输出',
    }),
  ],

webpack默认只认识js文件（引入loader）

加载css
css-loader：只是把css文件读取成js字符串
style-loader：创建style标签并且把刚刚读取到的字符串作为style标签的内容 再把style插入到dom
modules 中的 rules 中的 use 从右往左加载

加载less
less-loader

在webpack中，万物皆模块，图片也是
webpack5以前图片要加loader
webpack5以后家规则就行

大于8kb 导入路径
小于8kb 转为base64
type：‘asset’

base64图片优点：
减轻服务器负担，不用发请求
如果用路径，就要发请求下载
缺点：
base64体积增大20%左右