网站开发和程序开发的却别,制作一个网站代码,电商平面设计,星艺装饰集团有限公司官网node和包管理工具
今日目标#xff1a;
1.dos常用指令
2.node的模块化
3.npm包管理工具
4.yarn的常用指令
5.node的内置模块
00-回顾
# Promose:作用#xff1a;解决ajax请求响应顺序不可控的问题特性#xff1a;1. Promise是一个构造函数#xff0c;需要通过new关…node和包管理工具
今日目标
1.dos常用指令
2.node的模块化
3.npm包管理工具
4.yarn的常用指令
5.node的内置模块
00-回顾
# Promose:作用解决ajax请求响应顺序不可控的问题特性1. Promise是一个构造函数需要通过new关键字来实例化实例化的过程中需要接收一个函数参数该函数又要接收两个函数参数分别是resolve和reject2. Promise具有3种状态分别是默认的pennding进行中 fulfilled已完成和rejected已失败3. 当调用了resolve方法之后可以将进行中的状态修改为已完成的状态同时可以触发实例对象的then方法顺带可以将参数带过去4. 当调用reject方法之后可以将进行中的状态修改为已失败的状态同时可以触发实例对象的catch方法顺带将参数带过去5. 无论是已成功还是已失败只要Promise的状态发生了改变就会触发实例对象的finally方法Promise为什么支持链式调用 原型对象上的then,catch和finally都会返回一个新的Promise的实例对象原型对象上的3个方法then: Promise执行成功触发的实例对象的方法可以接收resolve传过来的参数catch: Promise执行失败触发的实例对象的方法可以接收reject传过来的参数finally: 只要Promise的状态发生了改变就会触发该实例对象的方法不能接收参数Promise的6个静态方法all: 同时触发多个Promise,当最后一个Pomise执行成功后就结束。如果其中有一个失败了也结束了any: 同时触发多个Promise,只有有一个成功就结束如果全都失败就直接报错race: 同时触发多个Promise, 无论成功或失败只要有一个Promise的状态发生了改变就结束allSettled(es2020): 同时触发多个Promise, 无论成功或失败会等待每一个Promise执行完毕并返回每一个Promise的状态以数组接收resolve: 强制将Promise的状态修改为已完成reject: 强制将Promise的状态修改为已失败Promise解决ajax响应顺序不可控的问题 原理Promise实例对象上的then方法必须等到resolve之后才可以触发。 步骤1. 在前一个Promise里面发起第一个请求2. 在请求完成后将请求的结果resolve出去3. 在实例对象的then方法中接收参数并发起新的请求# async和await es7的语法。 可以将异步任务同步执行语法 async 函数名() {await 一个完成的Promise}示例 async fn() {let 结果 await new Promise((resolve, reject) {resolve(await等待的结果)})} 注意1. async要写函数前面表明该函数内部有异步任务2. await要写在Promise的前面用来等待Promise的resolve的结果等到结果之前是无法执行后面代码的完美的解决ajax响应顺序不可以控的问题async fun() {// r1就是axios响应回来的数据let r1 await axios({method: 请求方式, url: 请求地址, params|data: {提交的参数}})// r2就是axios响应回来的数据let r2 await axios({method: 请求方式, url: 请求地址, params|data: {提交的参数}}) 注意r1没有得到结果前是不会执行r2的axios请求的}# 事件轮询
单线程 JS是一门单线程的语言在同一时间内只能执行一个任务可能会造成代码阻塞
调用栈 存储代码的执行环境的。 执行环境就是代码运行的环境. 先入后出
任务队列 异步任务存放的位置。宏任务队列和微任务队列
宏任务 整个JS代码 延时定时器周期定时器
微任务 Promise的then方法
Web API: 接收所有的异步任务消耗定时器的时间分配给任务队列事件轮询探究同步和异步的执行机制 工作原理 当打开浏览器的时候事件轮询就开始启动了。每执行一个宏任务就会清空所有的微任务再执行一个宏任务循环往复。直到所有的任务都执行完成01-dos的常用指令 通过win r, 输入cmd打开命令提示符工具 — ‘小黑窗’ Win系统打开资源管理器进入对应的目录下面在地址栏输入’cmd’即可 MAC系统找到对应的目录拖到小黑窗里面去 快速切换盘符 盘符名:查看当前目录下的所有的子目录和子文件 dir切换下一级目录 cd 目录名切换上一级目录 cd ../清屏 cls|clear终止程序运行 Ctrl C小技巧 1. 可以通过tab键快速切换当前目录下的子目录和子文件2. 可以通过上下箭头快速切换之前使用过的指令02-node的概述
概念独立于浏览器的另一个执行js代码的平台特性 1. ECMAScript js的核心代码 2. 让js具有了后端编程语言的能力 比如操作文件操作数据库等安装1. 打开官网下载稳定版2. 双击安装无脑猛点下一步即可3. 打开小黑窗输入node -v查看版本号。 注意不要安装到中文路径下node执行js文件 鼠标在要执行的js文件上右键在终端中打开通过指令node js文件03-node模块的分类
可以分为三大类 1. 内置模块nodejs原生提供的可以直接使用2. 自定义模块需要手动的导出3. 第三方模块需要下载安装然后才可以使用四大内置模块
1. fs 操作文件或文件夹
2. path 处理路径的模块
3. url 操作网址
4. http 创建本地服务器03-node的模块化
模块化 每一个js文件都是一个模块模块和模块之间可以相互导入导出使用 导出module.exports {} 导入let 变量 require(路径|模块名) 注意 1. 导出的可以是任意内容但是一般都是对象 2. 导出的是什么导入的就是3. 如果是自己写的js文件导入的就是路径名, 如果导入的是node的内置模块或者第三方模块导入的就是模块名 04-npm的常用指令【重点】 npm: 包管理工具 管理 安装删除替换 包各种第三方的库 swiper axios qs lodash npm: 只有安装了node系统自带了npm # 1. npm init -y: 初始化包管理工具 自动创建一个package.json文件# 2. 安装第三方的库
// 当使用了指令后默认会生成一个node_modules目录所有的模块都会放在里面
// 运行环境线上环境真实的网络环境。项目上线后依然要使用的库
// 开发环境开发阶段。只在开发阶段才使用的库。
// 全局环境某些库或者资源安装之后可以生成一个系统的指令。所有的项目都可以使用全局环境的指令 默认安装到运行环境 # npm i 模块名 安装到开发环境# npm i 模块名 -D 安装到全局环境 # npm i 模块名 -g// 注意npm的全局安装的路径 C:\Users\电脑名字\AppData\Roaming\npm# 3. 查看库的所有版本
npm view 模块 versions# 4. 安装指定的版本号
npm i 模块版本号 # 5. 删除指定的模块
npm remove 模块
// npm remove 模块 删除运行环境和开发环境的模块
// npm remove 模块 -g: 删除全局安装的模块# 6. npm i: 根据package.json和package-lock.json包管理文档将记录下来的模块全部装回来# 7. nvm控制node版本的工具包有兴趣需要可以学习05-package.json文档说明 项目的包管理文档 package-lock.json: 版本锁文件。记录了所有第三方模块的版本号和下载地址。当后面通过npm i指令或者 yarn 一下找回所有第三方模块时安装的也是当前的版本号。 {name: 03-npm-demo, // 项目的根目录version: 1.0.0, // 版本号description: , // 项目的描述main: index.js, // 入口文件scripts: { # 可执行脚本test: echo \Error: no test specified\ exit 1},keywords: [], // 关键词author: , // 作者license: ISC, // 开源协议dependencies: { // 运行环境安装的模块axios: ^1.2.2},devDependencies: { // 开发环境安装的模块swiper: ^8.4.5}
}06-yarn的常用指令【重点】
# 1. 全局安装yarn
npm i yarn -g# 2. yarn init -y: 初始化包管理工具 自动创建一个package.json文件# 3. 安装第三方的库
// 当使用了指令后默认会生成一个node_modules目录所有的模块都会放在里面
// 运行环境线上环境真实的网络环境。项目上线后依然要使用的库
// 开发环境开发阶段。只在开发阶段才使用的库。
// 全局环境某些库或者资源安装之后可以生成一个系统的指令。所有的项目都可以使用全局环境的指令 默认安装到运行环境 # yarn add 模块名 安装到开发环境# yarn add 模块名 -D 安装到全局环境 # yarn global add 模块名 eg: yarn global add rimraf// 注意yarn的全局安装的路径 C:\Users\电脑名字\AppData\Local\Yarn\bin// rimraf: 能快速删除node_modules# 4. 安装指定的版本号
yarn add 模块版本号 # 5. 删除指定的模块
yarn remove 模块
// yarn remove 模块 删除运行环境和开发环境的模块
// yarn remove 模块 -g: 删除全局安装的模块# 6. yarn: 根据package.json和package-lock.json包管理文档将记录下来的模块全部装回来# 注意用yarn安装了全局模块后需要配置环境变量 系统中搜索查看高级系统设置 点击环境变量双击path新建将yarn的全局安装路径粘贴过来点击三个确定07-node的内置模块–fs
# fsfileSystem: 操作文件或者文件夹
// fs: 操作文件|文件夹的内置模块let fs require(fs)// console.log(fs);// 1. 异步读取index.txt这个文件中的内容
// fs.readFile(文件名, 编码格式, 回调函数)
// 文件名 必填需要读取的文件
// 编码格式选填 读取的文件的内容格式. 默认值是Buffer. 建议使用utf-8
// 回调函数 必填两个参数
// 》 err 读取失败的错误信息
// 》 res: 读取成功的返回内容// console.log(111);// fs.readFile(index.txt, utf-8, (err, res) {
// if (err) return console.log(err);
// console.log(res);
// })// console.log(333);// 2. 同步读取文件的内容
// fs.readFileSync(文件, 编码格式)
// 文件 必填 读取的文件名
// 编码格式 选填默认是Buffer, 建议 utf-8
// console.log(111);
// let res fs.readFileSync(index.txt, utf-8)
// console.log(res);
// console.log(222);// 3. 异步写入内容
// fs.writeFile(写入文件, 内容, 回调函数)
// 写入文件 必填。 如果没有这个文件就自动创建该文件。 如果有直接覆盖写入
// 内容 必填
// 回调函数
// 不用参数: 写入之后的反馈 // console.log(111);
// fs.writeFile(index.txt, 你好小貂蝉, () {
// console.log(恭喜写入完成了哦);
// })
// console.log(222);// 4. 同步写入内容
// fs.writeFileSync(写入文件, 内容)
console.log(111);
fs.writeFileSync(index1.txt, 你好小猪佩奇)
console.log(222);08-node的内置模块–path
// path: 处理路径的模块// 路径
// 绝对路径
// d:/a/b/c/d.html
// 相对路径
// ./a/b/c.html ../a/b.c.html c.htmllet path require(path)
// console.log(path);// 1. 拼接相对路径let res path.join(a, b, c/d, e.html)console.log(res); // a\b\c\d\e.html// 2. 拼接绝对路径let res1 path.resolve(a, b, c/d, e.html)
let res2 path.resolve(C:, a, b, c/d, e.html)// 注意如果第一个参数不是绝对路径拼接出来的路径是以当前js文件所在的绝对路径作为根路径的
// 注意如果第一个参数是绝对路径 拼接出来的路径就会以第一个参数作为根路径console.log(res1); // F:\XA2219\2023-01-09-node和包管理工具\code\06-path内置模块\a\b\c\d\e.html
console.log(res2); // C:\a\b\c\d\e.html// 3. 解析绝对路径: 返回一个对象
let res3 path.parse(F:/XA2219/2023-01-09-node和包管理工具/code/06-path内置模块/a/b/c/d/e.html)
console.log(res3);
/*
{root: F:/, 根路径dir: F:/XA2219/2023-01-09-node和包管理工具/code/06-path内置模块/a/b/c/d, 路径的完整信息base: e.html, 完整的文件名ext: .html, 后缀name: e 文件名
}
*/
