...容。文章目录一.DOM简介 1.什么是DOM 2.DOM 树二.获取元素的方法 1.根据ID获取 2.根据标签名获取 3.通过 HTML5 新增的方法获取(注意兼容) 4.获取特殊元素(body,html) 三.事件基础 1.事件概述 2.执行事件的步骤 3.常见的鼠标事件四.操作元素 1.操作元素内容(改变元素内容) 2. 操作常见元素属性 3.操作表单元素属性 4.操作元素样式属性 5.自定义属性的操作 6.H5自定义属性五.节点操作 1.为什么要学习节点操作 2.节点概述 3.节点层级一.DOM简介 1.什么是DOM 文档对象模型(简称DOM) 是W3C组织推荐的处理可扩展标记语言的标准编程接口 W3C已经定义来一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构样式。 2.DOM 树文档：一个页面就是一个文档，DOM 中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 element 表示节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示文档树(Dom树)：以html为根节点，形成的一颗倒立的树状结构，我们成为DOM树；这个树上所有的东西都叫节点，节点有很多类，比如文本节点，元素节点等等，这些节点如果我们通过DOM方法去获取或者其他的操作去使用就叫做DOM对象，所有节点都是DOM对象二.获取元素的方法 1.获取页面中的元素可以使用以下几种方式根据ID获取根据标签名获取通过HTML5新增的方法获取特殊元素获取 1.根据ID获取使用getElementByld()方法可以获取带有ID的元素对象 getElementByld()，是document下的一个方法代码演示 <body><div id="time">2020-11-26</div><script>// 1.因为我们文档页面从上往下加载，所以先得有标签所以我们的script写在标签下面// 2. document文档 get 获得 element 元素 by 通过驼峰命名法// 3.参数 id是大小写敏感的字符串// 4.返回的是一个对象var timer = document.getElementById('time');console.log(timer);// 5.console.dir 打印我们返回得的元素对象更好的查看里面的属性和方法console.dir(timer);</script></body> 2.根据标签名获取使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合语法如下 document.getElementsByTagName('标签名') 注意： 1.因为得到的是一个对象的集合，使用我们想要操作里面的元素就需要遍历得到元素对象是动态的代码演示 <body><ul><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li></ul><ul id="nav"><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li></ul><script>// 1.返回的是获取过来元素对象的集合以伪数组的形式存储的var lis = document.getElementsByTagName('li')console.log(lis);// 2.如果想要依次打印里面的元素对象我们可以采取遍历方式for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}// 3.这里可以是可以获取标签的.getElementsByTagName()可以得到这个元素里面的某些标签var nav1 = document.getElementById('nav') //这个获取nav元素var navli = nav.getElementsByTagName('li') //这里是获取nav 里面的li标签要先获取 nav元素在获取里面的liconsole.log(navli);</script></body> 3.通过 HTML5 新增的方法获取(注意兼容) 1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合 2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象 3. document.querySelectorAll('选择器'); // 根据指定选择器返回所有元素对象集合注意：querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’nav’); 代码演示 <body><div class="box">盒子1</div><div class="box">盒子2</div><div id="nav"><ul><li>首页</li><li>产品</li></ul></div><script>// 1. getElementsByClassName 根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);// 2. querySelector 返回指定选择器的第一个元素对象切记里面的选择器需要加符号 .box navvar firstBox = document.querySelector('.box');console.log(firstBox);var nav = document.querySelector('nav');console.log(nav);var li = document.querySelector('li');console.log(li);// 3. querySelectorAll()返回指定选择器的所有元素对象集合var allBox = document.querySelectorAll('.box');console.log(allBox);var lis = document.querySelectorAll('li');console.log(lis);</script> 4.获取特殊元素(body,html) 获取body元素 - doucumnet.body // 返回body元素对象获取html元素 . document.documentElement // 返回html元素对象代码演示 <body><script>// 获取bdoy元素var bodyEle = document.bodyconsole.log(bodyEle); //返回body元素// 获取html元素var htmlEle = document.documentElementconsole.log(htmlEle); //返回html元素</script></body> 三.事件基础 1.事件概述 JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解：触发— 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。代码演示 <body><button id="btn">浩哥</button><script>// 点击一个按钮，弹出一个对话框// 1.事件是有三部分组成的 1.事件源 2.事件类型 3.事件处理程序也称为事件三要素// (1).事件源事件被触发的对象 var but = document.getElementById('btn')// (2).事件类型如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过还是？？？？// (3).事件处理程序通过一个函数赋值的方式完成因为函数就是实现某种功能的but.onclick = function() {alert('浩哥爱编程')}</script></body> 2.执行事件的步骤 1. 获取事件源DOM对象(意思是你要获取那个元素) 2. 注册事件(绑定事件意思是通过什么方式来处理比如是鼠标经过还是鼠标点击等等行为) 3. 添加事件处理程序(采取函数赋值形式意思是你想做啥) 代码演示 <body><div>123</div><script>// 事件执行步骤点击div 控制台输出我被选中了// 1.获取事件源var div = document.querySelector('div')// 2.绑定事件注册事件// div.onclick// 3.添加事件处理程序div.onclick = function() {console.log('我被点击了');}</script></body> 3.常见的鼠标事件 onmouseenter鼠标移入事件 onmouseleave鼠标移出事件四.操作元素 JS的DOM操作可以改变网页内容、结构和样式，利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性 1.操作元素内容(改变元素内容) elemeny.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉 elemernt.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行 elemernt.Content可以获取隐藏元素的文本，包含换行和空白代码演示 <title>Document</title><style>div,p {height: 30px;width: 300px;line-height: 30px;text-align: center;color: fff;background-color: pink;}</style></head><body><button>显示当前系统时间</button><div>某个时间</div><p>123</p><script>// 当我们点击了按钮，div里面的文字会发生变化// 1.获取元素注意这里的按钮和div都要获取到因为点击按钮div里面要发生变化所以都要获取var but = document.querySelector('button');var div = document.querySelector('div');// 2.绑定事件// but.onclick// 3.程序处理but.onclick = function() {// 改变元素内容 element(元素).innerTextdiv.innerText = '2020-11-27'}// 4.我们元素可以不用添加事件，就可以直接显示日期var p = document.querySelector('p');p.innerText = '2020-11-27';</script> elemeny.innerText和elemeny.innerHTML的区别代码演示 <body><div></div><p></p><ul><li> 文字</li><li>123</li></ul><script>// innertText 和 innertHTML 的区别// 1. innerText 不识别html标签非标准去除空格和换行var div = document.querySelector('div');div.innerText = '<strong>今天是:</strong> 2020';// 2.innertHTML 识别html标签 W3C标准保留空格和换行的推荐尽量使用这个因为这个是标准var p = document.querySelector('p')p.innerHTML = '<strong>今天是:</strong> 2020';// 3.这俩个属性是可读写的意思是除了改变内容还可以元素读取里面的内容的var ul = document.querySelector('ul')console.log(ul.innerText);console.log(ul.innerHTML);// .4innerHtml innerText 之间的区别：设置内容的时候，如果内容当中包含标签字符串 innerHtml会有标签的特性，也就是说标签会在页面上生效如果内容当中包含标签字符串 innerText会把标签原样展示在页面上，不会让标签生效读取内容的时候，如果标签内部还有其它标签，innerHtml会把标签内部带着其它的标签全部输出如果标签内部还有其它标签，innerText只会输出所有标签里面的内容或者文本，不会输出标签如果标签内部没有其它标签，他们两个一致；都是读取文本内容，innerHtml会带空白和换行</script></body> 2. 操作常见元素属性 innerText、innerHTML 改变元素内容 src、href id、alt、title 代码演示 <body><button id="ldh">刘德华</button><button id="zxy">张学友</button><br><img src="./images/ldh.jpg" alt="" width="200px" height="200px" title="刘德华" id="img"><script>// 修改属性 src// 我们可以操作元素得方法来修改元素得属性就是元素的是什么属性在重新给值就可以完成相应的赋值操作了// 1.获取元素var ldh = document.getElementById('ldh')var zxy = document.getElementById('zxy')var img = document.getElementById('img')// 2.注册事件程序处理zxy.onclick = function() {// 当我们点击了图片的时候图片路径就发生变化这里的.表示的得意思 img对象下的src属性img.src = './images/zxy.jpg';// 当我们变换图片得同时里面得title也要跟着变所以前面要加上img.img.title = '张学友';}ldh.onclick = function() {img.src = './images/ldh.jpg';img.title = '刘德华';}</script> 3.操作表单元素属性利用DOM可以操作如下表单元素的属性 type、value、checked、selected、disabled 代码演示： <body><button>按钮</button><input type="text" value="输入内容"><script>// 我想把value里面的输入内容改变为被点击了// 1.获取元素var but = document.querySelector('button')var input = document.querySelector('input')// 2.注册事件处理程序but.onclick = function() {// input.innerHTML = '被点击了'; 这个是普通盒子比如 div 标签里面的内容// 表单里面的值文字内容是通过value来修改的input.value = '被点击了'// 如果需要某个表单被禁用不能再点击了使用 disabled 我们想要这个按钮 button禁用// but.disabled = true// 还有一种写法// this指向的是事件函数的调用者谁调用就指向谁这里调用者是btnthis.disabled = true}</script></body> 4.操作元素样式属性我们可以通过 JS 修改元素的大小、颜色、位置等样式。 1.element.style 行内样式操作注意： JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor JS 修改 style 样式操作，产生的是行内样式，所以行内式比内嵌式高代码演示 <style>div {width: 200px;height: 200px;background-color: red;}</style></head><body><div></div><script>// 要求点击div变成粉色 height变为250px// 1.获取元素var div = document.querySelector('div');// 2.注册事件处理程序div.onclick = function() {// div.style里面的属性采取的是驼峰命名法// this等于div this调用者谁调用谁执行this.style.backgroundColor = 'pink'this.style.height = '250px'}</script> 2.element.className 类名样式操作注意：如果样式修改较多，可以采取操作类名方式更改元素样式。 class因为是个保留字，因此使用className来操作元素类名属性 className 会直接更改元素的类名，会覆盖原先的类名。代码演示 <style>div {width: 100px;height: 100px;background-color: pink;}.change {background-color: purple;color: fff;font-size: 25px;margin-top: 100px;}</style></head><body><div class="first">文本</div><script>// 1. 使用 element.style 获得修改元素样式如果样式比较少或者功能简单的情况下使用var test = document.querySelector('div');test.onclick = function() {// this.style.backgroundColor = 'purple';// this.style.color = 'fff';// this.style.fontSize = '25px';// this.style.marginTop = '100px';// 让我们当前元素的类名改为了 change// 2. 我们可以通过修改元素的className更改元素的样式适合于样式较多或者功能复杂的情况如果想继续添加样式即在change添加即可// 3. 如果想要保留原先的类名，我们可以这么做多类名选择器// this.className = 'change';this.className = 'first change';}</script> 5.自定义属性的操作 js给我们规定了可以自己添加属性在操作元素属性的时候，元素.语法只能操作元素天生具有的属性,如果是自定义的属性，通过.语法是无法操作的只能通过getAttribute和setAttribute去操作，他俩是通用的方法，无论元素天生的还是自定义的都可以可以操作 1.获取属性值 element.属性获取属性值。 element.getAttribute(‘属性’)；区别: element.属性获取内置属性值(元素本身自带的属性如果是自定义属性不能被获取) element.getAttribute(‘属性’)；主要获得自定义的属性 (标准) 我们自定义的属性 2.设置属性值 element.属性 = ‘值’ 设置内置属性值 element.setAttribute(‘属性’，‘值’) 区别： element.属性设置内置属性值 element.setAttribute(‘属性’)；主要设置自定义的属性(标准) 3.移除属性 element.removeAttribute(‘属性’)；代码演示 <body><div id="demo" index="1" class="nav"></div><script>var div = document.querySelector('div');// 1.获取元素的属性值// (1) element.属性console.log(div.id);// (2) element.getAttribute('属性') get获取得到 attribute属性的意思我们自己添加的属性称之为自定义属性console.log(div.getAttribute('id')); //democonsole.log(div.getAttribute('index')); // 1// 2.设置元素的属性值// (1) element.属性 = '值' div.id = 'test'div.className = 'navs'// (2) element.setAttribute('属性','值')div.setAttribute('index', 2);div.setAttribute('class', 'footer') //这里就是class 不是className 比较特殊// 3.移除属性 removeAttribute(属性)div.removeAttribute('index');</script></body> 只要是自定义属性最好都是用element.setAttribute(‘属性’，‘值’)来设置如果是自带属性用element.属性来设置 6.H5自定义属性自定义属性的目的：第一、是为了保存属性第二、并且使用数据。有一些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute(‘属性’) 获取的但是有些自定义属性很容易引起歧义，不容易判断是元素还是自定义属性 H5给我们新增了自定义属性： 1.设置H5自定义属性 H5规定自定义属性data-开头做为属性名并且赋值比如<div data-index:“1”> 或者使用JS设置element.setAttribute(‘deta-index’,2) 2.获取H5自定义属性兼容性获取 element.getAttribute(‘data-index’) 推荐开发中使用这个 H5新增element.dataset.index 或者element.datase[‘index’] ie 11以上才支持代码演示 <body><div getTime="10" data-index="20" data-name-list="40"></div><script>// 获取元素var div = document.querySelector('div');console.log(div.geTime); //undefined getTime是自定义属性不能直接通过元素的属性来获取而是用自定义属性来获取的getAttribute(‘属性’)console.log(div.getAttribute('getTime')); //10// H5添加自定义属性的写法以data-开头div.setAttribute('data-time', 30)// 1.兼容性获取H5自定义属性console.log(div.getAttribute('data-time')); // 30// 2.H5新增的获取自定义属性的方法它只能获取data-开头的// dataset 是一个集合的意思存放了所有以data开头的自定义属性如果你想取其中的某一个只需要在dataset.的后面加上自定义属性名即可console.log(div.dataset);console.log(div.dataset.time); // 30// 还有一种方法dataset['属性']console.log(div.dataset['time']); // 30// 如果自定义属性里面有多个-链接的单词我们获取的时候采取驼峰命名法不用要-了console.log(div.dataset.nameList); // 40console.log(div.dataset['nameList']); // 40</script></body> 五.节点操作 1.为什么要学习节点操作获取元素通常使用俩种方式（1）利用DOM提供的方法获取元素但是逻辑性不强繁琐（2）利用节点层级关系获取元素如利用父子，兄弟关系获取元素逻辑性强，但是兼容性不怎么好 2.节点概述网页中的所有内容都是节点(标签、属性、文本、注释等等) ，在DOM中，节点使用node表示。HTML DOM 树中的所有节点均可通过javascript进行访问，所有HTML元素(节点) 均可被修改，也可以创建或删除一般地，节点至少拥有nade Type(节点类型)、nodeName(节点名称)和nodeValue(节点值) 这三个基本属性元素节点 nodeType 为 1 属性节点 node Name为 2 文本节点 nodeValue为 3 (文本节点包含文字、空格、换行等等) 实际开发中，节点操作主要操作的是元素节点 3.节点层级利用DOM树可以把节点划分为不同得层级关系，常见得是父子兄层级关系 1.父级节点 1.node.parentNode parenNode属性可以返回某节点得父节点，注意是最近的父节点哟！！！如果指定的节点没有父节点就返回null 代码演示 <body><div class="box"><div class="box1"></div></div><script>var box1 = document.querySelector('.box1')// 得到的是离元素最近的父节点(亲爸爸) 得不到就返回得是nullconsole.log(box1.parentNode); // parentNode 翻译过来就是父亲的节点</script></body> 2.子级节点操作 1.parentNode.children（非标准） parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回(重点记住这个就好，以后重点使用) 虽然children是一个非标准，但是得到了各个浏览器的支持，我们大胆使用即可！！！代码演示 <body><ul><li>1</li><li>1</li><li>1</li><li>1</li></ul><script>// DOM 提供的方法（APL）获取这样获取比较麻烦var ul = document.querySelector('ul')var lis = ul.querySelectorAll('li')// children子节点获取 ul里面所有的小li 放心使用没有限制兼容性实际开发中经常使用的console.log(ul.children);</script> 如何返回子节点的第一个和最后一个？ 2.parentNode.firstElementChild firstElementChild返回第一个子元素节点，找不到则返回unll 3.parentNode.lastElementChild lastElementChild返回最后一个子元素节点，找不到则返回null 注意：这俩个方法有兼容性问题，IE9以上才支持谨慎使用但是我们有解决方案如果想要第一个子元素节点，可以使用 parentNode.chilren[0] 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1] 代码演示 <body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>var ul = document.querySelector('ul')// 1.firstElementChild 返回第一个子元素节点 ie9 以上才支持注意兼容console.log(ul.firstElementChild);// 2.lastElementChild返回最后一个子元素节点console.log(ul.lastElementChild);// 3.实际开发中用到的既没有兼容性问题又可以返回子节点的第一个和最后一个console.log(ul.children[0]);console.log(ul.children[ul.children.length - 1]); //ul.children.length - 1获取的永远是子节点最后一个</script></body> 3.兄弟节点 1.node.nextSibling nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。注意包含所有的节点 2.node.previousSibling previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。注意包含所以有的节点代码演示 <body><div>我是div</div><span>我是span</span><script>var div = document.querySelector('div')// 返回当前元素的下一个兄弟节点nextSibling，找不到返回null。注意包含元素节点或者文本节点等等console.log(div.nextSibling); //这里返回的是text 因为它的下一个兄弟节点是换行// 返回的是当前元素的上一个节点previousSibling，找不到返回null。注意包含元素节点或者文本节点等等console.log(div.previousSibling); //这里返回的是text 因为它的上一个兄弟节点是换行</script></body> 3.node.nexElementSibling nexElementSibling 返回当前元素下一个兄弟元素节点，找不到返回null 4.node.previousElementSibling previousElementSibling返回当前元素上一个兄弟节点，找不到返回null 注意：这俩个方法有兼容性问题，IE9以上才支持代码演示 <body><div>我是div</div><span>我是span</span><script>var div = document.querySelector('div')// nextElementSiblingd得到下一个兄弟元素节点console.log(div.nextElementSibling); // span // previousElementSibling 得到的是上一个兄弟元素节点console.log(div.previousElementSibling); // null 因为它上面没有兄弟元素了返回空的</script></body> 怎么解决兼容性问题呢？可以封装一个兼容性函数（简单了解即可在实际开发中用的不多） function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;} }return null;} 4.创建节点 1.document.createElement('tagName') document.createElement( ) 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在的是根据我们的需求动态生成的，所有我们也称为动态创建元素节点我们创建了节点要给添加到节点里面去称为添加节点 1.node.appendChild（child） node.appendChild（）方法将一个节点添加到指定父节点的子节点列表末尾 2.node.insertBefore(child，指定添加元素位置) node.insertBefore( ) 方法将一个节点添加到父节点的指定子节点前面代码演示 <body><ul><li>1</li></ul><script>// 1.创建节点 createElementvar li = document.createElement('li')// 2.添加节点创建了节点要添加到某一个元素身上去叫添加节点 node.appendChild(child) done 父级 child 子级如果前面有元素了则在后面追加元素类似数组中的push依次追加var ul = document.querySelector('ul')ul.appendChild(li)// 3.添加节点 node.insertBefore(child，指定元素) 在子节点前面添加子节点 child子级你要添加的元素var lili = document.createElement('li')ul.insertBefore(lili, ul.children[0]) //ul.children 这句话的意思是添加到ul父亲的子节点第一个// 总结如果想在页面中添加元素分为俩步骤1.创建元素 2.添加元素</script></body> 5.删除节点 node.removeChild(child) node.removeChlid（）方法从DOM 中删除一个子节点，返回删除的节点简单点就是从父元素中删除某一个孩子node就是父亲child就是孩子删除的节点.remove(没有参数) 注意：ie不支持代码演示 <body><button>按钮</button><ul><li>熊大</li><li>熊二</li><li>熊三</li></ul><script>// 1.获取元素var ul = document.querySelector('ul')var but = document.querySelector('button');// 2.删除元素// but.onclick = function() {// ul.removeChild(ul.children[0])// }// 3.点击按钮键依次删除，最后没有删除内容了就禁用按钮 disabled = true 禁用按钮语法but.onclick = function() {if (ul.children.length == 0) {this.disabled = true} else {ul.removeChild(ul.children[0])} }</script></body> 6.复制节点(克隆节点) node.cloneNode() node.dloneNode()方法返回调用该方法节点得一个副本，也称为克隆节点/拷贝节点注意 1.如果括号参数为空或者为false，则是浅拷贝，只复制里面得标签，不复制内容 2.如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的内容代码演示 <body><ul><li>1</li><li>2</li><li>3</li></ul><script>// 1.获取元素var ul = document.querySelector('ul');// 2.复制元素 node.cloneNode() 如果参数括号为空或者false则只会复制元素不会复制内容，如果待有参数true则内容和元素都会被复制var lis = ul.children[0].cloneNode(true);// 3.获取元素ul.appendChild(lis)</script></body> 7.替换(改)节点 node.replaceChild(新节点,替换到什么位置) 代码演示 <body><ul class="list"><li>1</li><li>2</li></ul><script>// 替换（改）节点父节点.replaceChild(新元素, 替换到什么位置)// (1)获取父元素var ulNode = document.querySelector('.list');// (2)创建新的元素var liRead = document.createElement('li')// (3)给新元素添加内容liRead.innerHTML = '5';// (4)替换元素ulNode.replaceChild(liRead, ulNode.children[1])</script></body> 8.三种动态创建元素区别 document.write() element.innerHTML document.createElement() 区别 document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，它则会导致页面全部重绘 element.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘 element.innerHTML 创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结果有点复杂 createElement()创建多个元素效率低一点点，但是结果更加清晰总结：不同浏览器下,innerHTML效率要比createElement()高代码演示 <body><button>点击</button><p>abc</p><div class="inner"></div><div class="create"></div><script>// window.onload = function() {// document.write('<div>123</div>');// }// 三种创建元素方式区别 // 1. document.write() 创建元素如果页面文档流加载完毕，再调用这句话会导致页面重绘// var btn = document.querySelector('button');// btn.onclick = function() {// document.write('<div>123</div>');// }// 2. innerHTML 创建元素var inner = document.querySelector('.inner');// for (var i = 0; i <= 100; i++) {// inner.innerHTML += '<a href="">百度</a>'// }var arr = [];for (var i = 0; i <= 100; i++) {arr.push('<a href="">百度</a>');}inner.innerHTML = arr.join('');// 3. document.createElement() 创建元素var create = document.querySelector('.create');for (var i = 0; i <= 100; i++) {var a = document.createElement('a');create.appendChild(a);}</script></body> 本篇文章为转载内容。原文链接：https://blog.csdn.net/m0_46978034/article/details/110190352。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-08-04 13:36:05

