JS 实现鼠标框选（页面选择）时返回对应的 HTML 或文案内容

news2024/11/24 19:55:05

JS 实现鼠标框选（页面选择）时返回对应的 HTML 或文案内容

一、需求背景

1、项目需求

当用户进行鼠标框选选择了页面上的内容时，把选择的内容进行上报。

2、需求解析

虽然这需求就一句话的事，但是很显然，没那么简单…

因为鼠标框选说起来简单，就是选择的内容，但是这包含很多中情况，比如：只选择文案、选择图片、选择输入框、输入框中的内容选择、iframe、等。

简单总结，分为以下几点：

  1. 选择文案时

  2. 选择图片、svg、iframe、video、audio 等标签时

  3. 选择 input、select、textarea 等标签时

  4. 选择 input、textarea 标签内容时

  5. 选择类似   字符时

  6. 键盘全选时

  7. 鼠标右键选择

  8. 以上各模块结合时

  9. 当包含标签的时候，返回 html 结构，只有文本时返回文本内容

二、技术要点

鼠标框选包含以下几点：

  1. debounce 防抖

  2. addEventListener 事件监听

  3. Range 对象

  4. Selection 对象

1、debounce

老生常谈的技术点了，这里不能用节流，因为肯定不能你鼠标选择的时候，隔一段时间返回一段内容，肯定是选择之后一起返回。

这里用 debounce 主要也是用在事件监听和事件处理上。

  • 【debounce 掘金】
  • 【debounce CSDN】

2、addEventListener

事件监听，因为鼠标选择，不仅仅是鼠标按下到鼠标抬起，还包括双击、右键、全选。

需要使用事件监听对事件作处理。

  • 【addEventListener MDN】

3、Range

Range 接口表示一个包含节点与文本节点的一部分的文档片段。

Range 是浏览器原生的对象。

image

3.1. 创建 Range 实例，并设置起始位置
<body>
  <ul>
    <li>Vite</li>
    <li>Vue</li>
    <li>React</li>
    <li>VitePress</li>
    <li>NaiveUI</li>
  </ul>
</body>
<script>
  // 创建 Range 对象
  const range = new Range()
  const liDoms = document.querySelectorAll("li");
  // Range 起始位置在 li 2
  range.setStartBefore(liDoms[1]);
  // Range 结束位置在 li 3
  range.setEndAfter(liDoms[2]);
  // 获取 selection 对象
  const selection = window.getSelection();
  // 添加光标选择的范围
  selection.addRange(range);
</script>

image

可以看到，选择内容为第二行和第三行

3.1.1 浏览器兼容情况

image

3.2. Range 属性

  1. startContainer：起始节点。

  2. startOffset：起始节点偏移量。

  3. endContainer：结束节点。

  4. endOffset：结束节点偏移量。

  5. collapsed：范围的开始和结束是否为同一点。

  6. commonAncestorContainer：返回完整包含 startContainer 和 endContainer 的最深一级的节点。

3.2.1. 用我们上面创建的实例来看下 range 属性的值

image

3.2.2. 如果我们只选择文本内容时

只选择 li 中的 itePres

image

可以看出 range 属性对应的值

image

3.3. Range 方法

  1. cloneContents()：复制范围内容，并将复制的内容作为 DocumentFragment 返回。

  2. cloneRange()：创建一个具有相同起点/终点的新范围， 非引用，可以随意改变，不会影响另一方。

  3. collapse(toStart)：如果 toStart=true 则设置 end=start，否则设置 start=end，从而折叠范围。

  4. compareBoundaryPoints(how, sourceRange)：两个范围边界点进行比较，返回一个数字 -1、0、1。

  5. comparePoint(referenceNode, offset)：返回-1、0、1具体取决于 是 referenceNode 在 之前、相同还是之后。

  6. createContextualFragment(tagString)：返回一个 DocumentFragment。

  7. deleteContents()：删除框选的内容。

  8. extractContents()：从文档中删除范围内容，并将删除的内容作为 DocumentFragment 返回。

  9. getBoundingClientRect()：和 dom 一样，返回 DOMRect 对象。

  10. getClientRects()：返回可迭代的对象序列 DOMRect。

  11. insertNode(node)：在范围的起始处将 node 插入文档。

  12. intersectsNode(referenceNode)：判断与给定的 node 是否相交。

  13. selectNode(node)：设置范围以选择整个 node。

  14. selectNodeContents(node)：设置范围以选择整个 node 的内容。

  15. setStart(startNode, startOffset)：设置起点。

  16. setEnd(endNode, endOffset)：设置终点。

  17. setStartBefore(node)：将起点设置在 node 前面。

  18. setStartAfter(node)：将起点设置在 node 后面。

  19. setEndBefore(node)：将终点设置为 node 前面。

  20. setEndAfter(node)：将终点设置为 node 后面。

  21. surroundContents(node)：使用 node 将所选范围内容包裹起来。

