Ajax 笔记（四）—— Ajax 进阶

news2025/2/9 3:58:06

笔记目录

  • 4. Ajax 进阶
    • 4.1 同步代码和异步代码
    • 4.2 回调函数地狱
      • 4.2.1 解决方法一：Promise 链式调用
      • 4.2.2 解决方法二：async 函数和 await
    • 4.3 Promise.all 静态方法
    • 4.4 事件循环
      • 4.4.1 事件循环
      • 4.4.2 宏任务与微任务
    • 4.5 案例
      • 4.5.1 案例一-商品分类
      • 4.5.2 案例二-学习反馈

Ajax 笔记：

Ajax 笔记（一）—— Ajax 入门

Ajax 笔记（二）—— Ajax 案例

Ajax 笔记（三）—— Ajax 原理

Ajax 笔记（四）—— Ajax 进阶

Ajax 笔记接口文档：https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/doc-842135

4. Ajax 进阶

4.1 同步代码和异步代码

JavaScript 是单线程的语言，意味着它只有一个主线程用来执行代码。这个特点决定了 JavaScript 在同一时间只能处理一个任务，防止了多线程带来的竞态条件和死锁等问题。随着 HTML5 到来也支持了多线程webWorker，但也是不允许操作 DOM 。

  1. 同步代码：逐行执行，需原地等待结果后，才继续向下执行

  2. 异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发回调函数传递结果，比如：setTimeout / setInterval，事件，Ajax

4.2 回调函数地狱

  1. 概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱
  2. 缺点：可读性差，异常无法捕获，耦合性严重

代码示例：

// 需求：展示默认第一个省，第一个城市，第一个地区在下拉菜单中
axios({ url: 'http://hmajax.itheima.net/api/province' }).then(result => {
  const pname = result.data.list[0]
  document.querySelector('.province').innerHTML = pname
  // 获取第一个省份默认下属的第一个城市名字
  axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } }).then(result => {
    const cname = result.data.list[0]
    document.querySelector('.city').innerHTML = cname
    // 获取第一个城市默认下属第一个地区名字
    axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } }).then(result => {
      document.querySelector('.area').innerHTML = result.data.list[0]
    })
  })
})

4.2.1 解决方法一：Promise 链式调用

  1. 依靠 then() 方法会返回一个新生成的 Promise 对象特性，继串联下一环任务，直到结束。then() 回调函数中的返回值，会影响新生成的 Promise 对象最终状态和结果。

代码示例：

/**
 * 目标：掌握Promise的链式调用
 * 需求：把省市的嵌套结构，改成链式调用的线性结构
*/
// 1. 创建Promise对象-模拟请求省份名字
const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('北京市')
  }, 2000)
})

// 2. 获取省份名字
const p2 = p.then(result => {
  console.log(result)
  // 3. 创建Promise对象-模拟请求城市名字
  // return Promise对象最终状态和结果，影响到新的Promise对象
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(result + '--- 北京')
    }, 2000)
  })
})

// 4. 获取城市名字
p2.then(result => {
  console.log(result)
})

// then()原地的结果是一个新的Promise对象
console.log(p2 === p)
  1. 利用 Promise 链式调用解决回调地狱
/**
 * 目标：把回调函数嵌套代码，改成Promise链式调用结构
 * 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
*/
let pname = ''
// 1. 得到-获取省份Promise对象
axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
  pname = result.data.list[0]
  document.querySelector('.province').innerHTML = pname
  // 2. 得到-获取城市Promise对象
  return axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
}).then(result => {
  const cname = result.data.list[0]
  document.querySelector('.city').innerHTML = cname
  // 3. 得到-获取地区Promise对象
  return axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
}).then(result => {
  console.log(result)
  const areaName = result.data.list[0]
  document.querySelector('.area').innerHTML = areaName
})

4.2.2 解决方法二：async 函数和 await

在 async 函数内，使用 await 关键字取代 then 函数，等待获取 Promise 对象成功状态的结果值

  1. 利用async 函数和 await 解决回调地狱