247

转载

JQuery

jquery找到以i开头id

...它简化了HTML文档遍历、事件处理、动画和Ajax交互等功能，提供了一套简洁易用的API，使得开发者能够更高效地进行JavaScript编程。 CSS选择器 , CSS选择器是一种用于在HTML文档中定位元素的方法，通过描述元素的属性、层级关系等特征来选取需要操作的DOM元素。在本文中，jQuery使用了CSS选择器语法来查找ID以“i”开头的div元素，例如$(div id^= i )，其中 id^= i 就是一个CSS选择器，表示匹配所有id属性值以字符串“i”开头的元素。 DOM操作 , DOM（Document Object Model）操作是指在网页加载后，通过JavaScript动态修改或访问HTML文档结构与内容的过程。在jQuery库中，提供了丰富且易于使用的DOM操作方法，如查找元素、改变内容、添加或删除节点等，从而极大地提升了前端开发者对页面元素进行动态控制的能力。在文章示例中，通过jQuery的选择器功能实现对ID以特定字符开头的元素进行筛选和操作，就是DOM操作的一种具体应用。

2023-06-13 17:39:52

322

软件工程师

HTML

倒数html代码

DOM（文档对象模型） , 在Web开发中，DOM是浏览器对HTML和XML文档的内部表示方式。它将HTML文档转换成一个由节点树构成的对象模型，允许JavaScript等脚本语言动态访问、修改或创建页面内容、结构及样式。在本文上下文中，通过JavaScript操作DOM，实现了列表元素的倒序排列。 innerHTML属性 , 这是JavaScript中的一个重要属性，用于获取或设置HTML元素内部的所有HTML代码。在文章示例中，通过遍历每个列表项并读取其innerHTML属性，获取了列表项的内容；然后将这些内容按照倒序插入到新的HTML元素中，从而实现了列表的倒序显示。 window.onload事件 , 这是一个在网页所有资源（包括图像、脚本等）完全加载完毕后触发的全局JavaScript事件。在该篇文章中，作者使用window.onload函数来确保在执行倒序排列的JavaScript代码之前，所有的HTML元素已经正确加载到页面上，避免了因元素未加载完成导致的错误或无效操作。