3.4. 创建 Range 的方法
3.4.1. Document.createRange
const range = document.createRange();
3.4.2. Selection 的 getRangeAt() 方法
const range = window.getSelection().getRangeAt(0)
3.4.3. caretRangeFromPoint() 方法
if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
}
3.4.4. Range() 构造函数
const range = new Range()
3.5. Range 兼容性

image

  • 【详细兼容性：Can I use】

4、Selection

Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。

4.1. 获取文本对象
window.getSelection()

image

image

4.2. Selection 术语
4.2.1. 锚点 (anchor)

锚指的是一个选区的起始点（不同于 HTML 中的锚点链接）。当我们使用鼠标框选一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的。

4.2.2. 焦点 (focus)

选区的焦点是该选区的终点，当你用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。

4.2.3. 范围 (range)

范围指的是文档中连续的一部分。一个范围包括整个节点，也可以包含节点的一部分，例如文本节点的一部分。用户通常下只能选择一个范围，但是有的时候用户也有可能选择多个范围。

4.2.4. 可编辑元素 (editing host)

一个用户可编辑的元素（例如一个使用 contenteditable 的 HTML 元素，或是在启用了 designMode 的 Document 的子元素）。

4.3. Selection 的属性

首先要清楚，选择的起点称为锚点(anchor)，终点称为焦点(focus)。

  1. anchorNode：选择的起始节点。

  2. anchorOffset：选择开始的 anchorNode 中的偏移量。

  3. focusNode：选择的结束节点。

  4. focusOffset：选择开始处 focusNode 的偏移量。

  5. isCollapsed：如果未选择任何内容（空范围）或不存在，则为 true。

  6. rangeCount：选择中的范围数，之前说过，除 Firefox 外，其他浏览器最多为1。

  7. type：类型：None、Caret、Range