/**
 * 目标：掌握async和await语法，解决回调函数地狱
 * 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值
 * 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
*/
// 1. 定义async修饰函数
async function getData() {
  // 2. await等待Promise对象成功的结果
  const pObj = await axios({url: 'http://hmajax.itheima.net/api/province'})
  const pname = pObj.data.list[0]
  const cObj = await axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
  const cname = cObj.data.list[0]
  const aObj = await axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
  const areaName = aObj.data.list[0]


  document.querySelector('.province').innerHTML = pname
  document.querySelector('.city').innerHTML = cname
  document.querySelector('.area').innerHTML = areaName
}

getData()
  1. async 函数和 await 捕获错误
try {
  // 要执行的代码
} catch (error) {
  // error 接收的是，错误消息
  // try 里代码，如果有错误，直接进入这里执行
}

改进上述代码：

/**
 * 目标：async和await_错误捕获
*/
async function getData() {
  // 1. try包裹可能产生错误的代码
  try {
    const pObj = await axios({ url: 'http://hmajax.itheima.net/api/province' })
    const pname = pObj.data.list[0]
    const cObj = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
    const cname = cObj.data.list[0]
    const aObj = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
    const areaName = aObj.data.list[0]

    document.querySelector('.province').innerHTML = pname
    document.querySelector('.city').innerHTML = cname
    document.querySelector('.area').innerHTML = areaName
  } catch (error) {
    // 2. 接着调用catch块，接收错误信息
    // 如果try里某行代码报错后，try中剩余的代码不会执行了
    console.dir(error)
  }
}

getData()

4.3 Promise.all 静态方法

合并多个 Promise 对象并等待所有同时成功的结果，如果有一个报错就会最终为失败状态，当需要同时渲染多个接口数据同时到网页上时使用

const p = Promise.all([Promise对象, Promise对象, ...])
p.then(result => {
  // result 结果: [Promise对象成功结果, Promise对象成功结果, ...]
}).catch(error => {
  // 第一个失败的 Promise 对象，抛出的异常对象
})

实例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise的all方法</title>
</head>

<body>
  <ul class="my-ul"></ul>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：掌握Promise的all方法作用，和使用场景
     * 业务：当我需要同一时间显示多个请求的结果时，就要把多请求合并
     * 例如：默认显示"北京", "上海", "广州", "深圳"的天气在首页查看
     * code：
     * 北京-110100
     * 上海-310100
     * 广州-440100
     * 深圳-440300
    */
    // 1. 请求城市天气，得到Promise对象
    const bjPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '110100' } })
    const shPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '310100' } })
    const gzPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440100' } })
    const szPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440300' } })

    // 2. 使用Promise.all，合并多个Promise对象
    const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])
    p.then(result => {
      // 注意：结果数组顺序和合并时顺序是一致
      console.log(result)
      const htmlStr = result.map(item => {
        return `<li>${item.data.data.area} --- ${item.data.data.weather}</li>`
      }).join('')
      document.querySelector('.my-ul').innerHTML = htmlStr
    }).catch(error => {
      console.dir(error)
    })
  </script>
</body>

</html>

4.4 事件循环

4.4.1 事件循环

  1. 作用：事件循环负责执行代码，收集和处理事件以及执行队列中的子任务
  2. 原因：JavaScript 单线程（某一刻只能执行一行代码），为了让耗时代码不阻塞其他代码运行，设计了事件循环模型
  3. 概念：执行代码和收集异步任务的模型，在调用栈空闲，循环不断地调用任务队列里回调函数的执行机制，就叫事件循环

举例说明：

/**
 * 目标：阅读并回答执行的顺序结果
*/
console.log(1)
setTimeout(() => {
  console.log(2)
}, 0)
function myFn() {
  console.log(3)
}
function ajaxFn() {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', 'http://hmajax.itheima.net/api/province')
  xhr.addEventListener('loadend', () => {
    console.log(4)
  })
  xhr.send()
}
for (let i = 0; i < 1; i++) {
  console.log(5)
}
ajaxFn()
document.addEventListener('click', () => {
  console.log(6)
})
myFn()

// 结果：1 5 3 2 4 点击一次document就会执行一次打印6