2023-11-11 23:44:19

581

编程狂人

Element-UI

Element-UI Cascader级联选择器在电商网站商品分类系统中搜索功能失效：探究数据源与程序逻辑问题及解决方案

...完整性，即所有的分类节点都应该存在于数据源中。同时，我们也需要检查数据是否正确，包括但不限于分类名称、父级ID等信息。如果发现问题，我们需要及时修复。 2. 正确实现搜索功能在自定义搜索功能时，我们需要确保程序逻辑的正确性。具体来说，我们需要做到以下几点： - 在用户输入搜索关键字后，我们需要遍历所有节点，找出匹配的关键字； - 如果一个节点包含全部关键字，那么它就应该被选中； - 我们还需要考虑到一些特殊情况，比如模糊匹配、通配符等。五、结论总的来说，当Element-UI的Cascader级联选择器的搜索功能失效时，我们需要从数据源和程序逻辑两方面进行排查和修复。这不仅意味着咱们得有两把刷子，技术这块儿得扎扎实实的，而且呢，也得是个解决问题的小能手，这样才能把事儿做得漂亮。希望这篇文章能够帮助到大家，让大家在面对此类问题时不再迷茫。

2023-06-04 10:49:05

461

月影清风-t

ReactJS

ReactJS中的组件化、高阶组件与树形数据结构实现：基于props、state和render方法的代码组织实践

...根据数据结构动态生成DOM元素时，可以在组件的render方法中调用自身以遍历层级结构，逐层渲染子节点。例如，在文章给出的renderTree函数中，通过对树形数据进行深度优先搜索（DFS），不断调用TreeNode组件来递归地渲染整个树结构，确保每个节点都被正确地转换为对应的DOM元素。

2023-05-09 23:53:32

152

断桥残雪-t

VUE

Vue.js应用性能优化实战：响应式系统、虚拟DOM更新与过度渲染控制，组件生命周期管理及第三方组件按需加载策略配合Vue DevTools监控实践

...1. 数据监听与虚拟DOM更新 Vue核心机制的理解 Vue利用其响应式系统来跟踪数据变化，并自动触发相应的视图更新。然而，当数据层级过深或者数据量过大时，Vue的依赖追踪和Diff算法可能会影响性能。 vue { { item.content } } 在此例中，当items数组中的任何元素发生变化时，Vue将会遍历整个列表重新渲染。为解决这个问题，我们可以使用computed属性配合filter、map等方法减少不必要的计算，或者使用v-if和track-by优化列表渲染。 2. 防止过度渲染 Vue生命周期钩子的合理运用 Vue组件的生命周期钩子函数如created、updated等会在特定阶段执行，频繁的生命周期调用也可能导致性能下降。 vue { { data } } 在这个例子中，每次点击都会触发更新操作，可能导致过度渲染。为了实现这个目标，我们可以考虑加入缓存这个小妙招，或者更酷一点，借助Vue的watch功能，让它像个机智的小侦探一样，只在数据真正“动起来”的时候，才会触发更新的操作。 3. 第三方库与组件优化按需加载与懒加载大型项目中通常会引用许多第三方库和自定义组件，一次性加载所有资源无疑会使初始渲染变慢。Vue提供了动态导入（异步组件）的功能来实现按需加载。 vue // 异步组件示例 const AsyncComponent = () => import('./AsyncComponent.vue'); export default { components: { AsyncComponent } } 上述代码中，AsyncComponent只有在被渲染到视图时才会被真正加载。此外，路由懒加载也是提升Vue应用性能的重要手段。 4. 性能工具的使用与监控 Vue DevTools的威力最后，Vue DevTools是一款强大的开发者工具，它可以帮助我们深入洞察Vue应用内部的工作原理，定位性能瓶颈。比如，咱们可以通过“组件树”这个小工具，瞅瞅哪些组件被渲染得过于频繁，有点儿劳模转世的感觉；再者呢，利用“性能分析器”这位高手，好好查查哪些生命周期钩子耗时太长，像蜗牛赛跑似的。综上所述，面对Vue应用可能出现的反应慢问题，我们需要理解Vue的核心机制，合理利用各种API与功能，适时引入性能优化策略，并借助工具进行问题定位与排查。这样操作，咱们的Vue应用才能既塞满各种实用功能，又能确保用户体验丝滑流畅，一点儿不卡顿。记住，优化是个持续的过程，需要我们在实践中不断探索与改进。

2023-02-07 14:18:17

138

落叶归根

JQuery

jquery打印机插件

...它简化了HTML文档遍历、事件处理、动画和Ajax交互等功能的编写，让开发者能够更高效、便捷地处理网页动态效果和用户交互行为。在本文中，jQuery是实现网页打印功能的基础工具，通过调用其插件方法可以轻松完成复杂的DOM操作和事件绑定。打印机插件 , 打印机插件是一种基于jQuery库开发的扩展组件，主要用于方便快捷地实现网页内容的打印功能。文中提到的打印机插件具有简单易用的特点，开发者只需引入该插件的js文件，并调用特定的方法如printThis()，就能实现在浏览器环境下选择性或整体地打印指定的网页区域，同时支持自定义打印标题、页眉、页脚等细节设置，以满足不同应用场景下的打印需求。 DOM元素 , DOM（Document Object Model）元素是指网页中的各种结构化组成部分，如HTML标签、文本节点等。在JavaScript和jQuery中，DOM元素是可以被程序识别并进行操作的对象。在本文所描述的打印功能实现过程中，“DOM元素”指的是需要被打印的目标区域，例如id为 printArea 的div或其他容器，通过jQuery的选择器选中这些DOM元素后，可以利用打印机插件将其内容输出到打印预览或实际打印出来。

2023-06-02 08:55:50

409

算法侠

JQuery

jquery打开新窗口并获取元素

...它简化了HTML文档遍历、事件处理、动画设计以及AJAX交互等复杂的操作。在本文中，jQuery被用于在一个新的浏览器窗口中打开网页，并通过其便捷的方法获取新窗口中的元素内容，极大地提高了开发效率和代码可读性。 DOM（Document Object Model） , DOM是一种编程接口，它将HTML和XML文档表示为树形结构，允许开发者通过JavaScript等脚本语言动态访问和修改页面内容、样式及结构。在文章中，jQuery通过遍历和操作DOM来查找并获取新窗口中特定ID的元素内容。 AJAX（Asynchronous JavaScript and XML） , AJAX是一种创建快速动态网页的技术，通过在后台与服务器交换少量数据，无须重新加载整个网页就可实现网页的部分更新。虽然本文并未直接提及使用AJAX获取新窗口元素内容，但作为jQuery库的重要功能之一，AJAX体现了JavaScript库对于异步数据交互能力的支持，这对于现代Web应用来说至关重要。在实际应用场景中，AJAX常与jQuery配合使用，实现在不刷新页面的情况下加载或更新内容。

