BoardYoungC

DOM常⻅的操作 ⽂档对象模型 (DOM) 是 HTML 和 XML ⽂档的编程接⼝ 创建节点 createElement创建新元素，接受⼀个参数，即要创建元素的标签名 createTextNode创建⼀个⽂本节点 createDocumentFragment⽤来创建⼀个⽂档碎⽚，它表⽰⼀种轻量级的⽂档，主要是⽤来存储临时节点，然后把⽂档碎⽚的内 容⼀次性添加到 DOM 中 createAttribute创建属性节点，可以是⾃定义属性 12const dataAttribute = document.createAttribute('custom'); consle.log(dataAttribute); 查询节点 返回⼀个包含节点⼦树内所有与之相匹配的 Element 节点列表，如果没有相匹配的，则返回⼀个空 1234567891 document.getElementById('id属性值');返回拥有指定id的对象的引⽤2...

async与awaitasync 是异步的意思， await 则可以理解为 async wait 。所以可以理解 async 就是⽤来声 明⼀个异步⽅法，⽽ await 是⽤来等待异步⽅法执⾏ 21.3.1. async async 函数返回⼀个 promise 对象，下⾯两种⽅法是等效的 123456789101112131 function f() {2 return Promise.resolve('TEST');3 }4 *// asyncF is equivalent to f!*5 async function asyncF() {6 return 'TEST';7 } 21.3.2. await正常情况下， await 命令后⾯是⼀个 Promise 对象，返回该对象的结果。如果不是 Promise 对 象，就直接返回对应的值 12345678910111 async function f(){2 *//* *等同于*3 *// return 123*4 return...

ajax原理AJAX 全称(Async Javascript and XML) 即异步的 JavaScript 和 XML ，是⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术，可以在不重新加载整 个⽹⻚的情况下，与服务器交换数据，并且更新部分⽹⻚ Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然 后⽤ JavaScript 来操作 DOM ⽽更新⻚⾯ 实现 Ajax 异步交互需要服务器逻辑进⾏配合，需要完成以下步骤： • 创建 Ajax 的核⼼对象 XMLHttpRequest 对象 • 通过 XMLHttpRequest 对象的 open() ⽅法与服务端建⽴连接 • 构建请求所需的数据内容，并通过 XMLHttpRequest 对象的 send() ⽅法发送给服务器端 • 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状 • 态接受并处理服务端向客⼾端响应的数据结果 • 将处理结果更新到 HTML ⻚⾯中

