等。
属性节点（Attribute Node）： 代表HTML元素的属性，例如 id、class、href 等。
文本节点（Text Node）： 代表HTML元素中的文本内容。
DOCTYPE html>
<html>
<head>
<title>DOM讲解title>
head>
<body>
<h1>欢迎h1>
<p id="my-paragraph">这是一个段落。p>
body>
html>
以上HTML在DOM中会被表示成类似这样的树状结构：
文档节点 (Document)
└── 元素节点
├── 元素节点
│ └── 元素节点
│ └── 文本节点 ("DOM讲解")
└── <body> 元素节点
├── <h1> 元素节点
│ └── 文本节点 ("欢迎")
└── <p> 元素节点 (id="my-paragraph")
└── 文本节点 ("这是一个段落。")
</code></pre>
<h3>2、DOM有什么用?</h3>
<p>DOM的主要作用是允许JavaScript动态地访问和修改网页的内容、结构和样式。通过DOM，你可以：</p>
<ul>
<li><strong>访问HTML元素</strong>： 通过ID、类名、标签名等方式获取页面上的元素。例如，使用document.getElementById(“my-paragraph”)可以获取上面例子中的<p>元素。</li>
<li><strong>修改HTML内容</strong>： 改变元素的文本内容、HTML结构等。例如，使用element.innerHTML = "新的内容"可以改变元素的内部HTML。</li>
<li>修改HTML样式： 改变元素的CSS样式。例如，使用element.style.color = "red"可以将元素的文本颜色改为红色。</li>
<li><strong>添加或删除HTML元素</strong>： 动态地向页面添加或删除元素。</li>
<li><strong>响应事件</strong>： 监听用户的操作（例如点击、鼠标悬停等），并执行相应的JavaScript代码。</li>
</ul>
<h2>二、虚拟DOM</h2>
<h3>1、虚拟DOM 的基本概念</h3>
<p>虚拟DOM（virtual DOM）其实就是一个用原生<strong>JavaScript对象来描述DOM节点</strong>的概念。简单来说，它是对真实DOM的一层抽象。通过一系列操作，这棵虚拟DOM树最终可以映射到真实环境中。虚拟DOM就像是在JavaScript和DOM之间建立了一个缓存，利用patch（diff算法）来对比新旧虚拟DOM，记录变化，然后按需更新，最终创建真实的DOM。</p>
<p>在React、Vue等技术出现之前，要改变页面展示的内容只能通过遍历查询DOM树的方式找到需要修改的DOM，然后修改样式、行为或结构来更新UI。这种方式非常消耗计算资源，因为每次查询DOM几乎都需要遍历整颗DOM树。</p>
<p>而虚拟DOM的出现，改变了这一切。如果建立一个与DOM树对应的虚拟DOM对象（JavaScript对象），以对象嵌套的方式来表示DOM树及其层级结构，那么每次DOM的更改就变成了对JavaScript对象的属性的增删改查。这样一来，查找JavaScript对象的属性变化要比查询DOM树的性能开销小得多。</p>
<p>总的来说，虚拟DOM是现代前端开发中不可或缺的一部分，它通过优化DOM操作，大大提高了网页的渲染性能和用户体验。</p>
<h3>2、虚拟 DOM 的工作原理</h3>
<p>虚拟 DOM 的基本思想是：通过将 UI 描述成一个 JavaScript 对象（虚拟 DOM 树），我们可以在内存中进行 DOM 操作，而不是直接操作真实的 DOM。这样可以极大地减少直接 DOM 操作所带来的性能开销。</p>
<p>虚拟 DOM 的工作流程通常分为以下几个步骤：</p>
<ul>
<li><strong>首次渲染</strong>：<br> 当应用首次加载时，框架会根据组件的模板（例如 React 的 JSX 或 Vue 的模板语法）生成虚拟 DOM 树。这棵树是用 JavaScript 对象表示的，里面包含了所有 DOM 元素及其属性。</li>
<li><strong>数据更新</strong>：<br> 当组件的状态或数据发生变化时，框架会重新生成一颗新的虚拟 DOM 树，表示最新的 UI 状态。</li>
<li><strong>Diff 算法对比</strong>：<br> 框架会对比新旧虚拟 DOM 树的差异，这个过程被称为 “Diff”。Diff 算法通过对比新旧树的差异，找出最小的更新路径。</li>
<li><strong>更新真实 DOM</strong>：<br> 根据 Diff 算法的对比结果，框架只会更新需要改变的部分，避免了对整个 DOM 树的重绘。这样可以最小化对真实 DOM 的操作，提升性能。</li>
</ul>
<h2>三、documentFragment</h2>
<p>DocumentFragment是一个虚拟的<strong>DOM节点容器</strong>，它可以存储多个DOM元素，但这些元素不会直接在页面中渲染显示。换句话说，DocumentFragment是存在于内存中的，并不属于主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段会被其所有的子元素所代替。</p>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1882982908524818432"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js"></script>
<!-- 文章页-底部 动态广告位 -->
<div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
</div>
<div class="col-md-3">
<div class="row" id="ad">
<!-- 文章页-右侧1 动态广告位 -->
<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_1"> </div>
</div>
<!-- 文章页-右侧2 动态广告位 -->
<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_2"></div>
</div>
<!-- 文章页-右侧3 动态广告位 -->
<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(web补充,javascript,前端,开发语言)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1943992776169418752.htm"
title="Flask框架入门：快速搭建轻量级Python网页应用" target="_blank">Flask框架入门：快速搭建轻量级Python网页应用</a>
<span class="text-muted">「已注销」</span>
<a class="tag" taget="_blank" href="/search/python-AI/1.htm">python-AI</a><a class="tag" taget="_blank" href="/search/python%E5%9F%BA%E7%A1%80/1.htm">python基础</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E7%BD%91%E7%BB%9C/1.htm">网站网络</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
<div>转载：Flask框架入门：快速搭建轻量级Python网页应用1.Flask基础Flask是一个使用Python编写的轻量级Web应用框架。它的设计目标是让Web开发变得快速简单，同时保持应用的灵活性。Flask依赖于两个外部库：Werkzeug和Jinja2，Werkzeug作为WSGI工具包处理Web服务的底层细节，Jinja2作为模板引擎渲染模板。安装Flask非常简单，可以使用pip安装命令</div>
</li>
<li><a href="/article/1943992018892025856.htm"
title="JSON 与 AJAX" target="_blank">JSON 与 AJAX</a>
<span class="text-muted">Auscy</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、JSON（JavaScriptObjectNotation）1.数据类型与语法细节支持的数据类型：基本类型：字符串（需用双引号）、数字、布尔值（true/false）、null。复杂类型：数组（[]）、对象（{}）。严格语法规范：键名必须用双引号包裹（如"name":"张三"）。数组元素用逗号分隔，最后一个元素后不能有多余逗号。数字不能以0开头（如012会被解析为12），不支持八进制/十六进制</div>
</li>
<li><a href="/article/1943991891796226048.htm"
title="Python Flask 框架入门：快速搭建 Web 应用的秘诀" target="_blank">Python Flask 框架入门：快速搭建 Web 应用的秘诀</a>
<span class="text-muted">Python编程之道</span>
<a class="tag" taget="_blank" href="/search/Python%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E4%B8%8E%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">Python人工智能与大数据</a><a class="tag" taget="_blank" href="/search/Python%E7%BC%96%E7%A8%8B%E4%B9%8B%E9%81%93/1.htm">Python编程之道</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>PythonFlask框架入门：快速搭建Web应用的秘诀关键词Flask、微框架、路由系统、Jinja2模板、请求处理、WSGI、Web开发摘要想快速用Python搭建一个灵活的Web应用？Flask作为“微框架”代表，凭借轻量、可扩展的特性，成为初学者和小型项目的首选。本文将从Flask的核心概念出发，结合生活化比喻、代码示例和实战案例，带你一步步掌握：如何用Flask搭建第一个Web应用？路由</div>
</li>
<li><a href="/article/1943990125864218624.htm"
title="JavaScript 树形菜单总结" target="_blank">JavaScript 树形菜单总结</a>
<span class="text-muted">Auscy</span>
<a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a>
<div>树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构：数据以父子嵌套形式存在，如{id:1,children:[{id:2}]}。节点：树形结构的基本单元，包含自身信息及子节点（若有）。展开/折叠：子节点的显示与隐藏切换，是树形菜单的核心交互。递归渲染：因数据层级不固定，</div>
</li>
<li><a href="/article/1943987856808669184.htm"
title="前端项目架构设计要领" target="_blank">前端项目架构设计要领</a>
<span class="text-muted"></span>
<div>1.架构设计的核心目标在设计前端项目架构时，核心目标是模块化、可维护、可扩展、可测试，以及开发效率的最大化。这些目标可以通过以下几个方面来实现：组件化：将UI功能封装为可复用的组件。模块化：将业务逻辑分解为独立的模块或服务。自动化构建与部署：实现自动化构建、测试和部署流程，减少人为操作的错误。代码规范化与检查：确保团队协作时，代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目</div>
</li>
<li><a href="/article/1943987101301272576.htm"
title="精通Canvas：15款时钟特效代码实现指南" target="_blank">精通Canvas：15款时钟特效代码实现指南</a>
<span class="text-muted">烟幕缭绕</span>
<div>本文还有配套的精品资源，点击获取简介：HTML5的Canvas是一个用于绘制矢量图形的API，通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码，帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念，深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定，而JS文件则包含实现各种特效的逻辑，通过不同的函数或类处理时间更新和动画绘制，提</div>
</li>
<li><a href="/article/1943979785097113600.htm"
title="【前端】jQuery数组合并去重方法总结" target="_blank">【前端】jQuery数组合并去重方法总结</a>
<span class="text-muted"></span>
<div>在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...</div>
</li>
<li><a href="/article/1943975880120397824.htm"
title="php SPOF" target="_blank">php SPOF</a>
<span class="text-muted">贵哥的编程之路(热爱分享 为后来者)</span>
<a class="tag" taget="_blank" href="/search/PHP%E8%AF%AD%E8%A8%80%E7%BB%8F%E5%85%B8%E7%A8%8B%E5%BA%8F100%E9%A2%98/1.htm">PHP语言经典程序100题</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>1.什么是单点故障（SPOF）？单点故障指的是系统中某个组件一旦失效，整个系统或服务就会不可用。常见的单点有：数据库、缓存、Web服务器、负载均衡、网络设备等。2.常见单点故障场景只有一台数据库服务器，宕机后所有业务不可用只有一台Redis缓存，挂掉后缓存全部失效只有一台Web服务器，挂掉后网站无法访问只有一个负载均衡节点，挂掉后流量无法分发只有一条网络链路，断开后所有服务失联3.消除单点故障的主</div>
</li>
<li><a href="/article/1943974618851241984.htm"
title="Vue3+Vite+TS+Axios整合详细教程" target="_blank">Vue3+Vite+TS+Axios整合详细教程</a>
<span class="text-muted">老马聊技术</span>
<a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/Vite/1.htm">Vite</a><a class="tag" taget="_blank" href="/search/TS/1.htm">TS</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个</div>
</li>
<li><a href="/article/1943971211121848320.htm"
title="前端 NPM 包的依赖可视化分析工具推荐" target="_blank">前端 NPM 包的依赖可视化分析工具推荐</a>
<span class="text-muted">前端视界</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/1.htm">前端艺匠馆</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>前端NPM包的依赖可视化分析工具推荐关键词：NPM、依赖管理、可视化分析、前端工程、包管理、依赖冲突、性能优化摘要：本文将深入探讨前端开发中NPM包依赖可视化分析的重要性，介绍5款主流工具的使用方法和特点，并通过实际案例展示如何利用这些工具优化项目依赖结构、解决版本冲突问题以及提升构建性能。文章将帮助开发者更好地理解和掌控项目依赖关系，提高开发效率和项目可维护性。背景介绍目的和范围本文旨在为前端开</div>
</li>
<li><a href="/article/1943969321717919744.htm"
title="日历插件-FullCalendar的详细使用" target="_blank">日历插件-FullCalendar的详细使用</a>
<span class="text-muted">老马聊技术</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>一、介绍FullCalendar是一个功能强大、高度可定制的JavaScript日历组件，用于在网页中显示和管理日历事件。它支持多种视图（月、周、日等），可以轻松集成各种框架，并提供丰富的事件处理功能。二、实操案例具体代码如下：FullCalendar日期选择body{font-family:Arial,sans-serif;margin:20px;}#calendar{max-width:900</div>
</li>
<li><a href="/article/1943968187112550400.htm"
title="OpenWebUI(12)源码学习-后端constants.py常量定义文件" target="_blank">OpenWebUI(12)源码学习-后端constants.py常量定义文件</a>
<span class="text-muted">青苔猿猿</span>
<a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">AI大模型</a><a class="tag" taget="_blank" href="/search/openwebui/1.htm">openwebui</a><a class="tag" taget="_blank" href="/search/constants%E5%B8%B8%E9%87%8F%E5%AE%9A%E4%B9%89/1.htm">constants常量定义</a>
<div>目录文件名：`constants.py`功能概述：主要功能点详解1.**MESSAGES枚举类**2.**WEBHOOK_MESSAGES枚举类**3.**ERROR_MESSAGES枚举类**✅默认错误模板✅认证与用户相关错误✅资源冲突与重复错误✅验证失败类错误✅权限限制类错误✅文件上传与格式错误✅模型与API错误✅请求频率与安全限制✅数据库与配置错误4.**TASKS枚举类**✅总结实际应用场</div>
</li>
<li><a href="/article/1943961125532004352.htm"
title="数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验" target="_blank">数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验</a>
<span class="text-muted">ui设计前端开发老司机</span>
<a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a>
<div>hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!一、引言：从“平面交互”到“沉浸体验”的UI革命当用户在电商APP中翻看3D家具模型却无法感知其与自家客厅的匹配度，当设计师在2D屏幕上绘制汽车内饰却难以预判实际乘坐体验——传统UI设计的“平面化、静态化、割裂感”</div>
</li>
<li><a href="/article/1943960369345130496.htm"
title="Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求" target="_blank">Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求</a>
<span class="text-muted">可曾去过倒悬山</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
<div>Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求三年经验是Java程序员的分水岭，技术栈深度决定你成为“业务码农”还是“架构师候选人”。本文整合阿里、美团、滴滴等大厂招聘要求，为你绘制可落地的进阶路线。一、Java核心：从语法糖到JVM底层三年经验与初级的核心差异在于系统级理解，大厂面试常考以下能力：JVM与性能调优内存模型（堆外内存、元空间）、GC算法（G1/ZGC适用场</div>
</li>
<li><a href="/article/1943955203891982336.htm"
title="matlab卷积矩阵绝对值,MATLAB矩阵分析和计算" target="_blank">matlab卷积矩阵绝对值,MATLAB矩阵分析和计算</a>
<span class="text-muted">weixin_39928736</span>
<a class="tag" taget="_blank" href="/search/matlab%E5%8D%B7%E7%A7%AF%E7%9F%A9%E9%98%B5%E7%BB%9D%E5%AF%B9%E5%80%BC/1.htm">matlab卷积矩阵绝对值</a>
<div>MATLAB矩阵分析和计算编辑锁定讨论上传视频本词条缺少概述图，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！《MATLAB矩阵分析和计算》是清华大学出版社出版的一本图书。[1]书名MATLAB矩阵分析和计算作者杜树春出版社清华大学出版社出版时间2019年6月1日定价59元ISBN9787302524816印次1-1印刷日期2019.04.23MATLAB矩阵分析和计算图书内容编辑本书侧重</div>
</li>
<li><a href="/article/1943954447797383168.htm"
title="javascript高级程序设计第3版——第12章 DOM2与DOM3" target="_blank">javascript高级程序设计第3版——第12章 DOM2与DOM3</a>
<span class="text-muted">weixin_30687587</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/1.htm">数据结构与算法</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a>
<div>12章——DOM2与DOM3为了增强D0M1，DOM级规范定义了一些模块。DOM2核心：为不同的DOM类型引入了一些与XML命名空间有关的方法，还定义了以编程方式创建Document实例的方法；DOM2级样式：针对操作元素的样式而开发；其特性总结：1.每个元素都有一个关联的style对象，可用来确定和修改行内样式；2.要确定某个元素的计算样式，可使用getComgetComputedStyle（）</div>
</li>
<li><a href="/article/1943950163496202240.htm"
title="JavaScript 基础09：Web APIs——日期对象、DOM节点" target="_blank">JavaScript 基础09：Web APIs——日期对象、DOM节点</a>
<span class="text-muted">梦想当全栈</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>JavaScript基础09：WebAPIs——日期对象、DOM节点进一步学习DOM相关知识，实现可交互的网页特效能够插入、删除和替换元素节点。能够依据元素节点关系查找节点。一、日期对象掌握Date日期对象的使用，动态获取当前计算机的时间。ECMAScript中内置了获取系统时间的对象Date，使用Date时与之前学习的内置对象console和Math不同，它需要借助new关键字才能使用。1.实例</div>
</li>
<li><a href="/article/1943946255763828736.htm"
title="《Java前端开发全栈指南：从Servlet到现代框架实战》" target="_blank">《Java前端开发全栈指南：从Servlet到现代框架实战》</a>
<span class="text-muted"></span>
<div>前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处</div>
</li>
<li><a href="/article/1943943105145270272.htm"
title="JAVA 高频八股文 Day03" target="_blank">JAVA 高频八股文 Day03</a>
<span class="text-muted">Conqueror675</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>12.TCP和Http的区别是什么TCP是传输层协议，负责建立可靠的点对点连接，确保数据有序、完整地传输（如铁路轨道）；HTTP是应用层协议，基于TCP构建，定义了Web服务交互的报文格式和规则（如货运订单）。TCP关注数据如何可靠送达，通过三次握手建立连接、流量控制等机制保证传输；HTTP关注传输内容的意义，提供请求/响应语义（GET/POST等）和无状态通信。补充：说一下什么是三次握手四次挥手</div>
</li>
<li><a href="/article/1943932016164663296.htm"
title="Vue3组件库实战: 打造高复用UI系统" target="_blank">Vue3组件库实战: 打造高复用UI系统</a>
<span class="text-muted">武昌库里写JAVA</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a>
<div>Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中，UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合，可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词：Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则，比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用，并且保证</div>
</li>
<li><a href="/article/1943931763084554240.htm"
title="自测魅族手机webview加载h5时ul嵌套li标签js失效问题记录" target="_blank">自测魅族手机webview加载h5时ul嵌套li标签js失效问题记录</a>
<span class="text-muted">ZhDan91</span>
<a class="tag" taget="_blank" href="/search/%E6%B7%B7%E5%90%88app/1.htm">混合app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a>
<div>自测魅族手机ul嵌套li标签js失效问题：可采用div嵌套option实现样式：.hot_list{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;}.hot_listoption{text-align:center;width:30%;padding:.16rem.34rem;border:0.1remso</div>
</li>
<li><a href="/article/1943930502771699712.htm"
title="Flutter基础（前端教程⑥-按钮切换）" target="_blank">Flutter基础（前端教程⑥-按钮切换）</a>
<span class="text-muted">aaiier</span>
<a class="tag" taget="_blank" href="/search/Flutter/1.htm">Flutter</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a>
<div>1.假设你已有的两个表单组件（示例）//手机号注册表单（示例）classPhoneRegisterFormextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnColumn(children:[TextField(decoration:InputDecoration(labelText:'手机号')),Text</div>
</li>
<li><a href="/article/1943929870320988160.htm"
title="为Layui Table组件添加前端搜索功能" target="_blank">为Layui Table组件添加前端搜索功能</a>
<span class="text-muted">caifox菜狐狸</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85%EF%BC%9A%E4%BB%8E%E6%96%B0%E6%89%8B%E5%88%B0%E4%B8%93%E5%AE%B6/1.htm">学习之旅：从新手到专家</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/table/1.htm">table</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%90%9C%E7%B4%A2/1.htm">前端搜索</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC%E6%90%9C%E7%B4%A2/1.htm">表格搜索</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>在现代Web开发中，数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架，以其简洁的代码、丰富的组件和强大的功能，为开发者提供了极大的便利。其中，Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项，成为了许多项目中不可或缺的部分。然而，在实际应用中，仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息，这就需要为表格添</div>
</li>
<li><a href="/article/1943924321755918336.htm"
title="Java中的Tomcat，开启Web应用腾飞【基础版】" target="_blank">Java中的Tomcat，开启Web应用腾飞【基础版】</a>
<span class="text-muted"></span>
<div>目录一、Tomcat初登场：揭开神秘面纱（一）啥是Tomcat（二）为啥要有Tomcat二、Tomcat的安装与启动：开启第一步（一）下载Tomcat（二）启动Tomcat三、Tomcat的目录结构：探秘内部布局（一）核心目录介绍（二）目录间的协同工作四、部署JavaWeb应用到Tomcat：让应用上线（一）打包Web应用为WAR文件（二）部署WAR文件到Tomcat五、Tomcat的配置优化：让</div>
</li>
<li><a href="/article/1943923817982259200.htm"
title="Java Web 之 Session 详解" target="_blank">Java Web 之 Session 详解</a>
<span class="text-muted">艾伦~耶格尔</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a>
<div>在JavaWeb开发中，Session就像网站的专属记忆管家，为每个用户保管着重要的信息和状态，确保用户在网站的旅程顺畅无阻。场景一：想象你去一家大型超市购物，推着购物车挑选商品。这个购物车就如同Session，它记录了你的购物信息，方便你在结账时一次性结算。场景二：你在玩一个在线游戏，登录账号后，你的游戏进度、等级、装备等信息都会被保存在Session中，即使你中途关闭游戏，下次登录时依然可以继</div>
</li>
<li><a href="/article/1943920918606704640.htm"
title="Spring WebFlux 响应式编程原理与实战指南" target="_blank">Spring WebFlux 响应式编程原理与实战指南</a>
<span class="text-muted"></span>
<div>SpringWebFlux响应式编程原理与实战指南一、技术背景与应用场景随着微服务与高并发的迅速发展，传统的阻塞式编程模型在处理大量并发请求时容易导致线程资源耗尽、响应延迟增高。SpringWebFlux基于ReactiveStreams规范，通过非阻塞、背压机制，实现高吞吐、低延迟的Web服务。典型应用场景包括：实时数据推送：WebSocket或Server-SentEvents场景。高并发AP</div>
</li>
<li><a href="/article/1943920035919622144.htm"
title="2025年渗透测试面试题总结-2025年HW(护网面试) 43（题目+回答）" target="_blank">2025年渗透测试面试题总结-2025年HW(护网面试) 43（题目+回答）</a>
<span class="text-muted">独行soc</span>
<a class="tag" taget="_blank" href="/search/2025%E5%B9%B4%E6%8A%A4%E7%BD%91/1.htm">2025年护网</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/1.htm">渗透测试</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E6%8A%A4%E7%BD%91/1.htm">护网</a>
<div>安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录2025年HW(护网面试)431.自我介绍与职业规划2.Webshell源码级检测方案3.2025年新型Web漏洞TOP54.渗透中的高价值攻击点5.智能Fuzz平台架构设计6.堆栈溢出攻防演进7.插桩技术实战应用8.二进制安全能力矩阵9.C语言内存管理精要10.Pyth</div>
</li>
<li><a href="/article/1943919909612351488.htm"
title="Vue.js 过渡 & 动画" target="_blank">Vue.js 过渡 & 动画</a>
<span class="text-muted">lsx202406</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡</div>
</li>
<li><a href="/article/1943919026744913920.htm"
title="JavaScript之DOM操作与事件处理详解" target="_blank">JavaScript之DOM操作与事件处理详解</a>
<span class="text-muted">AA-代码批发V哥</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>JavaScript之DOM操作与事件处理详解一、DOM基础：理解文档对象模型二、DOM元素的获取与访问2.1基础获取方法2.2集合的区别与注意事项三、DOM元素的创建与修改3.1创建与插入元素3.2修改元素属性与样式3.2.1属性操作3.2.2样式操作3.3元素内容的修改四、DOM元素的删除与替换4.1删除元素4.2替换元素五、事件处理：实现页面交互5.1事件绑定的三种方式5.1.1HTML属性</div>
</li>
<li><a href="/article/1943917893620133888.htm"
title="V少JS基础班之第五弹" target="_blank">V少JS基础班之第五弹</a>
<span class="text-muted">V少在逆向</span>
<a class="tag" taget="_blank" href="/search/JS%E5%9F%BA%E7%A1%80%E7%8F%AD/1.htm">JS基础班</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>文章目录一、前言二、本节涉及知识点三、重点内容1-函数的定义2-函数的构成1.函数参数详解1）参数个数不固定2）默认参数3）arguments对象（类数组）4）剩余参数（Rest参数）5）函数参数是按值传递的6）解构参数传递7）参数校验技巧（JavaScript没有类型限制，需要手动校验）2.函数返回值详解3-函数的分类1-函数声明式：2-函数表达式：3-箭头函数：4-构造函数：5-IIFE：6-</div>
</li>
<li><a href="/article/42.htm"
title="jQuery 键盘事件keydown ,keypress ,keyup介绍" target="_blank">jQuery 键盘事件keydown ,keypress ,keyup介绍</a>
<span class="text-muted">107x</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/keydown/1.htm">keydown</a><a class="tag" taget="_blank" href="/search/keypress/1.htm">keypress</a><a class="tag" taget="_blank" href="/search/keyup/1.htm">keyup</a>
<div>本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。
一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup() 代码如下 复制代码
$('input').keyup(funciton(){ </div>
</li>
<li><a href="/article/169.htm"
title="AngularJS中的Promise" target="_blank">AngularJS中的Promise</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Promise/1.htm">Promise</a>
<div>一.Promise
Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。
为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件：
var cu</div>
</li>
<li><a href="/article/296.htm"
title="c++ 用数组实现栈类" target="_blank">c++ 用数组实现栈类</a>
<span class="text-muted">CrazyMizzz</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a>
<div>#include<iostream>
#include<cassert>
using namespace std;
template<class T, int SIZE = 50>
class Stack{
private:
T list[SIZE];//数组存放栈的元素
int top;//栈顶位置
public:
Stack(</div>
</li>
<li><a href="/article/423.htm"
title="java和c语言的雷同" target="_blank">java和c语言的雷同</a>
<span class="text-muted">麦田的设计者</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%80%92%E5%BD%92/1.htm">递归</a><a class="tag" taget="_blank" href="/search/scaner/1.htm">scaner</a>
<div>软件启动时的初始化代码，加载用户信息2015年5月27号
从头学java二
1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点：
a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句
不会再继续执行。
b、for循环相比于whi</div>
</li>
<li><a href="/article/550.htm"
title="LINUX环境并发服务器的三种实现模型" target="_blank">LINUX环境并发服务器的三种实现模型</a>
<span class="text-muted">被触发</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。
1 循环服务器与并发服务器模型
在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。
目前最常用的服务器模型有：
·循环服务器：服务器在同一时刻只能响应一个客户端的请求
·并发服务器：服</div>
</li>
<li><a href="/article/677.htm"
title="Oracle数据库查询指令" target="_blank">Oracle数据库查询指令</a>
<span class="text-muted">肆无忌惮_</span>
<a class="tag" taget="_blank" href="/search/oracle%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">oracle数据库</a>
<div>20140920
单表查询
-- 查询************************************************************************************************************
-- 使用scott用户登录
-- 查看emp表
desc emp
</div>
</li>
<li><a href="/article/804.htm"
title="ext右下角浮动窗口" target="_blank">ext右下角浮动窗口</a>
<span class="text-muted">知了ing</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/ext/1.htm">ext</a>
<div>第一种
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/</div>
</li>
<li><a href="/article/931.htm"
title="浅谈REDIS数据库的键值设计" target="_blank">浅谈REDIS数据库的键值设计</a>
<span class="text-muted">矮蛋蛋</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a>
<div>http://www.cnblogs.com/aidandan/
原文地址：http://www.hoterran.info/redis_kv_design
丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。
</div>
</li>
<li><a href="/article/1058.htm"
title="maven编译可执行jar包" target="_blank">maven编译可执行jar包</a>
<span class="text-muted">alleni123</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
<div>http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven
<build>
<plugins>
<plugin>
<artifactId>maven-asse</div>
</li>
<li><a href="/article/1185.htm"
title="人力资源在现代企业中的作用" target="_blank">人力资源在现代企业中的作用</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/HR+%E4%BC%81%E4%B8%9A%E7%AE%A1%E7%90%86/1.htm">HR 企业管理</a>
<div>//人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的 人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点： 工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源 在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着 明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只 知道人力资源是管理企业招聘的 当时我被招聘上了，当时给我们培训 的人</div>
</li>
<li><a href="/article/1312.htm"
title="Linux自启动设置详解" target="_blank">Linux自启动设置详解</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。
阅读之前建议先看一下附图。
本文中假设inittab中设置的init tree为：
/etc/rc.d/rc0.d
/etc/rc.d/rc1.d
/etc/rc.d/rc2.d
/etc/rc.d/rc3.d
/etc/rc.d/rc4.d
/etc/rc.d/rc5.d
/etc</div>
</li>
<li><a href="/article/1439.htm"
title="Spring Aop Schema实现" target="_blank">Spring Aop Schema实现</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a>
<div>本例使用的是Spring2.5
1.Aop配置文件spring-aop.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans
xmlns="http://www.springframework.org/schema/beans"
xmln</div>
</li>
<li><a href="/article/1566.htm"
title="【Gson七】Gson预定义类型适配器" target="_blank">【Gson七】Gson预定义类型适配器</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a>
<div>Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式，
DateTypeAdapter
public final class DateTypeAdapter extends TypeAdapter<Date> {
public static final TypeAdapterFacto</div>
</li>
<li><a href="/article/1693.htm"
title="【Spark八十八】Spark Streaming累加器操作（updateStateByKey)" target="_blank">【Spark八十八】Spark Streaming累加器操作（updateStateByKey)</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/update/1.htm">update</a>
<div>在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。
比如： 对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。
Spark Streaming的解决方案是累加器，工作原理是，定义</div>
</li>
<li><a href="/article/1820.htm"
title="linux系统下通过shell脚本快速找到哪个进程在写文件" target="_blank">linux系统下通过shell脚本快速找到哪个进程在写文件</a>
<span class="text-muted">ronin47</span>
<div>一个文件正在被进程写 我想查看这个进程 文件一直在增大 找不到谁在写 使用lsof也没找到
这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。
linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。
幸运的是systemtap的安装包里带了inodewatch.stp，位</div>
</li>
<li><a href="/article/1947.htm"
title="java-两种方法求第一个最长的可重复子串" target="_blank">java-两种方法求第一个最长的可重复子串</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
<div>
import java.util.Arrays;
import java.util.Collections;
import java.util.List;
public class MaxPrefix {
public static void main(String[] args) {
String str="abbdabcdabcx";
</div>
</li>
<li><a href="/article/2074.htm"
title="Netty源码学习-ServerBootstrap启动及事件处理过程" target="_blank">Netty源码学习-ServerBootstrap启动及事件处理过程</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a>
<div>Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式：
http://bylijinnan.iteye.com/blog/1992325
Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的
文章里面提到的操作，每一步都能在Netty里面找到对应的代码
其中Reactor里面的Acceptor就对应Netty的ServerBo</div>
</li>
<li><a href="/article/2201.htm"
title="servelt filter listener 的生命周期" target="_blank">servelt filter listener 的生命周期</a>
<span class="text-muted">cngolon</span>
<a class="tag" taget="_blank" href="/search/filter/1.htm">filter</a><a class="tag" taget="_blank" href="/search/listener/1.htm">listener</a><a class="tag" taget="_blank" href="/search/servelt/1.htm">servelt</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/1.htm">生命周期</a>
<div>1. servlet 当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说</div>
</li>
<li><a href="/article/2328.htm"
title="jmpopups获取input元素值" target="_blank">jmpopups获取input元素值</a>
<span class="text-muted">ctrain</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>jmpopups 获取弹出层form表单
首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。
当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。
我们必须到jmpopups生成的代码中去查找这个值，$(</div>
</li>
<li><a href="/article/2455.htm"
title="vi查找替换命令详解" target="_blank">vi查找替换命令详解</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/%E6%9B%BF%E6%8D%A2/1.htm">替换</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E6%89%BE/1.htm">查找</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
<div>一、查找
查找命令
/pattern<Enter> ：向下查找pattern匹配字符串
?pattern<Enter>：向上查找pattern匹配字符串
使用了查找命令之后，使用如下两个键快速查找：
n：按照同一方向继续查找
N：按照反方向查找
字符串匹配
pattern是需要匹配的字符串，例如：
1: /abc<En</div>
</li>
<li><a href="/article/2582.htm"
title="对网站中的js,css文件进行打包" target="_blank">对网站中的js,css文件进行打包</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%89%93%E5%8C%85/1.htm">打包</a>
<div>一，为什么要用smarty进行打包
apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。
为什么要进行打包呢，主要目的是为了合理的管理自己的代码 。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J</div>
</li>
<li><a href="/article/2709.htm"
title="php Yii: 出现undefined offset 或者 undefined index解决方案" target="_blank">php Yii: 出现undefined offset 或者 undefined index解决方案</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/undefined/1.htm">undefined</a>
<div>在开发Yii 时，在程序中定义了如下方式：
if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级</div>
</li>
<li><a href="/article/2836.htm"
title="linux 文件格式（1） sed工具" target="_blank">linux 文件格式（1） sed工具</a>
<span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux+sed%E5%B7%A5%E5%85%B7/1.htm">linux sed工具</a><a class="tag" taget="_blank" href="/search/sed%E5%B7%A5%E5%85%B7/1.htm">sed工具</a><a class="tag" taget="_blank" href="/search/linux+sed%E8%AF%A6%E8%A7%A3/1.htm">linux sed详解</a>
<div>转载请出自出处：
http://eksliang.iteye.com/blog/2106082
简介
sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾</div>
</li>
<li><a href="/article/2963.htm"
title="Android应用程序获取系统权限" target="_blank">Android应用程序获取系统权限</a>
<span class="text-muted">gqdy365</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>引用
如何使Android应用程序获取系统权限
第一个方法简单点，不过需要在Android系统源码的环境下用make来编译：
1. 在应用程序的AndroidManifest.xml中的manifest节点</div>
</li>
<li><a href="/article/3090.htm"
title="HoverTree开发日志之验证码" target="_blank">HoverTree开发日志之验证码</a>
<span class="text-muted">hvt</span>
<a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/webform/1.htm">webform</a>
<div>HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多</div>
</li>
<li><a href="/article/3217.htm"
title="JSON API：用 JSON 构建 API 的标准指南中文版" target="_blank">JSON API：用 JSON 构建 API 的标准指南中文版</a>
<span class="text-muted">justjavac</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a>
<div>译文地址：https://github.com/justjavac/json-api-zh_CN
如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式， 那么 JSON API 就是你的 anti-bikeshedding 武器。
通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。
基于 JSON API 的客户端还能够充分利用缓存，</div>
</li>
<li><a href="/article/3344.htm"
title="数据结构随记_2" target="_blank">数据结构随记_2</a>
<span class="text-muted">lx.asymmetric</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
<div>第三章 栈与队列
一．简答题
1. 在一个循环队列中，队首指针指向队首元素的 前一个 位置。
2.在具有n个单元的循环队列中，队满时共有 n-1 个元素。
3. 向栈中压入元素的操作是先 移动栈顶指针&n</div>
</li>
<li><a href="/article/3471.htm"
title="Linux下的监控工具dstat" target="_blank">Linux下的监控工具dstat</a>
<span class="text-muted">网络接口</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是, </div>
</li>
<li><a href="/article/3598.htm"
title="C 语言初级入门--二维数组和指针" target="_blank">C 语言初级入门--二维数组和指针</a>
<span class="text-muted">1140566087</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/c%2Fc%2B%2B/1.htm">c/c++</a><a class="tag" taget="_blank" href="/search/%E6%8C%87%E9%92%88/1.htm">指针</a>
<div>/*
二维数组的定义和二维数组元素的引用
二维数组的定义：
当数组中的每个元素带有两个下标时，称这样的数组为二维数组；
(逻辑上把数组看成一个具有行和列的表格或一个矩阵);
语法：
类型名 数组名[常量表达式1][常量表达式2]
二维数组的引用：
引用二维数组元素时必须带有两个下标，引用形式如下：
例如：
int a[3][4]; 引用：</div>
</li>
<li><a href="/article/3725.htm"
title="10点睛Spring4.1-Application Event" target="_blank">10点睛Spring4.1-Application Event</a>
<span class="text-muted">wiselyman</span>
<a class="tag" taget="_blank" href="/search/application/1.htm">application</a>
<div>10.1 Application Event
Spring使用Application Event给bean之间的消息通讯提供了手段
应按照如下部分实现bean之间的消息通讯
继承ApplicationEvent类实现自己的事件
实现继承ApplicationListener接口实现监听事件
使用ApplicationContext发布消息
</div>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="container">
<div class="indexes">
<strong>按字母分类：</strong>
<a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
</div>
</div>
</div>
<footer id="footer" class="mb30 mt30">
<div class="container">
<div class="footBglm">
<a target="_blank" href="/">首页</a> -
<a target="_blank" href="/custom/about.htm">关于我们</a> -
<a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
<a target="_blank" href="/sitemap.txt">Sitemap</a> -
<a target="_blank" href="/custom/delete.htm">侵权投诉</a>
</div>
<div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
</div>
</div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>
</body>
</html>