2023-12-31 09:38:03

346

码农

JQuery

jquery插件都怎么写

...地简化了HTML文档遍历、事件处理、动画设计以及Ajax交互等功能。通过提供一套简洁易用的API接口，jQuery帮助开发者更高效地处理浏览器兼容性问题，并实现丰富的网页动态效果与用户交互功能。 JavaScript库 , JavaScript库是一系列预先编写好的、可重用的JavaScript代码模块集合，用于解决常见的编程任务或提供特定的功能。在本文中，jQuery就是一个JavaScript库的例子，它封装了许多复杂且常用的DOM操作方法，使得开发者能够更加便捷地进行Web前端开发工作。 $.fn , 在jQuery库中，$.fn是核心构造函数jQuery.prototype的简写形式，用于扩展jQuery的核心功能。插件开发者可以通过$.fn对象上的方法来扩展jQuery的功能，这样所有jQuery实例都可以访问到这些新添加的方法。例如，在文章中提到的$.fn.myPlugin就是在jQuery上定义了一个名为myPlugin的新方法，使得开发者可以通过选择器调用该方法并对选中的元素执行相应的逻辑。链式操作 , 链式操作是jQuery库的一大特色，它允许开发者在一个语句中连续调用多个jQuery方法，而无需反复获取同一组元素的引用。这意味着每次方法调用结束后都会返回包含原始元素集的jQuery对象，以便进行后续的操作。例如，在文中所述的插件编写中，return this;就是为了维持这种链式调用特性，使得在调用插件方法后还能继续使用其他jQuery方法对元素进行操作。

2023-12-24 23:53:36

419

程序媛

JQuery

jquery手机端地区插件