数组的常⽤⽅法下⾯前三种是对原数组产⽣影响的增添⽅法，第四种则不会对原数组产⽣影响 push()push() ⽅法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新⻓度 unshift()unshift()在数组开头添加任意多个值，然后返回新的数组⻓度 splice()传⼊三个参数，分别是开始位置、0（要删除的元素数量）、插⼊的元素，返回空数组 concat()创建⼀个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组， 不会影响原始数组 下⾯三种删除都会影响原数组，最后⼀项不影响原数组： pop()⽅法⽤于删除数组的最后⼀项，同时减少数组的 length 值，返回被删除的项 shift()⽅法⽤于删除数组的第⼀项，同时减少数组的 length 值，返回被删除的项 splice()传⼊两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组 slice() 转换⽅法join() ⽅法接收⼀个参数，即字符串分隔符，返回包含所有项的字符串 123let colors = ["red", "green",...

防抖和节流本质上是优化⾼频率执⾏代码的⼀种⼿段 如：浏览器的 resize 、 scroll 、 keypress 、 mousemove 等事件在触发时，会不断地调⽤ 绑定在事件上的回调函数，极⼤地浪费资源，降低前端性能 为了优化体验，需要对这类事件进⾏调⽤次数的限制，对此我们就可以采⽤ 防抖（debounce） 和 节 流（throttle） 的⽅式来减少调⽤频率 节流: n 秒内只运⾏⼀次，若在 n 秒内重复触发，只有⼀次⽣效 • 将时间戳写法的特性与定时器写法的特性相结合，实现⼀个更加精确的节流 1234567891011121314151617181 function throttled(fn, delay) {2 let timer = null3 let starttime = Date.now()4 return function () {5 let curTime = Date.now() // 当前时间6 let remaining = delay - (curTime - starttime) // 从上⼀次到现在，还剩下多少多余时间7...

闭包⼀个函数和对其周围状态（lexical environment，词法环境）的引⽤捆绑在⼀起（或者说函数被引⽤ 包围），这样的组合就是闭包（closure） 也就是说，闭包让你可以在⼀个内层函数中访问到其外层函数的作⽤域 12345678function init() {var name = "Mozilla"; // name 是⼀个被 init 创建的局部变量function displayName() { // displayName() 是内部函数，⼀个闭包alert(name); // 使⽤了⽗函数中声明的变量}displayName();}init(); 任何闭包的使⽤场景都离不开这两点： • 创建私有变量 •...

em/px/rem/vh/vw区别传统的项⽬开发中，我们只会⽤到 px 、 % 、 em 这⼏个单位，它可以适⽤于⼤部分的项⽬开发，且 拥有⽐较良好的兼容性 从 CSS3 开始，浏览器对计量单位的⽀持⼜提升到了另外⼀个境界，新增了 rem 、 vh 、 vw 、 vm 等⼀些新的计量单位 利⽤这些新的单位开发出⽐较良好的响应式⻚⾯，适应多种不同分辨率的终端，包括移动设备等 单位 在 css 单位中，可以分为⻓度单位、绝对单位，如下表所指⽰ 这⾥我们主要讲述px、em、rem、vh、vw px，表⽰像素，所谓像素就是呈现在我们显⽰器上的⼀个个⼩点，每个像素点都是⼤⼩等同的，所以 像素为计量单位被分在了绝对⻓度单位中 有些⼈会把 px 认为是相对⻓度，原因在于在移动端中存在设备像素⽐， px 实际显⽰的⼤⼩是不确 定的 这⾥之所以认为 px 为绝对单位，在于 px 的⼤⼩和元素的其他属性⽆关 16.2.2. em em是相对⻓度单位。相对于当前对象内⽂本的字体尺⼨。如当前对⾏内⽂本的字体尺⼨未被⼈为设 置，则相对于浏览器的默认字体尺⼨（...

设备像素、css像素、设备独⽴像素、dpr、ppi 之间的区别在 css 中我们通常使⽤px作为单位，在PC浏览器中 css 的1个像素都是对应着电脑屏幕的1个物理像 素 这会造成⼀种错觉，我们会认为 css 中的像素就是设备的物理像素但实际情况却并⾮如此， css 中的像素只是⼀个抽象的单位，在不同的设备或不同的环境中， css 中的1px所代表的设备物理像素是不同的 当我们做移动端开发时，同为1px的设置，在不同分辨率的移动设备上显⽰效果却有很⼤差异 这背后就涉及了css像素、设备像素、设备独⽴像素、dpr、ppi的概念 介绍 CSS像素 CSS像素（css pixel, px）: 适⽤于web编程，在 CSS 中以 px 为后缀，是⼀个⻓度单位 在 CSS 规范中，⻓度单位可以分为两类，绝对单位以及相对单位 px是⼀个相对单位，相对的是设备像素（device pixel） ⼀般情况，⻚⾯缩放⽐为1，1个CSS像素等于1个设备独⽴像素 CSS 像素⼜具有两个⽅⾯的相对性： • 在同⼀个设备上，每1个 CSS 像素所代表的设备像素是可以变化的（⽐如调整屏幕的分辨率） •...

实现两栏布局 右侧⾃适应 三栏布局中间⾃适应两栏布局两栏布局实现效果就是将⻚⾯分割成左右宽度不等的两列，宽度较⼩的列设置为固定宽度，剩余宽度 由另⼀列撑满， ⽐如 Ant Design ⽂档，蓝⾊区域为主要内容布局容器，侧边栏为次要内容布局容器 这⾥称宽度较⼩的列⽗元素为次要布局容器，宽度较⼤的列⽗元素为主要布局容器 flex弹性布局 123456789101112131415<style>.box{display: flex;}.left {width: 100px;}.right {flex: 1;}</style><div class="box"><div class="left">左边</div><div class="right">右边</div></div> 三栏布局三栏布局按照左中右的顺序进⾏排列，通常中间列最宽，左右两列次之 ⼤家最常⻅的就是...

flex布局和grid布局Flex 布局（弹性布局）Flex 是一维布局模型（仅针对「行」或「列」单一维度），核心解决「行内 / 列内元素的空间分配、对齐」问题，适合线性布局（如两栏 / 多栏、导航栏、居中对齐等）。 核心特点 ： 以「主轴（默认水平）+ 交叉轴」为核心，元素沿主轴排列； 侧重「剩余空间分配」（如 flex:1 自动占满剩余宽度）； 适配性强，适合响应式线性布局（如两栏、均分列表）。 典型场景：导航栏、两栏 / 多栏自适应、元素垂直居中、流式布局。 Grid 布局（网格布局）Grid 是二维布局模型（同时控制「行 + 列」），核心解决「多行列的网格分区」问题，适合复杂的二维布局（如卡片网格、表单布局、页面整体框架）。 核心特点 ： 把容器划分为「行 + 列」的网格，元素可占据任意单元格（跨行列）； 支持精确控制行列尺寸（固定 / 比例 / 自动），如 grid-template-columns: 100px 1fr 2fr； 布局更精准，适合复杂二维分区。 典型场景：页面整体框架（头部...