4.4. Selection 方法

  1. addRange(range): 将一个 Range 对象添加到当前选区。

  2. collapse(node, offset): 将选区折叠到指定的节点和偏移位置。

  3. collapseToEnd(): 将选区折叠到当前选区的末尾。

  4. collapseToStart(): 将选区折叠到当前选区的起始位置。

  5. containsNode(node, partlyContained): 判断选区是否包含指定的节点，可以选择是否部分包含。

  6. deleteFromDocument(): 从文档中删除选区内容。

  7. empty(): 从选区中移除所有范围（同 `removeAllRanges()``，已废弃）。

  8. extend(node, offset): 将选区的焦点节点扩展到指定的节点和偏移位置。

  9. getRangeAt(index): 返回选区中指定索引处的 Range 对象。

  10. removeAllRanges(): 移除所有选区中的范围。

  11. removeRange(range): 从选区中移除指定的 Range 对象。

  12. selectAllChildren(node): 选中指定节点的所有子节点。

  13. setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset): 设置选区的起始和结束节点及偏移位置。

  14. setPosition(node, offset)：collapse 的别名

4.5. Selection 兼容性

image

  • 【详细兼容性：Can I use】

三、项目实现

1、实现思路

  1. 先获取选择的内容，开发 getSelectContent 函数
  2. 对获取的内容进行判断，是否存在 selection 实例，没有直接返回 null
  3. 判断 selection 实例的 isCollapsed 属性
    • 没有选中，对 selection 进行 toString().trim() 操作，判断内容
      • 有内容，直接返回 text 类型
      • 无内容，返回 null
    • 有选中，则判断内容
  4. 判断选中的内容有没有节点
    • 没有节点，则和没有选中一样处理，进行 toString().trim() 操作，判断内容
      • 有内容，直接返回 text 类型
      • 无内容，返回 null
    • 有节点，进行 toString().trim() 操作，判断内容
      • 没有内容，判断是否有特殊节点
        • 有 'iframe', 'svg', 'img', 'audio', 'video' 节点，返回 html 类型
        • 有 'input', 'textarea', 'select'，判断 value 值，是否存在
          • 存在：返回 html 类型
          • 不存在：返回 null
        • 没有特殊节点，返回 null
      • 有内容，返回 html 类型
  5. 对鼠标 mousedown、mouseup 事件和 selectionchange、contextmenu、dblclick 事件进行监听，触发 getSelectContent 函数
  6. 在需要的地方进行 debounce 防抖处理

2、简易流程图

image

2、Debounce 方法实现

2.1. JS
function debounce (fn, time = 500) {
  let timeout = null; // 创建一个标记用来存放定时器的返回值
  return function () {
    clearTimeout(timeout) // 每当触发时，把前一个 定时器 clear 掉
    timeout = setTimeout(() => { // 创建一个新的 定时器，并赋值给 timeout
      fn.apply(this, arguments)
    }, time)
  }
}
2.2. TS
/**
 * debounce 函数类型
 */
type DebouncedFunction<F extends (...args: any[]) => any> = (...args: Parameters<F>) => void
/**
 * debounce 防抖函数
 * @param {Function} func 函数
 * @param {number} wait 等待时间
 * @param {false} immediate 是否立即执行
 * @returns {DebouncedFunction}
 */
function debounce<F extends (...args: any[]) => any>(
  func: F,
  wait = 500,
  immediate = false
): DebouncedFunction<F> {
  let timeout: ReturnType<typeof setTimeout> | null
  return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const context = this
    const later = function () {
      timeout = null
      if (!immediate) {
        func.apply(context, args)
      }
    }
    const callNow = immediate && !timeout
    if (timeout) {
      clearTimeout(timeout)
    }
    timeout = setTimeout(later, wait)
    if (callNow) {
      func.apply(context, args)
    }
  }
}

3、获取选择的文本/html 元素

3.1. 获取文本/html 元素
nterface IGetSelectContentProps {
  type: 'html' | 'text'
  content: string
}
/**
 * 获取选择的内容
 * @returns {null | IGetSelectContentProps} 返回选择的内容
 */
const getSelectContent = (): null | IGetSelectContentProps => {
  const selection = window.getSelection()
  if (selection) {
    // 1. 是焦点在 input 输入框
    // 2. 没有选中
    // 3. 选择的是输入框
    if (selection.isCollapsed) {
      return selection.toString().trim().length
        ? {
            type: 'text',
            content: selection.toString().trim()
          }
        : null
    }
    // 获取选择范围
    const range = selection.getRangeAt(0)
    // 获取选择内容
    const rangeClone = range.cloneContents()
    // 判断选择内容里面有没有节点
    if (rangeClone.childElementCount > 0) {
      // 创建 div 标签
      const container = document.createElement('div')
      // div 标签 append 复制节点
      container.appendChild(rangeClone)
      // 如果复制的内容长度为 0
      if (!selection.toString().trim().length) {
        // 判断是否有选择特殊节点
        const isSpNode = hasSpNode(container)
        return isSpNode
          ? {
              type: 'html',
              content: container.innerHTML
            }
          : null
      }
      return {
        type: 'html',
        content: container.innerHTML
      }
    } else {
      return selection.toString().trim().length
        ? {
            type: 'text',
            content: selection.toString().trim()
          }
        : null
    }
  } else {
    return null
  }
}
/**
 * 判断是否包含特殊元素
 * @param {Element} parent 父元素
 * @returns {boolean} 是否包含特殊元素
 */
const hasSpNode = (parent: Element): boolean => {
  const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
  const inpList = ['input', 'textarea', 'select']
  return Array.from(parent.children).some((node) => {
    if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
    if (
      inpList.includes(node.nodeName.toLocaleLowerCase()) &&
      (node as HTMLInputElement).value.trim().length
    )
      return true
    if (node.children) {
      return hasSpNode(node)
    }
    return false
  })
}
3.2. 只需要文本
/**
 * 获取框选的文案内容
 * @returns {string} 返回框选的内容
 */
const getSelectTextContent = (): string => {
  const selection = window.getSelection()
  return selection?.toString().trim() || ''
}

4、添加事件监听

// 是否时鼠标点击动作
let selectionchangeMouseTrack: boolean = false
const selectionChangeFun = debounce(() => {
  const selectContent = getSelectContent()
  console.log('selectContent', selectContent)
  // todo... 处理上报
  selectionchangeMouseTrack = false
})
// 添加 mousedown 监听事件
document.addEventListener('mousedown', () => {
  selectionchangeMouseTrack = true
})
// 添加 mouseup 监听事件
document.addEventListener(
  'mouseup',
  debounce(() => {
    selectionChangeFun()
  }, 100)
)
// 添加 selectionchange 监听事件
document.addEventListener(
  'selectionchange',
  debounce(() => {
    if (selectionchangeMouseTrack) return
    selectionChangeFun()
  })
)
// 添加 dblclick 监听事件
document.addEventListener('dblclick', () => {
  selectionChangeFun()
})
// 添加 contextmenu 监听事件
document.addEventListener(
  'contextmenu',
  debounce(() => {
    selectionChangeFun()
  })
)

也可以进行封装

/**
 * addEventlistener function 类型
 */
export interface IEventHandlerProps {
  [eventName: string]: EventListenerOrEventListenerObject
}

let selectionchangeMouseTrack: boolean = false
const eventHandlers: IEventHandlerProps = {
  // 鼠标 down 事件
  mousedown: () => {
    selectionchangeMouseTrack = true
  },
  // 鼠标 up 事件
  mouseup: debounce(() => selectionChangeFun(), 100),
  // 选择事件
  selectionchange:  debounce(() => {
    if (selectionchangeMouseTrack) return
    selectionChangeFun()
  }),
  // 双击事件
  dblclick: () => selectionChangeFun(),
  // 右键事件
  contextmenu: debounce(() => selectionChangeFun())
}
Object.keys(eventHandlers).forEach((event) => {
  document.addEventListener(event, eventHandlers[event])
})

5、返回内容

5.1. 纯文本内容

image

5.2. html 格式

image

6. 完整 JS 代码

function debounce (fn, time = 500) {
  let timeout = null; // 创建一个标记用来存放定时器的返回值
  return function () {
    clearTimeout(timeout) // 每当触发时，把前一个 定时器 clear 掉
    timeout = setTimeout(() => { // 创建一个新的 定时器，并赋值给 timeout
      fn.apply(this, arguments)
    }, time)
  }
}

let selectionchangeMouseTrack = false
document.addEventListener('mousedown', (e) => {
  selectionchangeMouseTrack = true
  console.log('mousedown', e)
})
document.addEventListener('mouseup', debounce((e) => {
  console.log('mouseup', e)
  selectionChangeFun()
}, 100))
document.addEventListener('selectionchange', debounce((e) => {
  console.log('selectionchange', e)
  if (selectionchangeMouseTrack) return
  selectionChangeFun()
}))
document.addEventListener('dblclick', (e) => {
  console.log('dblclick', e)
  selectionChangeFun()
})
document.addEventListener('contextmenu',debounce(() => {
  selectionChangeFun()
}))

const selectionChangeFun = debounce(() => {
  const selectContent = getSelectContent()
  selectionchangeMouseTrack = false
  console.log('selectContent', selectContent)
})

const getSelectContent = () => {
  const selection = window.getSelection();
  if (selection) {
    // 1. 是焦点在 input 输入框
    // 2. 没有选中
    // 3. 选择的是输入框
    if (selection.isCollapsed) {
      return selection.toString().trim().length ? {
        type: 'text',
        content: selection.toString().trim()
      } : null
    }
    // 获取选择范围
    const range = selection.getRangeAt(0);
    // 获取选择内容
    const rangeClone = range.cloneContents()
    // 判断选择内容里面有没有节点
    if (rangeClone.childElementCount > 0) {
      const container = document.createElement('div');
      container.appendChild(rangeClone);
      if (!selection.toString().trim().length) {
        const hasSpNode = getSpNode(container)
        return hasSpNode ? {
          type: 'html',
          content: container.innerHTML
        } : null
      }
      return {
        type: 'html',
        content: container.innerHTML
      }
    } else {
      return selection.toString().trim().length ? {
        type: 'text',
        content: selection.toString().trim()
      } : null
    }
  } else {
    return null
  }
}

const getSpNode = (parent) => {
  const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
  const inpList = ['input', 'textarea', 'select']
  return Array.from(parent.children).some((node) => {
    if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
    if (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return true
    if (node.children) {
      return getSpNode(node)
    }
    return false
  })
}

7. 线上预览

  • 【码上掘金】

四、总结

  1. 鼠标框选上报能监控用户在页面的行为，能为后续的数据分析等提供便利

  2. 基于 JS 中的 Selection 和 Range 实现的，使用原生 JS

  3. 涉及到的操作比较多，包含键盘、鼠标右键、全选等

  4. 能对框选的内容进行分类，区别 html 和 text，更方便的看出用户选择了哪些内容

引用

  • 【Range】
  • 【Selection】

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

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

相关文章

MySQL -- 相关知识点

MySQL -- 相关知识点

1.数据库相关介绍 数据库的选择通常取决于具体的应用需求&#xff0c;如性能、扩展性、数据一致性和易用性等因素。 1. 关系型数据库&#xff08;RDBMS&#xff09; MySQL&#xff1a; 广泛使用的开源数据库&#xff0c;支持大多数操作系统。强调易用性、灵活性和广泛的社区支…
阅读更多...
代码随想录算法训练营第36期DAY37

代码随想录算法训练营第36期DAY37

DAY37 先二刷昨天的3道题目&#xff0c;每种方法都写&#xff1a;是否已完成&#xff1a;是。 报告&#xff1a;134加油站的朴素法没写对。原因是&#xff1a;在if中缺少了store>0的判断&#xff0c;只给出了indexi的判断。前进法没写出来。因为忘记了总油量的判断。Sum。…
阅读更多...
基于Vue的自定义服务说明弹窗组件的设计与实现

基于Vue的自定义服务说明弹窗组件的设计与实现

基于Vue的自定义服务说明弹窗组件的设计与实现 摘要 随着技术的不断发展&#xff0c;前端开发面临着越来越高的复杂性和不断变化的需求。传统开发方式往往将整个系统构建为整块应用&#xff0c;这导致对系统的任何微小改动都可能触发整体的逻辑变更&#xff0c;从而增加了开发…
阅读更多...
第二证券：见证历史！印度这一交易所市值突破5万亿美元

第二证券：见证历史！印度这一交易所市值突破5万亿美元

又一次见证前史&#xff01; 孟买证券交易所本周实现了一个重要的里程碑&#xff0c;其市值突破5万亿美元&#xff0c;总市值在不到6个月的时间里添加了1万亿美元。 据了解&#xff0c;印度股市两大交易所别离为孟买证券交易所&#xff08;BSE&#xff09; 和国家证券交易所&…
阅读更多...
discuzX2.5的使用心得 札记一

discuzX2.5的使用心得 札记一

从开始接受php论坛的开发任务&#xff0c;对php感兴趣的我开始迷恋上discuz这个产品了&#xff0c; 像戴志康这样的创新人才&#xff0c;是我们这代人的骄傲和学习的榜样 应该是了解一下&#xff0c;啥事discuzX2.5&#xff0c;百度看一下 discuz x2.5_百度百科 看完百度词条…
阅读更多...
如何通过软件IIC使用MPU6050陀螺仪

如何通过软件IIC使用MPU6050陀螺仪

目录 1. MPU6050简介 2. MPU6050参数 3. MPU6050硬件电路 4. 代码编写 4.1 MPU6050写寄存器 4.2 MPU6050读寄存器 4.3 初始化 4.4 MPU6050获取ID号 4.5 MPU6050获取数据 1. MPU6050简介 MPU6050是一个6轴姿态传感器&#xff0c;可以测量芯片自身X、Y、Z轴的…
阅读更多...
AWTK实现汽车仪表Cluster/DashBoard嵌入式GUI开发（七）：快启

AWTK实现汽车仪表Cluster/DashBoard嵌入式GUI开发（七）：快启

前言： 汽车仪表是人们了解汽车状况的窗口，而仪表中的大部分信息都是以指示灯形式显示给驾驶者。仪表指示灯图案都较为抽象，对驾驶不熟悉的人在理解仪表指示灯含义方面存在不同程度的困难，尤其对于驾驶新手，如果对指示灯的含义不求甚解，有可能影响驾驶的安全性。即使是对…
阅读更多...
关于新配置的adb，设备管理器找不到此设备问题

关于新配置的adb，设备管理器找不到此设备问题

上面页面中一开始没有找到此android设备&#xff0c; 可能是因为我重新配置的adb和设备驱动&#xff0c; 只把adb配置了环境变量&#xff0c;驱动没有更新到电脑中&#xff0c; 点击添加驱动&#xff0c; 选择路径&#xff0c;我安装时都放在了SDK下面&#xff0c;可以尝试…
阅读更多...
怎么查看公网IP？

怎么查看公网IP？

在网络通信中&#xff0c;每个设备都会被分配一个IP地址&#xff0c;用于在互联网上进行唯一标识和通信。公网IP是指可以被公开访问的IP地址&#xff0c;可以用来建立远程连接或者进行网络访问等操作。怎么查看公网IP呢&#xff1f;下面将介绍几种常用的方法。 使用命令行查询公…
阅读更多...
mainwindow.ui和mainwindow.h和ui_mainwindow.h这几个文件之间的联系是什么

mainwindow.ui和mainwindow.h和ui_mainwindow.h这几个文件之间的联系是什么

在Qt应用程序开发中&#xff0c;mainwindow.ui, mainwindow.h, 和 ui_mainwindow.h 这三个文件之间有着紧密的联系&#xff0c;共同构成了使用Qt Designer设计的图形用户界面&#xff08;GUI&#xff09;应用程序的基础。下面是这三个文件各自的作用及它们之间的关联&#xff1…
阅读更多...
linux day7 wget，curl

linux day7 wget，curl

wget下载命令 curl [-O] 网址 不写-O表示请求网址&#xff0c;会返回网页html代码 写-O表示请求下载网页文件
阅读更多...
基于因果图的灰度故障定位

基于因果图的灰度故障定位

简 介 本文介绍由南开大学、华为技术有限公司、清华大学共同合作的论文&#xff1a;面向服务器操作系统的非侵入式灰度故障定位。该论文已被The ESEC/FSE Conference 2024&#xff08;The ACM Joint European Software Engineering Conference and Symposium on the Foundatio…
阅读更多...
【易生支付官网注册/登录安全分析报告】

【易生支付官网注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…
阅读更多...
mybatisPlus-DB静态工具

mybatisPlus-DB静态工具

方法跟mybatisplus的service接口非常像&#xff0c;静态工具可以避免依赖循环注入。
阅读更多...
异步爬虫学习实战项目：水效标识网

异步爬虫学习实战项目：水效标识网

大家好&#xff0c;我是南枫&#xff0c;今天一起来学习异步爬虫。 文章开始之前&#xff0c;我们先搞清楚为什么要学异步爬虫&#xff1f;我们之后在工作中会遇到爬大量数据&#xff0c;比如百万数据采集&#xff0c;用平常的方法爬取的效率会比较低&#xff0c;所以要学习异…
阅读更多...
React 其他 Hooks

React 其他 Hooks

其他 Hooks useRef 可用于获取 DOM 元素 const ScrollRef useRef(null)ScrollRef.current useContext &#xff08;先回顾一下之前的 Context 知识&#xff0c;借用之前 ppt 和源码&#xff09; Hooks 中使用 useContext 来获取 context 的值 // 父组件创建 contextexpor…
阅读更多...
在MySQL数据库中的视图和事务。

在MySQL数据库中的视图和事务。

视图 view 临时表 作用&#xff1a;优化多表查询的效率 可以将经常使用的连接查询结果使用视图进行保存&#xff0c;避免多次重复的笛卡尔积运算 MySQL数据库在多表查询的时候会自动进行笛卡尔积运算。 如果将来经常要用到某一个多表查询的结果就可以使用视图将这个结果…
阅读更多...
Android 观察者模式（OBSERVER）应用详解

Android 观察者模式（OBSERVER）应用详解

文章目录 1、观察者模式设计初衷1.1. 解耦对象之间的依赖关系1.2. 允许动态的依赖关系1.3. 自动通知和更新1.4 设计初衷的详细说明1. 对象之间的解耦2. 动态依赖关系3. 自动更新 2、实现细节2.1. Subject 接口和实现2.2. Observer 接口和实现2.3. 主类 3、主要角色4、关系示意图…
阅读更多...
Nginx - Stream 日志模块不完全指北

Nginx - Stream 日志模块不完全指北

文章目录 Pre官网Nginx Stream模块基础功能Nginx Stream访问日志的缺陷解决方案或替代方案安装和配置nginx-log-enhancement模块1. 下载nginx-log-enhancement模块源代码2. 解压源代码3. 配置Nginx源代码4. 编译和安装Nginx5. 配置nginx-log-enhancement模块6. 重启Nginx7. 测试…
阅读更多...
I/O '24｜学习资源焕新，技术灵感升级

I/O '24｜学习资源焕新，技术灵感升级

2024 年 5 月 15 日凌晨举行的 Google I/O 大会为各地的开发者们带来了新的灵感。面对技术革新&#xff0c;相信各位开发者们都迫不及待想要自己上手试一试。 别急&#xff0c;Google 谷歌今年为中国的开发者们准备了一份特别的学习资源&#xff0c;让开发者们自由探索新知。 G…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023