...用来简化HTML文档遍历、事件处理、动画效果和Ajax操作，极大地方便了Web开发者的工作。而在移动互联网时代，开发手机端Web应用已经成为了一种潮流和迫切的需求。为了提高用户的体验，我们需要在移动端进行省市县三级联动地区选择，鉴于此，jQuery发布了手机端地区插件。 $(selector).twCitySelector({ city: "", // 默认选中的城市 district: "", // 默认选中的区县 onChange: function (city, district) { } // 选择省市区县时触发事件 }); tWCitySelector是一个通过Class选择器调用的jQuery插件，使用起来非常方便。我们可以直接在需要使用地区选择的HTML元素绑定插件，在使用时传入相应的参数。其中city和district分别是默认选中的城市和区县，onChange是用户选择地区时触发的回调函数。tWCitySelector会在加载完成后自动创建DOM元素，我们可以通过对DOM元素的操作自定义风格和属性。除此之外，还有其他可配置参数，如下： { css: { container: "tw-city-selector-container", // 包裹地区选择控件的DOM元素的Class样式 select: "tw-city-selector-select" // 地区选择控件的DOM元素的Class样式 }, provinces: twCitySelectorData, // 省市区县数据结构，内置于插件中 autoHideOnSelect: true, // 选择完成后是否自动隐藏控件 hideOnBodyClick: true // 在控件外点击时是否隐藏控件 } 使用jQuery手机端地区插件，可以大大提高移动端Web应用的用户体验，而且插件API简洁易用，非常适合开发者快速完成相关功能的开发。当然，在使用插件前，还需要了解地区数据的相关知识，如何将数据导入到应用中等。总之，jQuery地区插件是一个非常实用的工具，值得Web开发者掌握。

2023-01-04 17:27:06

404

软件工程师

JQuery

jquery搜素文字变色

...理HTML文档、操作DOM元素、处理事件以及执行Ajax交互等任务时的工作。通过提供简洁易读的API和丰富的插件生态系统，JQuery使得开发者能够快速实现诸如动画效果、表单验证、网页内容筛选等功能，从而提高开发效率并增强用户体验。 JavaScript库 , JavaScript库是一组预先编写的、可复用的JavaScript代码集合，旨在为开发者提供便利，简化常见的编程任务，例如DOM操作、Ajax请求、事件处理、动画制作等。在本文中，JQuery就是一个用于简化网页开发的JavaScript库，它封装了许多复杂的JavaScript功能，使得开发者可以使用更简洁、易于理解的语法来完成复杂任务。 DOM遍历（文中提及的段落遍历） , DOM遍历是指在HTML文档对象模型（Document Object Model, DOM）中查找、访问或操作每一个节点的过程。在本文上下文中，通过JQuery的each()方法遍历ID为“content”的div元素下的所有段落（p标签），逐个检查其文本内容是否包含用户在搜索框中输入的关键字，进而实现搜索文字变色的功能。 keyup事件 , keyup事件是JavaScript中的一个DOM事件，当用户释放键盘上的任意键后触发。在本文示例中，我们为搜索框绑定了keyup事件监听器，这样每当用户在搜索框中输入或修改关键词后松开按键，就会触发相应的JavaScript函数，实时更新页面内匹配关键词的文字高亮状态。 CSS样式（文中提及的highlight类） , CSS（层叠样式表）是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。在文章中提到的.highlight类样式，就是在CSS中定义的一种样式规则，用来给匹配到搜索关键词的文本添加背景颜色（黄色），从而实现高亮显示的效果。

2023-04-05 13:26:07

码农

Element-UI

el-form中prop属性对复杂数据结构（如嵌套对象与数组）的深度绑定与验证实践

...我们用v-for循环遍历用户列表，并为每个用户创建一个表单项，其prop属性通过计算属性的方式生成，从而实现了对数组内嵌套对象属性的绑定及验证。 4. 总结与思考设置el-form-item的深层prop属性并非难事，关键在于理解Vue.js中数据绑定的机制以及prop属性的工作原理。无论是在简单的“套娃”对象，还是复杂的、像迷宫一样的数组结构里头，只要我们巧妙地使出点号大法或者灵活运用动态属性名称这两大招式，就能轻而易举地搞定那些深层级的数据绑定问题，一点儿都不费劲儿！而这也正是Vue.js和Element-UI设计的巧妙之处，它们让我们在处理复杂业务场景时依然能保持简洁高效的编码风格。当然啦，在实际做开发的时候，咱们也得瞅准项目需求和特点这些实际情况，灵活使出各种招数，不断把咱们的代码逻辑打磨得更溜，让用户体验蹭蹭往上涨。

2023-08-03 22:37:41

468

笑傲江湖_

VUE

vue和css

...用于根据数组或者对象遍历生成DOM元素。如文中所示 <p v-for=\ (item, index) in items\ :key=index> item </p>，这段代码会基于items数组中的每一项数据item，循环渲染出多个p标签，并且为每个p标签设置一个基于数组索引的独特key值，以便Vue能够准确跟踪每个节点的身份，优化列表渲染性能和状态保持。

2023-09-02 10:50:23

编程狂人

JQuery

jQuery数组操作：使用push与原生方法添加元素

...，尤其是在处理数组和DOM操作方面。此外，React框架最新版本18也值得关注。React 18引入了自动批处理功能，这大大提高了组件更新的效率。对于那些使用React构建复杂Web应用的开发者来说，这意味着可以更高效地管理状态和DOM更新，从而提升用户体验。在实际项目中，合理利用这些新特性，可以显著优化代码结构和运行效率。再者，Vue.js框架也在不断迭代升级。Vue 3引入了Teleport和Fragments等新特性，进一步简化了组件开发过程。Teleport允许开发者将组件的模板片段渲染到DOM树的不同位置，这对于构建模态框、提示框等交互式组件非常有用。Fragments则解决了Vue 2中单文件组件只能返回单一根节点的问题，使代码更加简洁和灵活。总之，无论是JavaScript语言本身的演进，还是React和Vue框架的新功能，都为现代Web开发带来了更多的可能性。开发者们应当持续关注这些前沿技术，以保持竞争力，并为用户提供更优秀的体验。

2025-03-10 16:14:39

清风徐来

JSON

使用JavaScript将JSON数据递归转换为HTML无序列表树形菜单结构

...次调用自身以处理下一层级的数据，直至遍历到所有层级的叶子节点，从而实现将JSON数据逐层展开转化为树形菜单项。懒加载 , 在Web开发领域，懒加载是一种优化网页性能的技术手段，特别适用于处理大量数据或资源时。懒加载的基本思想是延迟对象的加载时间，仅在需要时才进行加载，而不是一次性加载所有内容。虽然本文并未直接提及懒加载技术，但在处理大规模JSON数据构建树形菜单时，可以结合懒加载策略，只在用户滚动至相应位置或点击展开按钮时，再动态加载并渲染深层级的菜单项，这样能有效减少初始页面加载时间和提高页面响应速度。

2023-02-06 12:53:37

631

清风徐来-t

ReactJS

React列表渲染性能优化：虚拟列表与useMemo关键技术

...map()函数来遍历数组，然后生成相应的React元素。就像数豆子一样，一个一个过，每个豆子还能变身成你需要的组件！例如： jsx const items = [1, 2, 3, 4, 5]; function Item({ value }) { return {value} ; } function List() { return ( {items.map((item) => ( ))} ); } 在这个例子中，我们创建了一个简单的列表组件，它遍历一个数组并为每个元素生成一个组件。这里有一个关键点——我们给每个组件添加了key属性。这是React用来追踪组件状态的重要手段，所以一定要记得设置。 2. 性能问题的根源然而，当数据列表变得非常庞大时，这种简单的渲染方式可能会导致性能问题。想想看，假如你有个超级长的名单，里面塞了几千条信息，每回你要改一个数据，就得把整个名单从头到尾刷新一遍。那得多花时间啊，还得占不少电脑内存，感觉就像是在用扫帚清理游泳池里的落叶一样。因此，我们需要找到更高效的方法来处理这种情况。 2.1 使用虚拟列表虚拟列表是一种常见的优化方法。它只渲染当前视窗内的元素，而将其他元素暂时隐藏。这样可以显著减少DOM操作的数量，提高性能。实现虚拟列表假设我们使用了第三方库react-virtualized来实现虚拟列表。你可以按照以下步骤进行： 1. 安装react-virtualized bash npm install react-virtualized 2. 创建一个虚拟列表组件 jsx import React from 'react'; import { List } from 'react-virtualized'; const items = [/.../]; // 假设这是一个大数组 function Row({ index, style }) { return ( {/ 根据index渲染相应的数据 /} {items[index]} ); } function VirtualList() { return ( width={300} height={300} rowCount={items.length} rowHeight={30} rowRenderer={({ index, key, style }) => ( )} /> ); } 在这个例子中，我们利用react-virtualized提供的List组件来渲染我们的数据列表。它会根据可视区域动态计算需要渲染的行数，从而大大提高了性能。 2.2 使用React.memo和useMemo 除了虚拟列表外，我们还可以通过React提供的React.memo和useMemo Hook来进一步优化性能。 React.memo React.memo是一个高阶组件，它可以帮助我们避免不必要的组件重新渲染。当你确定某个组件的输出只取决于它的属性（props）时，可以用React.memo给这个组件加个“套子”。这样，如果属性没变，组件就不会重新渲染了，能省不少事儿呢！ jsx import React from 'react'; const MemoizedItem = React.memo(function Item({ value }) { console.log('Rendering Item:', value); return {value} ; }); function List() { return ( {items.map((item) => ( ))} ); } useMemo useMemo则可以在函数组件内部使用，用于缓存计算结果。当你有个复杂的计算函数，而且结果只跟某些特定输入有关时，可以用useMemo来把结果存起来。这样就不会每次都重新算一遍了，挺省事儿的。 jsx import React, { useMemo } from 'react'; function List() { const processedItems = useMemo(() => { // 这里做一些复杂的计算 return items.map(item => item 2); // 假设我们只是简单地乘以2 }, [items]); // 只有当items发生变化时才重新计算 return ( {processedItems.map((item) => ( ))} ); } 3. 探讨与总结通过以上几种方法，我们可以显著提升React应用中的列表渲染性能。当然，具体采用哪种方法取决于你的应用场景和需求。有时候，结合多种方法会达到更好的效果。总的来说，在React中实现高性能的数据列表渲染并不是一件容易的事，但只要掌握了正确的技巧，就可以轻松应对。希望今天的分享对你有所帮助！如果你有任何疑问或者更好的建议，欢迎留言讨论！最后，我想说的是，技术的学习之路永无止境，每一次的尝试都是一次成长的机会。希望你在编程的路上越走越远，也期待与你一起探索更多的可能性！

2025-02-18 16:18:41

寂静森林

Java

Java中使用CompletableFuture实现异步加载Tree Table及节点收起功能

...等前端框架，借助虚拟DOM和状态管理机制，可以便捷地实现树形表格的异步渲染和节点展开收起功能，并通过IntersectionObserver API实现实时懒加载。另外，对于数据可视化领域，业界也在积极探索如何将异步加载策略融入更多类型的图表和组件中。例如，D3.js库允许开发者构建高度定制化的可视化界面，结合其内置的异步请求处理机制，能够轻松应对大规模数据集的动态加载与展示。与此同时，关于数据隐私和安全问题也不容忽视。在实现异步加载的过程中，如何保证敏感信息的安全传输，防止数据泄露，是开发者必须关注的重要课题。目前，TLS协议、加密算法及权限控制等多种手段被广泛应用于保障异步加载数据的安全性。综上所述，无论是从提升用户体验、优化系统性能，还是从保障数据安全的角度出发，深入研究并合理运用树形表格与异步加载技术都是现代软件开发过程中不可或缺的一环。随着技术的迭代更新，相关领域的最佳实践和创新解决方案将持续涌现，值得广大开发者密切关注与学习。

2023-03-08 18:52:23

386

幽谷听泉_t

Element-UI

Element-UI树形控件中节点渲染错误与展开收起问题：数据源、逻辑分析及解决方案探析

...大型项目时，由于数据层级过深导致的性能瓶颈，通过优化递归渲染逻辑，显著提升了树形组件的响应速度与用户体验。此外，文章还讨论了Vue.js 3.0版本中引入的新特性——Teleport，如何结合虚拟DOM技术有效提升树形组件在特定场景下的渲染效率。同时，针对Element-UI社区的最新动态，近期发布的Element Plus作为Element-UI的升级版，在处理树形控件等组件上进行了诸多改进，不仅修复了一些遗留问题，还新增了如懒加载、动态加载等功能，以满足现代前端开发对于性能和功能性的更高要求。因此，对于遇到树形组件节点无法正常展开或收起等问题的前端开发者而言，了解并借鉴上述技术和实践，不仅能针对性地解决现有问题，还能对未来项目的前端架构设计产生深远影响，提升整体开发效能。

2023-08-31 16:39:17

504

追梦人-t

MySQL

PHP实现无限极分类层级结构：递归算法与非递归处理方法在商品分类数据库表设计中的应用

...地将无限极分类转换为层级结构呢？二、为什么要使用无限极分类？首先，我们需要了解一下什么是无限极分类。无限极分类就像一棵大树，它的构造挺有趣。在这样的树形结构中，每一个小节点都有一个自己的‘老爹’节点，而这个‘老爹’呢，它还可能是其他许多小节点的‘老爹’。这样的构造方式，其实就像家谱一样，可以展示出各种级别的层次关系。比如说在商品分类里，就有爷爷辈的大类别、爸爸辈的中类别、儿子辈的小类别，甚至还有孙子辈的更细分的类别呢！其次，无限极分类的优点在于它可以方便地进行扩展。假如我们想要新增一个类别，就像在家族树上添个新枝丫一样简单，你只需要在它的“老爸”类别下加一个新的“小子类别”，这样一来，数据的一致性和完整性就能轻轻松松地保持住啦！三、什么是递归？那么，如何使用递归来处理无限极分类呢？这就需要用到递归的概念。递归啊，就是那种函数自己调用自己的神奇操作。你想象一下，这个函数有点像一个超级有耐心的小助手，一遍又一遍地做着同一件事情，但每次做的时候都比上次更进一步。通过这种自我迭代的过程，我们竟然能解开很多看起来超级复杂、让人挠头的问题呢！在处理无限极分类时，我们可以使用递归的方式，从根节点开始，一层一层地遍历下去，直到找到所有的叶子节点。然后，我们可以根据每层的节点，构建出相应的层级结构。四、如何使用递归来处理无限极分类？接下来，我们来看一下如何使用递归来处理无限极分类。假设我们有一个无限极分类的数据库表，其中包含id、parent_id和name三个字段。喏，你听我说哈，id呢，就相当于每个小节点的身份证号，是独一无二的。而parent_id呢，顾名思义，就是每个小节点它爹——父节点的身份证号啦。至于name嘛，简单易懂，那就是给每个小节点起的专属昵称哈！我们可以定义一个函数，输入参数是一个父节点的id，输出是一个层级结构的数组。具体操作如下： php function getTree($id){ $sql = "SELECT FROM node WHERE parent_id = '$id'"; $result = mysqli_query($conn, $sql); $arr = array(); while($row = mysqli_fetch_assoc($result)){ $arr[] = $row; } foreach($arr as $value){ if($value['child'] > 0){ $arr = array_merge($arr, getTree($value['id'])); } } return $arr; } 以上就是使用递归来处理无限极分类的一个简单示例。这个例子嘛，我们先从某个特定的老爸节点下手，把它的所有小崽子（子节点）都给挖出来。接着呢，对每一个小崽子，如果它们自己还有更下一代的小崽子，那我们就得像孙悟空钻进葫芦娃的肚子里那样，一层层地往里递归调用这个过程，把那些隐藏更深的孙子辈节点也给找全了。最后呢，咱们把这一大家子所有的节点都聚到一块儿，拼成一个完整的、层层分明的家族结构。然而，递归虽然强大，但也有它的局限性。当数据量大时，递归可能会导致栈溢出，影响程序的执行效率。因此，我们需要寻找其他的解决方案。五、不使用递归，如何处理无限极分类？那么，如果不使用递归，我们该如何处理无限极分类呢？答案就是使用非递归的方式，也就是我们常说的迭代法。迭代法的基本思想是从根节点开始，每次只处理一层数据，直到处理完所有的数据。这种方法压根儿不需要递归调用，所以你完全不用担心什么栈溢出的问题。而且实话跟你说，通常情况下，它的工作效率要比递归高不少！接下来，我们来看一下如何使用迭代法处理无限极分类。假设我们已经有了一个无限极分类的数据库表，其中包含id、parent_id和name三个字段。我们可以按照以下步骤进行处理： 1. 创建一个空的层级结构数组，用于存储所有的节点； 2. 获取根节点，将其添加到层级结构数组中； 3. 遍历所有的节点，对于每一个节点，如果它还没有被处理过，则对其进行处理，将其添加到层级结构数组中，然后处理它的所有子节点。具体的代码实现如下： php function getTree($root){ $tree = array(); $queue = array($root); while(count($queue) > 0){ $node = array_shift($queue); $tree[$node['id']] = array( 'id' => $node['id'], 'parent_id' => $node['parent_id'], 'name' => $node['name'], 'children' => array() ); if($node['child'] > 0){ $queue = array_merge($queue, getChildren($conn, $node['id'])); } } return $tree; } function getChildren($conn, $id){ $sql = "SELECT FROM node WHERE parent_id = '$id'"; $result = mysqli_query($conn, $sql); $arr = array(); while($row = mysqli_fetch_assoc($result)){ $arr[] = $row; } return $arr; } 以上就是在非递归的情况下，处理无限极分类的一个简单示例。在举这个例子的时候，我们首先动手整了个空荡荡的层级结构数组出来，接着找准了那个根节点，把它给塞进了这个层级结构数组里头。然后，我们就像在超市排队结账一样，用一个队列来装那些等待被处理的节点。每当轮到一个节点时，我们就把它从队列里拽出来，塞进层级结构数组这个大篮子里，并且仔仔细细地处理它所有的“孩子”——也就是子节点。最后一步，咱们就像玩接龙游戏一样，把已经处理过的节点从队列里拿出来，然后美滋滋地接着处理下一个排着队的节点，就这么一直玩下去，直到队列里一个节点都不剩，就表示大功告成了！总结来说，无论是使用递归还是非递归，都可以有效地处理无限极分类。但是，不同的方法适用于不同的场景，我们需要根据实际情况选择合适的方法。

2023-08-24 16:14:06

星河万里_t

转载文章

[转载]Java爬虫学习一一Jsoup爬取彼岸桌面分类下的图片

...需要获取总页数在依次遍历拼接就可以了，现在的问题是如何获取总页数，我一开始的想法是获取分页中“共167页”这个标签后再只保留数字就可以个，但发现运行后获取不到该元素节点，经过排查了解到这个标签是通过js生成的，于是我转换了思路，通过获取最后一个页号来得到一共分了多少页 Document root_doc = Jsoup.connect("http://www.netbian.com/" + kind + "/").get();Elements els = root_doc.select("main .page a");//这里els.eq(els.size() - 2的原因是后边确定按钮用的是a标签要去掉，再去掉一个“下一页”标签Integer page = Integer.parseInt(els.eq(els.size() - 2).text()); 分类页中图片所在的标签结构为：分类页面下的图片不是我们想要的，我们想要的是点击进去详细页的高清大图，所以需要获取a标签的链接，再从这个链接中获取真正想要的图片。详细页中图片所在的标签结构为：二、代码实现到这里分类页分析的差不多了，我们通过代码来进行获取图片。首先导入Jsoup的jar包：jsoup-1.12.1.jar，如果采用Maven请导入下边的依赖。 <dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.12.1</version></dependency> 在utils创建JsoupPic类，并添加getPic方法，代码如下： public static void getPic(String kind) throws Exception {//get请求方式进行请求Document root_doc = Jsoup.connect("http://www.netbian.com/" + kind + "/").get();//获取分页标签，用于获取总页数Elements els = root_doc.select("main .page a");Integer page = Integer.parseInt(els.eq(els.size() - 2).text());for (int i = 1; i < page; i++) {Document document = null;//这里判断的是当前页号是否为1，如果为1就不拼页号，否则拼上对应的页号if (i == 1) {document = Jsoup.connect("http://www.netbian.com/" + kind + "/index.htm").get();} else {document = Jsoup.connect("http://www.netbian.com/" + kind + "/index_" + i + ".htm").get();}//获取每个分页链接里面a标签的链接，进入链接页面获取当前图拼的大尺寸图片Elements elements = document.select("main .list li a");for (Element element : elements) {String href = element.attr("href");String picUrl = "http://www.netbian.com" + href;Document document1 = Jsoup.connect(picUrl).get();Elements elements1 = document1.select(".endpage .pic p a img");//获取所有图片的链接System.out.println(elements1);} }} 在分类页中有一个隐藏的问题图片：正常的图片链接都是以“/”开头，以“.htm”结尾，而每个分类下的第三张图片的链接都是“http://pic.netbian.com/”，如果不过滤的话会报如下错误：所以这里必须要判断一下: Elements elements = document.select("main .list li a");for (Element element : elements) {String href = element.attr("href");//判断是否是以“/”开头if (href.startsWith("/")) {String picUrl = "http://www.netbian.com" + href;Document document1 = Jsoup.connect(picUrl).get();Elements elements1 = document1.select(".endpage .pic p a img");System.out.println(elements1);} } 到这里，页面就已经分析好了，问题基本上已经解决了，接下来我们需要将图片存到我们的系统里，这里我将图片保存到我的电脑桌面上，并按照分类来存储图片。首先是要获取桌面路径，在utils包下创建Download类，添加getDesktop方法，代码如下： public static File getDesktop(){FileSystemView fsv = FileSystemView.getFileSystemView();File path=fsv.getHomeDirectory(); return path;} 接着我们再该类中添加下载图片的方法： //urlPath为网络图片的路径，savePath为要保存的本地路径（这里指定为桌面下的images文件夹）public static void download(String urlPath,String savePath) throws Exception {// 构造URLURL url = new URL(urlPath);// 打开连接URLConnection con = url.openConnection();//设置请求超时为5scon.setConnectTimeout(51000);// 输入流InputStream is = con.getInputStream();// 1K的数据缓冲byte[] bs = new byte[1024];// 读取到的数据长度int len;// 输出的文件流File sf=new File(savePath);int randomNo=(int)(Math.random()1000000);String filename=urlPath.substring(urlPath.lastIndexOf("/")+1,urlPath.length());//获取服务器上图片的名称filename=new java.text.SimpleDateFormat("yyyy-MM-dd-HH-mm-ss").format(new Date())+randomNo+filename;//时间+随机数防止重复OutputStream os = new FileOutputStream(sf.getPath()+"\\"+filename);// 开始读取while ((len = is.read(bs)) != -1) {os.write(bs, 0, len);}// 完毕，关闭所有链接os.close();is.close();} 写好后，我们再完善一下JsouPic中的getPic方法。 public static void getPic(String kind) throws Exception {//get请求方式进行请求Document root_doc = Jsoup.connect("http://www.netbian.com/" + kind + "/").get();//获取分页标签，用于获取总页数Elements els = root_doc.select("main .page a");Integer page = Integer.parseInt(els.eq(els.size() - 2).text());for (int i = 1; i < page; i++) {Document document = null;//这里判断的是当前页号是否为1，如果为1就不拼页号，否则拼上对应的页号if (i == 1) {document = Jsoup.connect("http://www.netbian.com/" + kind + "/index.htm").get();} else {document = Jsoup.connect("http://www.netbian.com/" + kind + "/index_" + i + ".htm").get();}File desktop = Download.getDesktop();Download.checkPath(desktop.getPath() + "\\images\\" + kind);//获取每个分页链接里面a标签的链接，进入链接页面获取当前图拼的大尺寸图片Elements elements = document.select("main .list li a");for (Element element : elements) {String href = element.attr("href");if (href.startsWith("/")) {String picUrl = "http://www.netbian.com" + href;Document document1 = Jsoup.connect(picUrl).get();Elements elements1 = document1.select(".endpage .pic p a img");Download.download(elements1.attr("src"), desktop.getPath() + "\\images\\" + kind);} }} } 在Download类中，我添加了checkPath方法，用于判断目录是否存在，不存在就创建一个。 public static void checkPath(String savePath) throws Exception {File file = new File(savePath);if (!file.exists()){file.mkdirs();} } 最后在mainapp包内创建PullPic类，并添加主方法。 package com.asahi.mainapp;import com.asahi.common.Kind;import com.asahi.common.PrintLog;import com.asahi.utils.JsoupPic;import java.util.Scanner;public class PullPic {public static void main(String[] args) throws Exception {new PullPic().downloadPic();}public void downloadPic() throws Exception {System.out.println("启动程序>>\n请输入所爬取的分类：");Scanner scanner = new Scanner(System.in);String kind = scanner.next();while(!Kind.contains(kind)){System.out.println("分类不存在，请重新输入：");kind = scanner.next();}System.out.println("分类输入正确！");System.out.println("开始下载>>");JsoupPic.getPic(kind);} } 三、成果展示最终的运行结果如下：最终的代码已上传到我的github中，点击“我的github”进行查看。在学习Java爬虫的过程中，我收获了很多，一开始做的时候确实遇到了很多困难，这次写的获取图片也是最基础的，还可以继续深入。本来我想写一个通过多线程来获取图片来着，也尝试着去写了一下，越写越跑偏，暂时先放着不处理吧，等以后有时间再来弄，我想问题应该不大，只是考虑的东西有很多。希望大家多多指点不足，有哪些需要改进的地方，我也好多学习学习๑乛◡乛๑。本篇文章为转载内容。原文链接：https://blog.csdn.net/qq_39693281/article/details/108463868。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-06-12 10:26:04

130

转载

转载文章

[转载]消消乐测试

...; //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象}function refresh(){ //重绘画板，每次鼠标点击后刷新for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.backgroundImage = "url(./pic/" + squareSet[i][j].num + ".png)"squareSet[i][j].style.left = squareSet[i][j].col squareWidth + "px"; // 别忘了加"px"squareSet[i][j].style.bottom = squareSet[i][j].row squareWidth + "px";} }}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面for(var i = 0 ; i < boardWidth; i ++){squareSet[i] = new Array(); //二维数组的创建，对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() 5) , i , j);squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上} }refresh(); //每次页面内容发生变化需要重绘页面}window.onload = function(){init();} // window.onload 保证了在页面全部加载完毕后再执行JS代码效果第二阶段：鼠标选中后，闪烁只有JavaScript需要修改 var table; //游戏桌面var squareWidth = 50; //方块宽高var boardWidth = 10; //行列数var squareSet = []; //方块信息集合（二维数组）每个元素保存该方块的全部信息var baseScore = 5; //第一块的分数var stepScore = 10; //每多一块的累加分数var totalScore = 0; //当前总分var targetScore = 1500; //目标分var choose = []; //选中的连通小方块var timer = null; //闪烁定时器var flag = true; //锁，防止点击事件中响应其他点击或移入时间var tempSquare = null; //临时方块function refresh(){for (var i = 0; i < squareSet.length; i++) {for (var j = 0; j < squareSet[i].length; j++) {squareSet[i][j].style.background="url(pic/"+squareSet[i][j].num+".png)"squareSet[i][j].style.left=squareSet[i][j].colsquareWidth+"px";squareSet[i][j].style.bottom=squareSet[i][j].rowsquareWidth+"px";} }}function createSquare(value,row,col){ //创建小方块，传入参数为颜色、行、列，初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";} }}function checkLinked(square , arr){ // 递归连通图算法arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中，避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 1 &&squareSet[square.row][square.col + 1].num == square.num &&arr.indexOf(squareSet[square.row][square.col + 1]) == -1) {checkLinked(squareSet[square.row][square.col + 1] , arr);}// check upif( square.row < boardWidth - 1 &&squareSet[square.row + 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row + 1][square.col]) == -1) {checkLinked(squareSet[square.row + 1][square.col] , arr);}// check downif( square.row > 0 &&squareSet[square.row - 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row - 1][square.col]) == -1) {checkLinked(squareSet[square.row - 1][square.col] , arr);} }function flicker(arr){ // 选中连通的小方块可以闪烁var num = 0;timer = setInterval(function(){for(var i = 0 ; i < arr.length ; i ++){arr[i].style.border = "3px solid BFEFFF";//有个框arr[i].style.transform = "scale(" + (0.9 + (0.05 Math.pow(-1 , num))) + ")";//一闪一闪}num ++; // 注意这里所采用的数学技巧，仍然使用transform:scale(val)来进行缩放。},300);//闪烁的时间}function mouseOver(obj){ //鼠标移入区域响应// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);// 闪烁flicker(choose);// 显示分数selectScore();}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建，对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上} }refresh(); //每次页面内容发生变化需要重绘页面}window.onload = function(){init();} // window.onload 保证了在页面全部加载完毕后再执行JS代码效果2.1 加入这段代码，便会计算闪烁方块得分 function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);} 完整代码为： var table; //游戏桌面var squareWidth = 50; //方块宽高var boardWidth = 10; //行列数var squareSet = []; //方块信息集合（二维数组）每个元素保存该方块的全部信息var baseScore = 5; //第一块的分数var stepScore = 10; //每多一块的累加分数var totalScore = 0; //当前总分var targetScore = 1500; //目标分var choose = []; //选中的连通小方块var timer = null; //闪烁定时器var flag = true; //锁，防止点击事件中响应其他点击或移入时间var tempSquare = null; //临时方块function refresh(){for (var i = 0; i < squareSet.length; i++) {for (var j = 0; j < squareSet[i].length; j++) {squareSet[i][j].style.background="url(pic/"+squareSet[i][j].num+".png)"squareSet[i][j].style.left=squareSet[i][j].colsquareWidth+"px";squareSet[i][j].style.bottom=squareSet[i][j].rowsquareWidth+"px";} }}function createSquare(value,row,col){ //创建小方块，传入参数为颜色、行、列，初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";} }}function checkLinked(square , arr){ // 递归连通图算法arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中，避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 1 &&squareSet[square.row][square.col + 1].num == square.num &&arr.indexOf(squareSet[square.row][square.col + 1]) == -1) {checkLinked(squareSet[square.row][square.col + 1] , arr);}// check upif( square.row < boardWidth - 1 &&squareSet[square.row + 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row + 1][square.col]) == -1) {checkLinked(squareSet[square.row + 1][square.col] , arr);}// check downif( square.row > 0 &&squareSet[square.row - 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row - 1][square.col]) == -1) {checkLinked(squareSet[square.row - 1][square.col] , arr);} }function flicker(arr){ // 选中连通的小方块可以闪烁var num = 0;timer = setInterval(function(){for(var i = 0 ; i < arr.length ; i ++){arr[i].style.border = "3px solid BFEFFF";//有个框arr[i].style.transform = "scale(" + (0.9 + (0.05 Math.pow(-1 , num))) + ")";//一闪一闪}num ++; // 注意这里所采用的数学技巧，仍然使用transform:scale(val)来进行缩放。},300);//闪烁的时间}function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);}function mouseOver(obj){ //鼠标移入区域响应// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);// 闪烁flicker(choose);// 显示分数selectScore();}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建，对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上} }refresh(); //每次页面内容发生变化需要重绘页面}window.onload = function(){init();} // window.onload 保证了在页面全部加载完毕后再执行JS代码效果2.2 第三阶段：消灭星星（只消灭一次）只消除选中的星星，但是不会掉下来。在function init(){}里面添加以下代码： // 鼠标点击事件square.onclick = function(){//为移除增加一个延迟动画，为了防止闭包，这里采用立即执行函数for(var i = 0 ; i < choose.length ; i ++){(function(i){setTimeout(function(){squareSet[choose[i].row][choose[i].col] = null; //为状态数组置空table.removeChild(choose[i]); //将其从桌面上移除} , i 100);})(i);} } 效果使得星星移动（原作者这里出现错误） function move(){//纵向下落，采用快慢指针算法for(var i = 0 ; i < boardWidth ; i ++){var pointer = 0; //慢指针for(var j = 0 ; j < boardWidth ; j ++){if(squareSet[j][i] != null){ //按行遍历if(pointer != j){ //快慢指针不同步说明中间有空元素squareSet[pointer][i] = squareSet[j][i]; //慢指针设成快指针元素squareSet[j][i].row = pointer;squareSet[j][i] = null; //快指针处置空}pointer ++; //该行非空时慢指针增加} }} 完整代码如下： var table; //游戏桌面var squareWidth = 50; //方块宽高var boardWidth = 10; //行列数var squareSet = []; //方块信息集合（二维数组）每个元素保存该方块的全部信息var baseScore = 5; //第一块的分数var stepScore = 10; //每多一块的累加分数var totalScore = 0; //当前总分var targetScore = 1500; //目标分var choose = []; //选中的连通小方块var timer = null; //闪烁定时器var flag = true; //锁，防止点击事件中响应其他点击或移入时间var tempSquare = null; //临时方块function refresh(){for (var i = 0; i < squareSet.length; i++) {for (var j = 0; j < squareSet[i].length; j++) {squareSet[i][j].style.background="url(pic/"+squareSet[i][j].num+".png)"squareSet[i][j].style.left=squareSet[i][j].colsquareWidth+"px";squareSet[i][j].style.bottom=squareSet[i][j].rowsquareWidth+"px";} }}function createSquare(value,row,col){ //创建小方块，传入参数为颜色、行、列，初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";} }}function checkLinked(square , arr){ // 递归连通图算法arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中，避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 1 &&squareSet[square.row][square.col + 1].num == square.num &&arr.indexOf(squareSet[square.row][square.col + 1]) == -1) {checkLinked(squareSet[square.row][square.col + 1] , arr);}// check upif( square.row < boardWidth - 1 &&squareSet[square.row + 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row + 1][square.col]) == -1) {checkLinked(squareSet[square.row + 1][square.col] , arr);}// check downif( square.row > 0 &&squareSet[square.row - 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row - 1][square.col]) == -1) {checkLinked(squareSet[square.row - 1][square.col] , arr);} }function flicker(arr){ // 选中连通的小方块可以闪烁var num = 0;timer = setInterval(function(){for(var i = 0 ; i < arr.length ; i ++){arr[i].style.border = "3px solid BFEFFF";//有个框arr[i].style.transform = "scale(" + (0.9 + (0.05 Math.pow(-1 , num))) + ")";//一闪一闪}num ++; // 注意这里所采用的数学技巧，仍然使用transform:scale(val)来进行缩放。},300);//闪烁的时间}function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);}function mouseOver(obj){ //鼠标移入区域响应// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);// 闪烁flicker(choose);// 显示分数selectScore();}function move(){//纵向下落，采用快慢指针算法for(var i = 0 ; i < boardWidth ; i ++){var pointer = 0; //慢指针for(var j = 0 ; j < boardWidth ; j ++){if(squareSet[j][i] != null){ //按行遍历if(pointer != j){ //快慢指针不同步说明中间有空元素squareSet[pointer][i] = squareSet[j][i]; //慢指针设成快指针元素squareSet[j][i].row = pointer;squareSet[j][i] = null; //快指针处置空}pointer ++; //该行非空时慢指针增加} }}// 横向移动（当出现一列为空时）for(var i = 0 ; i < squareSet[0].length ;){ //必须注意循环结束条件的判断if(squareSet[0][i] == null){ //逻辑：只需判断最低层为空，该行则全为空for(var j = 0 ; j < boardWidth ; j ++){squareSet[j].splice(i , 1); //splice删除数组squareSet[j]中从i开始的1个元素}continue;//注意移动后i不应改变了}i ++;}refresh();}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建，对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}// 鼠标点击事件square.onclick = function(){//对锁进行控制if(!flag || choose.length == null){return;}flag = false;tempSquare = null;//更新分数var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}totalScore += score;document.getElementById('nowScore').innerHTML = "Current Score : " + totalScore;//为移除增加一个延迟动画，为了防止闭包，这里采用立即执行函数for(var i = 0 ; i < choose.length ; i ++){(function(i){setTimeout(function(){squareSet[choose[i].row][choose[i].col] = null; //为状态数组置空table.removeChild(choose[i]); //将其从桌面上移除} , i 100);})(i);}//需要等星星消除完毕后再移动，故需增加一个延迟setTimeout(function(){move(); //调用移动函数},choose.length 100);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上} }refresh(); //每次页面内容发生变化需要重绘页面}window.onload = function(){init();} // window.onload 保证了在页面全部加载完毕后再执行JS代码效果（下降成功，但是有点小bug只有部分下降了）解决方案：只需要在function refresh(){}的双循环里面增加以下代码： if(squareSet[i][j] == null) continue; 完整代码如下： var table; //游戏桌面var squareWidth = 50; //方块宽高var boardWidth = 10; //行列数var squareSet = []; //方块信息集合（二维数组）每个元素保存该方块的全部信息var baseScore = 5; //第一块的分数var stepScore = 10; //每多一块的累加分数var totalScore = 0; //当前总分var targetScore = 1500; //目标分var choose = []; //选中的连通小方块var timer = null; //闪烁定时器var flag = true; //锁，防止点击事件中响应其他点击或移入时间var tempSquare = null; //临时方块function refresh(){for (var i = 0; i < squareSet.length; i++) {for (var j = 0; j < squareSet[i].length; j++) {if(squareSet[i][j] == null) continue; // 点击后数组中可能有空值需要跳过squareSet[i][j].style.background="url(pic/"+squareSet[i][j].num+".png)"squareSet[i][j].style.left=squareSet[i][j].colsquareWidth+"px";squareSet[i][j].style.bottom=squareSet[i][j].rowsquareWidth+"px";} }}function createSquare(value,row,col){ //创建小方块，传入参数为颜色、行、列，初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";} }}function checkLinked(square , arr){ // 递归连通图算法arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中，避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 1 &&squareSet[square.row][square.col + 1].num == square.num &&arr.indexOf(squareSet[square.row][square.col + 1]) == -1) {checkLinked(squareSet[square.row][square.col + 1] , arr);}// check upif( square.row < boardWidth - 1 &&squareSet[square.row + 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row + 1][square.col]) == -1) {checkLinked(squareSet[square.row + 1][square.col] , arr);}// check downif( square.row > 0 &&squareSet[square.row - 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row - 1][square.col]) == -1) {checkLinked(squareSet[square.row - 1][square.col] , arr);} }function flicker(arr){ // 选中连通的小方块可以闪烁var num = 0;timer = setInterval(function(){for(var i = 0 ; i < arr.length ; i ++){arr[i].style.border = "3px solid BFEFFF";//有个框arr[i].style.transform = "scale(" + (0.9 + (0.05 Math.pow(-1 , num))) + ")";//一闪一闪}num ++; // 注意这里所采用的数学技巧，仍然使用transform:scale(val)来进行缩放。},300);//闪烁的时间}function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);}function mouseOver(obj){ //鼠标移入区域响应// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);// 闪烁flicker(choose);// 显示分数selectScore();}function move(){//纵向下落，采用快慢指针算法for(var i = 0 ; i < boardWidth ; i ++){var pointer = 0; //慢指针for(var j = 0 ; j < boardWidth ; j ++){if(squareSet[j][i] != null){ //按行遍历if(pointer != j){ //快慢指针不同步说明中间有空元素squareSet[pointer][i] = squareSet[j][i]; //慢指针设成快指针元素squareSet[j][i].row = pointer;squareSet[j][i] = null; //快指针处置空}pointer ++; //该行非空时慢指针增加} }}// 横向移动（当出现一列为空时）for(var i = 0 ; i < squareSet[0].length ;){ //必须注意循环结束条件的判断if(squareSet[0][i] == null){ //逻辑：只需判断最低层为空，该行则全为空for(var j = 0 ; j < boardWidth ; j ++){squareSet[j].splice(i , 1); //splice删除数组squareSet[j]中从i开始的1个元素}continue;//注意移动后i不应改变了}i ++;}refresh();}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建，对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}// 鼠标点击事件square.onclick = function(){//对锁进行控制if(!flag || choose.length == null){return;}flag = false;tempSquare = null;//更新分数var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}totalScore += score;document.getElementById('nowScore').innerHTML = "Current Score : " + totalScore;//为移除增加一个延迟动画，为了防止闭包，这里采用立即执行函数for(var i = 0 ; i < choose.length ; i ++){(function(i){setTimeout(function(){squareSet[choose[i].row][choose[i].col] = null; //为状态数组置空table.removeChild(choose[i]); //将其从桌面上移除} , i 100);})(i);}//需要等星星消除完毕后再移动，故需增加一个延迟setTimeout(function(){move(); //调用移动函数},choose.length 100);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上} }refresh(); //每次页面内容发生变化需要重绘页面}window.onload = function(){init();} // window.onload 保证了在页面全部加载完毕后再执行JS代码第四阶段：消灭全部星星，返回结果最终完整版代码如下： var table; //游戏桌面var squareWidth = 50; //方块宽高var boardWidth = 10; //行列数var squareSet = []; //方块信息集合（二维数组）每个元素保存该方块的全部信息var baseScore = 5; //第一块的分数var stepScore = 10; //每多一块的累加分数var totalScore = 0; //当前总分var targetScore = 1500; //目标分var choose = []; //选中的连通小方块var timer = null; //闪烁定时器var flag = true; //锁，防止点击事件中响应其他点击或移入时间var tempSquare = null; //临时方块function refresh(){ //重绘画板，每次鼠标点击后刷新for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){if(squareSet[i][j] == null) continue; // 点击后数组中可能有空值需要跳过squareSet[i][j].row = i; //更新当前的行列数squareSet[i][j].col = j;squareSet[i][j].style.backgroundImage = "url(./pic/" + squareSet[i][j].num + ".png)"squareSet[i][j].style.backgroundSize = "cover"; //占满范围squareSet[i][j].style.transform = "scale(0.95)"; //美观效果让不同星星之间留出空隙（缩小至0.95倍大小）squareSet[i][j].style.left = squareSet[i][j].col squareWidth + "px"; // 别忘了加"px"squareSet[i][j].style.bottom = squareSet[i][j].row squareWidth + "px";squareSet[i][j].style.transition = "left 0.3s, bottom 0.3s";} }}function createSquare(value,row,col){ //创建小方块，传入参数为颜色、行、列，初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.display = "inline-block"; //需要让对象元素能排列一排temp.style.position = "absolute"; //相对于背景绝对定位temp.style.boxSizing = "border-box"; //重要：不会使增加的边框溢出覆盖到旁边的元素temp.style.borderRadius = "12px";temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){if(squareSet[i][j] == null) continue;squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";} }}function checkLinked(square , arr){ // 递归连通图算法if(square == null) return; // 递归边界arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1] && //左侧有块squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中，避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 1 &&squareSet[square.row][square.col + 1] &&squareSet[square.row][square.col + 1].num == square.num &&arr.indexOf(squareSet[square.row][square.col + 1]) == -1) {checkLinked(squareSet[square.row][square.col + 1] , arr);}// check upif( square.row < boardWidth - 1 &&squareSet[square.row + 1][square.col] &&squareSet[square.row + 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row + 1][square.col]) == -1) {checkLinked(squareSet[square.row + 1][square.col] , arr);}// check downif( square.row > 0 &&squareSet[square.row - 1][square.col] &&squareSet[square.row - 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row - 1][square.col]) == -1) {checkLinked(squareSet[square.row - 1][square.col] , arr);} }function flicker(arr){ // 选中连通的小方块可以闪烁var num = 0;timer = setInterval(function(){for(var i = 0 ; i < arr.length ; i ++){arr[i].style.border = "3px solid BFEFFF";arr[i].style.transform = "scale(" + (0.9 + (0.05 Math.pow(-1 , num))) + ")";}num ++; // 注意这里所采用的数学技巧，仍然使用transform:scale(val)来进行缩放。},300);}function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}if(score == 0) return;document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;document.getElementById('selectScore').style.transition = null;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);}function mouseOver(obj){ //鼠标移入区域响应// 加锁，点击事件过程中不允许其他点击事件与移入事件if(!flag){tempSquare = obj;return;}// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);if(choose.length <= 1){choose = [];return;}// 闪烁flicker(choose);// 显示分数selectScore();}function move(){ //下落移动控制//纵向下落，采用快慢指针算法for(var i = 0 ; i < boardWidth ; i ++){var pointer = 0; //慢指针for(var j = 0 ; j < boardWidth ; j ++){if(squareSet[j][i] != null){ //按行遍历if(pointer != j){ //快慢指针不同步说明中间有空元素squareSet[pointer][i] = squareSet[j][i]; //慢指针设成快指针元素squareSet[j][i].row = pointer;squareSet[j][i] = null; //快指针处置空}pointer ++; //该行非空时慢指针增加} }}// 横向移动（当出现一列为空时）for(var i = 0 ; i < squareSet[0].length ;){ // 注意循环终止条件的判断！！！因为数组长度会更新if(squareSet[0][i] == null){ //逻辑：只需判断最低层为空，该行则全为空for(var j = 0 ; j < boardWidth ; j ++){squareSet[j].splice(i , 1); //splice删除数组squareSet[j]中从i开始的1个元素}continue;//注意移动后i不应改变了}i ++;}refresh();}function isFinish(){ //判断游戏结束flag = true; //重要：需要先解锁，保证后续鼠标事件可以被响应for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){if(squareSet[i][j] == null) continue; //遍历每一元素判断连通var temp = [];checkLinked(squareSet[i][j] , temp);if(temp.length > 1) return false; //若有某一元素仍有多块连通，则游戏未结束} }return flag;}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建，对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}// 鼠标点击事件square.onclick = function(){//对锁进行控制if(!flag || choose.length == null){return;}flag = false;tempSquare = null;//更新分数var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}totalScore += score;document.getElementById('nowScore').innerHTML = "Current Score : " + totalScore;//为移除增加一个延迟动画，为了防止闭包，这里采用立即执行函数for(var i = 0 ; i < choose.length ; i ++){(function(i){setTimeout(function(){squareSet[choose[i].row][choose[i].col] = null; //为状态数组置空table.removeChild(choose[i]); //将其从桌面上移除} , i 50);})(i);}//需要等星星消除完毕后再移动，故需增加一个延迟setTimeout(function(){move(); //调用移动函数setTimeout(function(){var judge = isFinish();if(judge){ //游戏达到结束条件if(totalScore > targetScore){alert('Congratulations! You win!');}else{alert('Mission Failed!');} }else{flag = true;choose = [];mouseOver(tempSquare); //处理可能存在的冲突} },300 + choose.length 75); //需要一个判断延迟},choose.length 50);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上} }refresh(); //每次页面内容发生变化需要重绘页面}window.onload = function(){init();} // window.onload 保证了在页面全部加载完毕后再执行JS代码效果本篇文章为转载内容。原文链接：https://blog.csdn.net/weixin_56471396/article/details/128681321。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-06-08 15:26:34

516

转载

ReactJS

使用React Fragment时遇到的样式问题、调试困难与性能问题分析

...ragment不会在DOM中生成额外的节点，有时候我们的样式可能会受到影响。比如说，你有个CSS选择器，专门用来给某个父元素底下的子元素加样式。但万一这个子元素被塞进了Fragment里，那你可能就得重新想想你的CSS选择了。 3.2 解决方案 3.2.1 使用CSS类名最简单的解决方案是给Fragment中的元素添加一个唯一的类名，然后通过类名来应用样式。 jsx function MyComponent() { return ( <> 这是第一个元素这是第二个元素 ); } 3.2.2 使用内联样式当然，如果你不喜欢使用外部CSS文件，也可以直接在JSX中使用内联样式。 jsx function MyComponent() { return ( <> 这是第一个元素这是第二个元素 ); } 四、遇到的第二个问题调试困难 4.1 问题描述另一个常见的问题是调试困难。因为Fragment在DOM里是没有单独的节点的，所以在浏览器开发者工具里想找某个特定的元素可能会有点难，就像大海捞针一样。这对于初学者来说尤其令人头疼。 4.2 解决方案 4.2.1 使用开发者工具虽然Fragment本身没有DOM节点，但你可以通过查看其父元素的子元素列表来间接找到它。现代浏览器的开发者工具通常会提供这样的功能。 4.2.2 打印日志在开发过程中，打印日志也是一个非常有用的技巧。你可以试试用console.log把组件的状态或属性打印出来，这样能更清楚地看到它是怎么工作的。 jsx function MyComponent() { console.log('MyComponent rendered'); return ( <> 这是第一个元素这是第二个元素 ); } 五、遇到的第三个问题性能问题 5.1 问题描述虽然Fragment的主要目的是为了简化代码结构，并不会引入额外的DOM节点，但在某些情况下，如果过度使用，也可能会影响性能。尤其是当Fragment里塞满了各种子元素时，React就得对付一大堆虚拟DOM节点，这样一来，渲染的速度可就受影响了。 5.2 解决方案 5.2.1 合理使用Fragment 尽量只在必要时使用Fragment，避免不必要的嵌套。比如，当你只需要包裹两三个小东西时，用Fragment还挺合适的；但要是东西多了，你可能就得想想，真的有必要用Fragment吗？ 5.2.2 使用React.memo或PureComponent 对于那些渲染频率较高且状态变化不频繁的组件，可以考虑使用React.memo或PureComponent来优化性能。这样可以减少不必要的重新渲染。 jsx const MyComponent = React.memo(({ children }) => ( <> {children} )); 六、遇到的第四个问题可读性问题 6.1 问题描述最后，还有一种不太明显但同样重要的问题，那就是代码的可读性。虽然Fragment能帮我们更好地整理代码，让结构更清晰，但要是用得太多或者不恰当，反而会让代码变得更乱，读起来费劲，维护起来也头疼。 6.2 解决方案 6.2.1 保持简洁尽量保持每个Fragment内部的逻辑简单明了。要是某个Fragment里头塞了太多东西或者逻辑太复杂，那最好还是把它拆成几个小块儿，这样会好管理一些。 6.2.2 使用有意义的名字给Fragment起一个有意义的名字，可以让其他开发者更容易理解这个Fragment的作用。例如，你可以根据它的用途来命名，如。 jsx function UserList() { return ( <> 用户列表用户1 用户2 ); } 七、总结总的来说，虽然使用Fragment可以极大地提升代码的可读性和可维护性，但在实际开发过程中也需要注意避免一些潜在的问题。希望能帮到你，在以后的项目里更好地用上Fragment，还能避开那些常见的坑。如果有任何疑问或者更好的建议，欢迎随时交流讨论！ --- 以上就是关于“使用Fragment时遇到问题”的全部内容，希望对你有所帮助。如果你觉得这篇文章对你有启发，不妨分享给更多的人看到，我们一起进步！

2024-12-06 16:01:42

月下独酌

知识学习

实践的时候请根据实际情况谨慎操作。

随机学习一条linux命令：

traceroute host - 显示数据包到目标主机经过的路由路径。