在这里插入图片描述
代码分析：

  1. console.log(1)进入调用栈，然后在控制台打印1
  2. setTimeout是异步代码，交给浏览器，console.log(2) 在 0 s 过后进入任务队列
  3. 然后两个 function 不调用，不执行
  4. for循环放入调用栈执行，打印5
  5. 执行ajaxFn，loadend事件异步，交给浏览器
  6. 用户click异步点击事件，交给浏览器，和loadend一样处于监测状态
  7. myFn放入调用栈执行，打印3
  8. 同步代码执行完毕，调用栈清空，然后反复查找任务队列有无需要执行的回调函数
  9. 执行setTimeout，进入调用栈，打印2，出栈
  10. 浏览器中的loadend事件被放入任务队列，然后放入调用栈，执行，打印4
  11. 最后click事件，点击后打印6

4.4.2 宏任务与微任务

  1. 异步任务划分：
  • 宏任务：由浏览器环境执行的异步代码
  • 微任务：由 JS 引擎环境执行的异步代码

宏任务（Macrotasks）：

  1. setTimeout 和 setInterval：用于创建定时任务，会在指定的时间间隔之后执行回调函数。
  2. DOM 事件：如点击事件、输入事件等。
  3. 网络请求：如 Ajax 请求、fetch 等。
  4. I/O 操作：如文件读写、读取数据库等。
  5. requestAnimationFrame：用于在每次浏览器重绘之前执行的回调。
  6. MessageChannel：一种更底层的异步任务创建方式。
  7. UI 渲染：浏览器会在宏任务执行完成后进行 UI 渲染。

微任务（Microtasks）：

  1. Promise 的 resolve 和 reject：当一个 Promise 被 resolved 或 rejected 时，相关的回调会被放入微任务队列。
  2. process.nextTick（Node.js 环境下）：类似于 Promise 的微任务，但在 Node.js 环境中使用。
  3. Object.observe 和 MutationObserver：用于监听对象的变化，在变化后会触发回调。
  4. Vue 的 nextTick：Vue 中用于延迟执行 DOM 更新之后的回调。
  5. await 表达式的后续操作：在 async 函数中，await 表达式后的操作会被放入微任务队列。

在这里插入图片描述
JavaScript 执行顺序如下：

  1. 执行同步代码：从上到下逐行执行当前代码文件中的同步代码，将函数调用压入执行栈，遇到异步任务会将其注册，但不会立即执行。

  2. 执行微任务：在每次事件循环中，首先会执行微任务队列中的所有微任务，直到微任务队列为空。这保证了微任务比宏任务更早执行。

  3. 执行宏任务：然后从宏任务队列中取出一个宏任务（通常是先进先出），执行它，可能触发异步操作。

  4. 可能进行 UI 渲染：在宏任务执行完成后，浏览器有机会进行 UI 渲染（如果有需要的话）。

  5. 重复以上步骤：然后事件循环继续，重复执行微任务、宏任务、可能的 UI 渲染等步骤。

实例代码：

