当前位置: 首页 > news >正文

爬虫补环境,ES6 Class在环境模拟中的应用与优势

相比于使用传统的Object实现补环境框架结构,使用 ES6 的 Class 具有以下优势:

  1. 代码维护更方便:Class的语法更简洁直观,方便开发者阅读和维护。
  2. 组织结构更清晰:Class提供了明确的层次结构,有助于代码的模块化管理。
  3. 扩展性更强:Class的继承机制使得扩展功能变得更加容易和自然。
  4. 代码复用率更高:通过继承和方法重用,Class大大提高了代码的复用性。
  5. 继承能力强:Class的继承机制远超传统Object,使得复杂对象的创建和管理更加高效。
  6. 减少重复代码:使用Class避免了传统Object方式中大量重复代码的编写。
  7. 贴近浏览器实现:Class的形式更接近浏览器底层实现,在数据输出上具有特别的优势。

以下是遵循跟浏览器保持一致的 document 继承结构

Object└─ EventTarget└─ Node└─ Element└─ HTMLElement└─ HTMLDivElement└─ ... (其他HTML元素)└─ Document└─ HTMLDocument

以下为框架代码的实现

class EventTarget {// 所有能够监听和触发事件的对象的基类,为 DOM 中的各种元素(如 Node、Element、HTMLElement 等)提供了统一的事件处理接口,使得这些对象可以响应用户交互和其他事件constructor () {this.listeners = {}}addEventListener (type, callback) {if (!this.listeners[type]) {this.listeners[type] = []}this.listeners[type].push(callback)}removeEventListener (type, callback) {if (!this.listeners[type]) returnconst stack = this.listeners[type]for (let i = 0; i < stack.length; i++) {if (stack[i] === callback) {stack.splice(i, 1)return}}}dispatchEvent (event) {if (!this.listeners[event.type]) return trueconst stack = this.listeners[event.type].slice()for (let i = 0; i < stack.length; i++) {stack[i].call(this, event)}return !event.defaultPrevented}
}class Node extends EventTarget {// 提供了基本的树结构操作和与节点相关的功能,所有的 DOM 元素和文本节点等都继承自Nodeconstructor () {super()}
}class Element extends Node {// 这个类里面放的是所有元素的Element类的属性方法和HTMLElement的属性方法,这里将 HTMLElement 的属性方法全部合并到Element中了constructor () {super()}
}class HTMLElement extends Element {constructor () {super()}
}// 一些内置的元素,比如div是来自于HTMLDivElement这个类实例化出来的
class HTMLDivElement extends HTMLElement {constructor () {super()}// 添加特有的属性和方法
}// 一些自定义的元素名,他就会用HTMLUnknownElement这个类实例化出来
class HTMLUnknownElement extends HTMLElement {constructor(tagName) {super()this.tagName = tagName}// 添加特有的属性和方法
}class Document extends Node {constructor () {super()}createElement (tagName) {switch (tagName.toLowerCase()) {case 'div':return new HTMLDivElement()default:return new HTMLUnknownElement(tagName)}}
}class HTMLDocument extends Document {constructor () {super()}
}const document = new HTMLDocument()
console.log(document)

相关文章:

爬虫补环境,ES6 Class在环境模拟中的应用与优势

相比于使用传统的Object实现补环境框架结构&#xff0c;使用 ES6 的 Class 具有以下优势&#xff1a; 代码维护更方便&#xff1a;Class的语法更简洁直观&#xff0c;方便开发者阅读和维护。组织结构更清晰&#xff1a;Class提供了明确的层次结构&#xff0c;有助于代码的模块…...

linuxcentos将本地库JAR/arr批量导入到Nexus3.x

背景 我们现在要搞一个私服maven来管理对应的依赖包&#xff0c;需要上传包。用nexus只能单个文件搞&#xff0c;批量导入不行&#xff0c;而且还要单独配置groupID什么的。不多BB,上教程 建脚本 vi mavenimport.sh内容是这个 #!/bin/bash # copy and run this script to t…...

js之操作元素属性和定时器以及相关案例倒计时

这里写目录标题 一级目录二级目录三级目录 Web APIs01四、操作元素属性1.操作元素常用属性2.操作元素样式属性通过style属性操作css1.修改样式通过style属性引出2.如果属性有-连接符&#xff0c;需要转换为小驼峰命名法3.赋值的时候&#xff0c;需要的时候不要忘记加css单位 通…...

高考计算机专业 热门专业方向

人工智能&#xff08;AI&#xff09;&#xff1a;随着技术进步&#xff0c;人工智能成为计算机技术的新方向&#xff0c;涵盖自动驾驶、智能机器人、语音识别等应用。该领域对人才的需求持续增长&#xff0c;是计算机专业的一个热门方向。数据科学与大数据分析&#xff1a;随大…...

《web应用技术》第十一次作业

1、验证过滤器进行权限验证的原理。 代码展示&#xff1a; Slf4j WebFilter(urlPatterns "/*") public class LoginCheckFilter implements Filter { Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) thro…...

Scala学习笔记11: 操作符

目录 第十一章 操作符1- 标识符2- 中置操作符3- 一元操作符4- 赋值操作符5- 操作符的优先级6- 结合性7- apply和update方法8- 提取器end 第十一章 操作符 在Scala中, 操作符是用来执行特定操作的符号或符号组合 ; Scala允许开发人员自定义操作符, 这些操作符可以是字母、数字…...

项目五串行通信系统 任务5-3温度信息上传

任务描述&#xff1a;DS18B20测量温度&#xff0c;单片机采集温度数据转换显示代码&#xff0c;并通过串行口发送到上位机显示。 底层文件&#xff1a; /********************************************* ds18b20底层函数:能完成一次温度数据读取 ***************************…...

前端 JS 经典:统一 Vite 中图片转换逻辑

在 Vue Vite 项目中有这样一段代码如下&#xff0c;引入了两个图片&#xff0c;一大一小。然后 console 出来引入结果。 import bigImg from "./assets/big.png"; import smallImg from "./assets/small.png";console.log(bigImg); console.log(smallImg…...

DOM-获取元素

获取元素的方法&#xff1a; 方法一&#xff1a;根据id获取元素document.getElementById <div id"time">2024-6-4</div> 在script标签中&#xff1a;注意getElementById括号里面必须要有引号&#xff0c;获得的是对象类型 var timer document.getEle…...

【安装笔记-20240612-Linux-内网穿透服务之cpolar极点云】

安装笔记-系列文章目录 安装笔记-20240612-Linux-内网穿透服务之 cpolar 极点云 文章目录 安装笔记-系列文章目录安装笔记-20240612-Linux-内网穿透服务之 cpolar 极点云 前言一、软件介绍名称&#xff1a;cpolar极点云主页官方介绍 二、安装步骤测试版本&#xff1a;openwrt-…...

Java 泛型与集合的深入解析:原理、应用与实践

泛型的基本原理 为什么需要泛型 在Java 5之前&#xff0c;Java的集合类只能存储Object类型的对象。这意味着&#xff0c;存储在集合中的对象在取出时需要进行类型转换&#xff0c;这不仅繁琐&#xff0c;而且容易出错。泛型通过在编译时进行类型检查&#xff0c;确保类型安全…...

Oracle 数据库的自动化工具:AWR 和 ASM

Oracle 数据库提供了一系列工具和技术&#xff0c;以提高数据库管理的效率和性能。其中&#xff0c;AWR和 ASM是两个关键组件。本文将详细介绍 AWR 和 ASM 的功能及其在数据库管理中的重要性。 AWR AWR 是 Oracle 数据库的一个核心部分&#xff0c;用于收集、处理和维护数据库…...

java技术专家面试指南50问【java学习+面试宝典】(五)

Dubbo需要 Web 容器吗&#xff1f; 不需要&#xff0c;如果硬要用 Web 容器&#xff0c;只会增加复杂性&#xff0c;也浪费资源。 一个字符串类型的值能存储最大容量是多少&#xff1f; 512M 什么是Kubectl&#xff1f; Kubectl是一个平台&#xff0c;您可以使用该平台将命…...

Elasticsearch之深入聚合查询

1、正排索引 1.1 正排索引&#xff08;doc values &#xff09;和倒排索引 概念&#xff1a;从广义来说&#xff0c;doc values 本质上是一个序列化的 列式存储 。列式存储 适用于聚合、排序、脚本等操作&#xff0c;所有的数字、地理坐标、日期、IP 和不分词&#xff08; no…...

大模型:分本分割模型

目录 一、文本分割 二、BERT文本分割模型 三、部署模型 3.1 下载模型 3.2 安装依赖 3.3 部署模型 3.4 运行服务 四、测试模型 一、文本分割 文本分割是自然语言处理中的一项基础任务&#xff0c;目标是将连续的文本切分成有意义的片段&#xff0c;这些片段可以是句子、…...

数据预处理 #数据挖掘 #python

数据分析中的预处理步骤是数据分析流程中的重要环节&#xff0c;它的目的是清洗、转换和整理原始数据&#xff0c;以便后续的分析能够准确、有效。预处理通常包括以下几个关键步骤&#xff1a; 数据收集&#xff1a;确定数据来源&#xff0c;可能是数据库、文件、API或网络抓取…...

VS2022 使用C++访问 mariadb 数据库

首先,下载 MariaDB Connector/C++ 库 MariaDB Products & Tools Downloads | MariaDB 第二步,安装后 第三步,写代码 #include <iostream> #include <cstring> #include <memory> #include <windows.h>#include <mariadb/conncpp.hpp>…...

kotlin 语法糖

Use of “when” Expression Instead of “switch” fun getDayOfWeek(day: Int): String {return when (day) {1 -> "Monday"2 -> "Tuesday"3 -> "Wednesday"4 -> "Thursday"5 -> "Friday"6 -> "Sa…...

.NET MAUI Sqlite数据库操作(一)

一、安装 NuGet 包 安装 sqlite-net-pcl 安装 SQLitePCLRawEx.bundle_green 二、配置数据库&#xff08;数据库文件名和路径&#xff09; namespace TodoSQLite; public static class Constants {public const string DatabaseFilename "TodoSQLite.db3";//数据库…...

SQL 窗口函数

1.窗口函数之排序函数 RANK, DENSE_RANK, ROW_NUMBER RANK函数 计算排序时,如果存在相同位次的记录,则会跳过之后的位次 有 3 条记录排在第 1 位时: 1 位、1 位、1 位、4 位…DENSE_RANK函数 同样是计算排序,即使存在相同位次的记录,也不会跳过之后的位次 有 3 条记录排在…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

AI语音助手的Python实现

引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...

数据结构:递归的种类(Types of Recursion)

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...