/**
 * 目标：阅读并回答打印的执行顺序
*/
console.log(1)
setTimeout(() => {
  console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {
  resolve(3)
})
p.then(res => {
  console.log(res)
})
console.log(4)

// 1 3 5 4 2

代码分析：

  1. console.log(1)进入调用栈，打印1
  2. setTiemout宏任务，交给浏览器，0s后console.log(2)放入宏任务队列排队
  3. new Promise放入调用栈，执行console.log(3)，打印3，用4标记成功，然后出栈
  4. p调用过resolve，处于成功状态，p.then()里面的回调函数是微任务，放入微任务队列排队
  5. console.log(5)，进入调用栈打印5，出栈
  6. 调用栈清空，先调度微任务队列的回调函数
  7. 执行微任务console.log(result)，打印4
  8. 接着调度宏任务console.log(2)，打印2

4.5 案例

4.5.1 案例一-商品分类

/**
 * 目标：把所有商品分类“同时”渲染到页面上
 *  1. 获取所有一级分类数据
 *  2. 遍历id，创建获取二级分类请求
 *  3. 合并所有二级分类Promise对象
 *  4. 等待同时成功后，渲染页面
*/
// 1. 获取所有一级分类数据
axios({
  url: 'http://hmajax.itheima.net/api/category/top'
}).then(result => {
  console.log(result)
  // 2. 遍历id，创建获取二级分类请求
  const secPromiseList = result.data.data.map(item => {
    return axios({
      url: 'http://hmajax.itheima.net/api/category/sub',
      params: {
        id: item.id // 一级分类id
      }
    })
  })
  console.log(secPromiseList) // [二级分类请求Promise对象，二级分类请求Promise对象，...]
  // 3. 合并所有二级分类Promise对象
  const p = Promise.all(secPromiseList)
  p.then(result => {
    console.log(result)
    // 4. 等待同时成功后，渲染页面
    const htmlStr = result.map(item => {
      const dataObj = item.data.data // 取出关键数据对象
      return `<div class="item">
    <h3>${dataObj.name}</h3>
    <ul>
      ${dataObj.children.map(item => {
        return `<li>
        <a href="javascript:;">
          <img src="${item.picture}">
          <p>${item.name}</p>
        </a>
      </li>`
      }).join('')}
    </ul>
  </div>`
    }).join('')
    console.log(htmlStr)
    document.querySelector('.sub-list').innerHTML = htmlStr
  })
})

4.5.2 案例二-学习反馈

/**
 * 目标1：完成省市区下拉列表切换
 *  1.1 设置省份下拉菜单数据
 *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
 *  1.3 切换城市，设置地区下拉菜单数据
 */
// 1.1 设置省份下拉菜单数据
axios({
  url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
  const optionStr = result.data.list.map(pname => `<option value="${pname}">${pname}</option>`).join('')
  document.querySelector('.province').innerHTML = `<option value="">省份</option>` + optionStr
})

// 1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
document.querySelector('.province').addEventListener('change', async e => {
  // 获取用户选择省份名字
  // console.log(e.target.value)
  const result = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname: e.target.value } })
  const optionStr = result.data.list.map(cname => `<option value="${cname}">${cname}</option>`).join('')
  // 把默认城市选项+下属城市数据插入select中
  document.querySelector('.city').innerHTML = `<option value="">城市</option>` + optionStr

  // 清空地区数据
  document.querySelector('.area').innerHTML = `<option value="">地区</option>`
})

// 1.3 切换城市，设置地区下拉菜单数据
document.querySelector('.city').addEventListener('change', async e => {
  console.log(e.target.value)
  const result = await axios({url: 'http://hmajax.itheima.net/api/area', params: {
    pname: document.querySelector('.province').value,
    cname: e.target.value
  }})
  console.log(result)
  const optionStr = result.data.list.map(aname => `<option value="${aname}">${aname}</option>`).join('')
  console.log(optionStr)
  document.querySelector('.area').innerHTML = `<option value="">地区</option>` + optionStr
})

/**
 * 目标2：收集数据提交保存
 *  2.1 监听提交的点击事件
 *  2.2 依靠插件收集表单数据
 *  2.3 基于axios提交保存，显示结果
 */
// 2.1 监听提交的点击事件
document.querySelector('.submit').addEventListener('click', async () => {
  // 2.2 依靠插件收集表单数据
  const form = document.querySelector('.info-form')
  const data = serialize(form, { hash: true, empty: true })
  console.log(data)
  // 2.3 基于axios提交保存，显示结果
  try {
    const result = await axios({
      url: 'http://hmajax.itheima.net/api/feedback',
      method: 'POST',
      data
    })
    console.log(result)
    alert(result.data.message)
  } catch (error) {
    console.dir(error)
    alert(error.response.data.message)
  }
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/864649.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

“反AI斗士”马斯克宣布成立xAI ：目标是了解宇宙真实本质

“反AI斗士”马斯克宣布成立xAI ：目标是了解宇宙真实本质

北京时间7月13日凌晨&#xff0c;马斯克在Twitter上宣布&#xff1a;“xAI正式成立&#xff0c;去了解现实。”马斯克表示&#xff0c;推出xAI的原因是想要“了解宇宙的真实本质”。Ghat GPT横空出世已有半年&#xff0c;国内外“百模大战”愈演愈烈&#xff0c;AI大模型的现状…
阅读更多...
【golang】数组和切片底层原理

【golang】数组和切片底层原理

数组类型的值&#xff08;以下简称数组&#xff09;的长度是固定的&#xff0c;而切片类型的值&#xff08;以下简称切片&#xff09;是可变长的。 数组的长度在声明它的时候就必须给定&#xff0c;并且之后不会再改变。可以说&#xff0c;数组的长度是其类型的一部分。比如&a…
阅读更多...
jQuery编程学习3（jQuery 其他方法： jQuery 拷贝对象、 jQuery 多库共存、jQuery 插件）

jQuery编程学习3（jQuery 其他方法： jQuery 拷贝对象、 jQuery 多库共存、jQuery 插件）

目录 jQuery 其他方法 1. jQuery 拷贝对象 $.extend()方法 2. jQuery 多库共存 问题概述&#xff1a; 客观需求&#xff1a; jQuery 解决方案&#xff1a;&#xff08;两种方式&#xff09; 3. jQuery 插件 jQuery 插件常用的网站&#xff1a; jQuery 插件使用步骤&…
阅读更多...
Python-组合数据类型

Python-组合数据类型

今天要介绍的是Python的组合数据类型 整理不易&#xff0c;希望得到大家的支持&#xff0c;欢迎各位读者评论点赞收藏 感谢&#xff01; 目录 知识点知识导图1、组合数据类型的基本概念1.1 组合数据类型1.2 集合类型概述1.3 序列类型概述1.4 映射类型概述 2、列表类型2.1 列表的…
阅读更多...
用python来爬取某鱼的商品信息（1/2）

用python来爬取某鱼的商品信息（1/2）

目录 前言 第一大难题——找到网站入口 曲线救国 模拟搜索 第二大难题——登录 提一嘴 登录cookie获取 第一种 第二种 第四大难题——无法使用导出的cookie 原因 解决办法 最后 出现小问题 总结 前言 本章讲理论&#xff0c;后面一节讲代码 拿来练练手的&#xff…
阅读更多...
【装个系统】教你安装全新Windows 11 全程展示，精彩无限

【装个系统】教你安装全新Windows 11 全程展示，精彩无限

跟我一起&#xff0c;穿越时间&#xff01; Windows 11是微软最新的操作系统&#xff0c;相信已经没有人不知道了&#xff0c;但是很多人还不知道如何安装Windows 11&#xff0c;甚至不知道如何下载微软原版的安装文件&#xff0c; 别急&#xff0c;如果你没有安装文件&#…
阅读更多...
纯C#使用Visionpro工具2 操作斑点工具

纯C#使用Visionpro工具2 操作斑点工具

结果图 通过斑点工具中非圆性找取圆特征 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.For…
阅读更多...
7年经验之谈 —— 软件测试工程师，如何工资过万？

7年经验之谈 —— 软件测试工程师，如何工资过万？

对于测试工程师这个岗位而言&#xff0c;月薪过万并不是一件难事&#xff0c;笔者毕业时的第一份工作便拿到了7K的薪资&#xff0c;如今入职两年&#xff0c;薪资也堪堪过了万元大关。 我周边有不少想要入行这一行业的小伙伴都对我目前的工作和生活状态好奇&#xff0c;在此写一…
阅读更多...
系列六、Redis中的五大数据类型及相关操作

系列六、Redis中的五大数据类型及相关操作

一、五大数据类型 String类型、List类型、Set类型、ZSet类型、hash类型。 二、String类型 2.1、内存储存模型 2.2、常用操作命令 三、List类型 3.1、概述 list列表&#xff0c;相当于Java中的list集合。特点&#xff1a;元素有序 且 可以重复。 3.2、内存存储模型 3.3、常用…
阅读更多...
Arcgis中POI找到建筑面内距离最近的标准地址通过模型构建器来实现

Arcgis中POI找到建筑面内距离最近的标准地址通过模型构建器来实现

背景 之前写过一篇文章 Arcgis通过矢量建筑面找到POI对应的标准地址 这里面的大致思路跟本篇文章是类似的&#xff0c;不过上一篇文章有部分有瑕疵&#xff0c;就是在POI去找建筑面内的标准地址时&#xff0c;找到的虽然是建筑面内的&#xff0c;但是不一定是距离最近的&#…
阅读更多...
Elasticsearch-查询

Elasticsearch-查询

一、查询和过滤 1.1 相关性分数 &#xff1a;_score 默认情况下&#xff0c;Elasticsearch 按相关性得分对匹配的搜索结果进行排序&#xff0c;相关性得分衡量每个文档与查询的匹配程度。 相关性分数是一个正浮点数&#xff0c;在搜索的数据字段中返回。_score越高&#xff0…
阅读更多...
KAFKA第二课之生产者(面试重点)

KAFKA第二课之生产者(面试重点)

生产者学习 1.1 生产者消息发送流程 在消息发送的过程中&#xff0c;涉及到了两个线程——main线程和Sender线程。在main线程中创建了一个双端队列RecordAccumulator。main线程将消息发送给RecordAccumulator&#xff0c;Sender线程不断从RecordAccumulator中拉取消息发送到K…
阅读更多...
vant van-tabs van-pull-refresh van-list 标签栏+上拉加载+下拉刷新

vant van-tabs van-pull-refresh van-list 标签栏+上拉加载+下拉刷新

<template><div class"huibj"><div class"listtab"><!--顶部导航--><div class"topdh"><topnav topname"余额明细"></topnav></div><!--Tab 标签--><van-tabs v-model"…
阅读更多...
126、高频Redis面试题:如何保证Redis和数据库数据一致性

126、高频Redis面试题:如何保证Redis和数据库数据一致性

高频Redis面试题:如何保证Redis和数据库数据一致性 缓存用法如何更新缓存先更新缓存&#xff0c;再更新数据库先更新数据库&#xff0c;再更新缓存先删除缓存&#xff0c;再更新数据库延时双删&#xff08;删除缓存&#xff0c;更新数据库&#xff0c;再延时删除缓存&#xff0…
阅读更多...
Linux 内存管理新特性 - Memory folios 解读 | 龙蜥技术

Linux 内存管理新特性 - Memory folios 解读 | 龙蜥技术

本文内容基于 Linux 5.16&#xff0c;folio 基础部分开始合入。截止到目前 Linux 6.5&#xff0c;folio 已经有很大进展&#xff0c;会在后续文章中介绍。作者&#xff1a;徐宇。 01 folio [ˈfoʊlioʊ] 是什么 引用 LWN: Memory folios &#xff1a;https://lwn.net/Articl…
阅读更多...
基于Selenium技术方案的爬取界面内容实践

基于Selenium技术方案的爬取界面内容实践

1. 定位页面&#xff08;多窗口切换&#xff09; WebDriver提供了处理多个窗口的能力&#xff0c;这是通过使用“WebDriver.switchTo.window()”方法来切换到已知名称的窗口来实现的。如果名称未知&#xff0c;您可以使用“WebDriver.getWindowHandles()”获取已知窗口列表。您…
阅读更多...
苍穹外卖项目解读(五 完结) POI Easyexcel excel操作

苍穹外卖项目解读(五 完结) POI Easyexcel excel操作

前言 HM新出springboot入门项目《苍穹外卖》&#xff0c;笔者打算写一个系列学习笔记&#xff0c;“苍穹外卖项目解读”&#xff0c;内容主要从HM课程&#xff0c;自己实践&#xff0c;以及踩坑填坑出发&#xff0c;以技术&#xff0c;经验为主&#xff0c;记录学习&#xff0…
阅读更多...
Java课题笔记~ JSP内置对象

Java课题笔记~ JSP内置对象

(1)九个内置对象 jsp的内置对象&#xff1a;JSP内置对象是不需要声明和创建就可以在JSP页面脚本中使用的成员变量。 九个内置对象&#xff1a; 1.out对象 在JSP页面中&#xff0c;经常需要向客户端发送文本内容&#xff0c;这时&#xff0c;可以使用out对象来实现。out对象…
阅读更多...
引入三阶失真的非线性放大器的模拟输出及使用中值滤波器去除峰值研究（Matlab代码实现）

引入三阶失真的非线性放大器的模拟输出及使用中值滤波器去除峰值研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
【Spring】-Spring中Bean对象的存取

【Spring】-Spring中Bean对象的存取

作者&#xff1a;学Java的冬瓜 博客主页&#xff1a;☀冬瓜的主页&#x1f319; 专栏&#xff1a;【Framework】 主要内容&#xff1a;往spring中存储Bean对象的三大方式&#xff1a;XML方式(Bean标签)&#xff1b;五大类注解&#xff1b;方法注解。从spring中取对象的两种方式…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023