图片的懒加载的实现
第一种方法使用 getBoundingClientRect与视口关系，需要监听浏览器，使用防抖优化
第二种方法使用 IntersectionObserver函数
<!doctype html>
图片懒加载<<span class="token operator">/</span>title>
<meta charset=<span class="token string">"utf-8"</span> <span class="token operator">/</span>>
<<span class="token operator">/</span>head>
<body>
<div >
<img <span class="token keyword">data</span><span class="token operator">-</span>src=<span class="token string">"./w/1.png"</span>>
<<span class="token operator">/</span>div>
<div >
<img <span class="token keyword">data</span><span class="token operator">-</span>src=<span class="token string">"./w/2.jpeg"</span>>
<<span class="token operator">/</span>div>
<div >
<img <span class="token keyword">data</span><span class="token operator">-</span>src=<span class="token string">"./w/3.jpg"</span>>
<<span class="token operator">/</span>div>
<div >
<img <span class="token keyword">data</span><span class="token operator">-</span>src=<span class="token string">"./w/4.jpg"</span>>
<<span class="token operator">/</span>div>
<script>
<span class="token keyword">function</span> query<span class="token punctuation">(</span>selector<span class="token punctuation">)</span> <span class="token punctuation">{
</span>
<span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>querySelectorAll<span class="token punctuation">(</span>selector<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">#第一种方法使用 getBoundingClientRect与视口关系</span>
document<span class="token punctuation">.</span>addEventListener<span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{
</span>
const imgs = query<span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span>
<span class="token keyword">function</span> lazyLoad<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{
</span>
const windowHeight = document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight
imgs<span class="token punctuation">.</span><span class="token keyword">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>img<span class="token punctuation">,</span> i<span class="token punctuation">)</span> => <span class="token punctuation">{
</span>
<span class="token comment">#通过 getBoundingClientRect() 获取到当前元素与视口的位置关系来确定图片是否加载，在加载完成之后为了性能考虑，删除 data-src</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>img<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>src && img<span class="token punctuation">.</span>getBoundingClientRect<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>bottom >= 0 && windowHeight > img<span class="token punctuation">.</span>getBoundingClientRect<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>top<span class="token punctuation">)</span> <span class="token punctuation">{
</span>
img<span class="token punctuation">.</span>src = img<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>src
delete img<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>src
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
lazyLoad<span class="token punctuation">(</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>addEventListener<span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> debounce<span class="token punctuation">(</span>lazyLoad<span class="token punctuation">,</span> 200<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">#防抖优化</span>
<span class="token keyword">function</span> debounce<span class="token punctuation">(</span>func<span class="token punctuation">,</span> wait<span class="token punctuation">)</span> <span class="token punctuation">{
</span>
let timer = null
<span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>args<span class="token punctuation">)</span> <span class="token punctuation">{
</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>timer<span class="token punctuation">)</span> clearTimeout<span class="token punctuation">(</span>timer<span class="token punctuation">)</span>
timer = setTimeout<span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> => <span class="token punctuation">{
</span>
func<span class="token punctuation">(</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>args<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> wait<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">#第二种方法使用 IntersectionObserver函数</span>
<span class="token comment">#const observer = new IntersectionObserver(entries => {
</span>
<span class="token comment"># entries.forEach((entry) => {
</span>
<span class="token comment"># const target = entry.target;</span>
<span class="token comment"># const intersectionRatio = entry.intersectionRatio</span>
<span class="token comment"># if (intersectionRatio > 0 && intersectionRatio <= 1) {
</span>
<span class="token comment"># if (target.dataset.src) {
</span>
<span class="token comment"># target.src = target.dataset.src</span>
<span class="token comment"># delete target.dataset.src</span>
<span class="token comment"># console.log(1)</span>
<span class="token comment"># target.onload = target.onerror = () => {
</span>
<span class="token comment"># observer.unobserve(target)</span>
<span class="token comment"># } </span>
<span class="token comment"># } </span>
<span class="token comment"># }</span>
<span class="token comment"># })</span>
<span class="token comment"># }</span>
<span class="token comment">#)</span>
<span class="token comment">#query('img').forEach(function (item) {
</span>
<span class="token comment"># observer.observe(item)</span>
<span class="token comment">#})</span>
<<span class="token operator">/</span>script>
<<span class="token operator">/</span>body>
<style>
div<span class="token punctuation">{
</span>
width: 500px<span class="token punctuation">;</span>
height: 500px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
img<span class="token punctuation">{
</span>
width: 100<span class="token operator">%</span><span class="token punctuation">;</span>
height: 100<span class="token operator">%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<<span class="token operator">/</span>style>
<<span class="token operator">/</span>html>
</code></pre>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1306287059832442880"></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">你可能感兴趣的:(JavaScript,web前端,javascript)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1892446115870076928.htm"
title="JavaScript网页设计案例：打造交互式个人简历网站" target="_blank">JavaScript网页设计案例：打造交互式个人简历网站</a>
<span class="text-muted">程序媛小果</span>
<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><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>在当今数字化时代，个人简历不再局限于纸质文档，而是越来越多地以网页形式呈现。JavaScript作为一种强大的客户端脚本语言，为网页设计提供了无限可能，使得网页不仅仅是静态的信息展示，而是具有丰富交互性的平台。本文将通过一个案例，展示如何使用HTML、CSS和JavaScript来设计一个交互式的个人简历网站。1.项目概述本案例的目标是创建一个个人简历网站，它不仅展示个人信息、工作经历、教育背景和</div>
</li>
<li><a href="/article/1892446114204938240.htm"
title="ECMAScript与JavaScript：探索两者之间的联系与区别" target="_blank">ECMAScript与JavaScript：探索两者之间的联系与区别</a>
<span class="text-muted">程序媛小果</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</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>
<div>在Web开发的早期，JavaScript成为了客户端脚本语言的代名词，而随着时间的推移，JavaScript已经发展成为一个功能强大的语言，它的影响力远远超出了浏览器的范畴。在这场语言演进的过程中，ECMAScript扮演了一个关键角色。本文将深入探讨ECMAScript与JavaScript之间的关系，以及它们之间的主要区别。1.什么是ECMAScript？ECMAScript是由欧洲计算机制造</div>
</li>
<li><a href="/article/1892415446636883968.htm"
title="null和undefined的区别" target="_blank">null和undefined的区别</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><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>null和undefined是JavaScript中两个特殊的值，它们都表示“无”或“空”，但在语义和使用场景上有明显区别。以下是它们的详细对比：1.定义undefined表示变量已声明但未赋值，或函数没有返回值时的默认返回值。是JavaScript引擎默认赋予的初始值。类型为undefined。null表示一个空对象指针，通常用于显式表示“无”或“空”。是开发者主动赋值的值。类型为object（</div>
</li>
<li><a href="/article/1892413304811352064.htm"
title="dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)" target="_blank">dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)</a>
<span class="text-muted">weixin_39979245</span>
<a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/html%E8%AF%AD%E8%A8%80/1.htm">html语言</a>
<div>Dreamweaver网页设计与制作(HTML+CSS+JavaScript)编辑锁定讨论上传视频本词条缺少信息栏，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！《Dreamweaver网页设计与制作(HTML+CSS+JavaScript)》是2014年清华大学出版社出版的图书。Dreamweaver网页设计与制作(HTML+CSS+JavaScript)图书详细信息编辑ISBN：978</div>
</li>
<li><a href="/article/1892412800781840384.htm"
title="html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作" target="_blank">html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作</a>
<span class="text-muted">律保阁-Michael</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/5%E4%B8%ADcss%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">5中css的含义</a>
<div>HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书，作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48</div>
</li>
<li><a href="/article/1892412295414345728.htm"
title="html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准" target="_blank">html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准</a>
<span class="text-muted">vvv666s</span>
<div>②学会运用HTML语言中的标记设置颜色、文本格式和列表；熟练掌握颜色值的配置和背景图案的设置方法,熟练掌握字符、链接颜色的设置方法；③掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法；④熟练掌握表格的使用方法，学会利用表格设布局网页；掌握框架制作网页的方法，会使用框架设计网页；掌握制作表单的方法，会利用表单建立交互式页面；⑤掌握JavaScript语言的语法；⑥掌握在HTML语言代码中嵌入</div>
</li>
<li><a href="/article/1892410529520087040.htm"
title="JavaScript的魔法世界：巧妙之处与实战技巧" target="_blank">JavaScript的魔法世界：巧妙之处与实战技巧</a>
<span class="text-muted">skyksksksksks</span>
<a class="tag" taget="_blank" href="/search/%E7%BB%BC%E5%90%88%E4%B8%AA%E4%BA%BA%E6%9D%82%E8%AE%B0/1.htm">综合个人杂记</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/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、从浏览器玩具到全栈利器的蜕变之路JavaScript诞生于1995年，原本只是网景公司为浏览器设计的"小脚本"。谁能想到这个曾被戏称为"玩具语言"的家伙，如今已蜕变成支撑现代Web开发的擎天柱？就像一只破茧成蝶的幼虫，JavaScript经历了ECMAScript标准的持续进化，在Node.js的加持下突破了浏览器的桎梏，实现了从客户端到服务端的华丽转身。V8引擎的涡轮增压让它跑得比猎豹还快，</div>
</li>
<li><a href="/article/1892407376435277824.htm"
title="前端开发入门指南：HTML、CSS和JavaScript基础知识" target="_blank">前端开发入门指南：HTML、CSS和JavaScript基础知识</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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与</div>
</li>
<li><a href="/article/1892400189780586496.htm"
title="js如何直接下载文件流" target="_blank">js如何直接下载文件流</a>
<span class="text-muted">涔溪</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</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中直接处理文件下载，尤其是在处理文件流的情况下，通常涉及到使用fetchAPI或者XMLHttpRequest来获取文件流，并通过创建一个临时的标签（锚点元素）触发下载。以下是使用fetchAPI的一个示例：fetch('你的文件URL',{method:'GET',headers:{//如果需要的话，可以在这里添加请求头}}).then(response=>response</div>
</li>
<li><a href="/article/1892398803407925248.htm"
title="部署前端项目2" target="_blank">部署前端项目2</a>
<span class="text-muted">augenstern416</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V</div>
</li>
<li><a href="/article/1892398677004185600.htm"
title="对象的操作" target="_blank">对象的操作</a>
<span class="text-muted">augenstern416</span>
<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>在前端开发中，JavaScript提供了许多内置对象和方法，用于处理数据、操作DOM、处理事件等。以下是一些常用对象及其方法和扩展技巧：1.Object对象Object是JavaScript中最基础的对象，几乎所有对象都继承自Object。常用方法Object.keys(obj)：返回对象的所有可枚举属性的键名数组。constobj={a:1,b:2};console.log(Object.key</div>
</li>
<li><a href="/article/1892390738520502272.htm"
title="前端基础入门：HTML、CSS 和 JavaScript" target="_blank">前端基础入门：HTML、CSS 和 JavaScript</a>
<span class="text-muted">阿绵</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a>
<div>在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元</div>
</li>
<li><a href="/article/1892389477767245824.htm"
title="网页制作03-html,css,javascript初认识のhtml的图像设置" target="_blank">网页制作03-html,css,javascript初认识のhtml的图像设置</a>
<span class="text-muted">Ama_tor</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C%E4%B8%93%E6%A0%8F/1.htm">网页制作专栏</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、图像格式网页中图像的格式有三种，Gif，Jpeg，PngGif：Graphicinterchangeformat图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像；还可以制作动态图像Jpeg：Giantphotographicexpectgroup，它是一种图像压缩格式，可包含数百万种颜色，不支持</div>
</li>
<li><a href="/article/1892386200312934400.htm"
title="JavaScript——操作浏览器窗口" target="_blank">JavaScript——操作浏览器窗口</a>
<span class="text-muted">yiqi_perss</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>学习内容：今天学习了alert提示框，提示框中的内容，就是alert后边小括号中的内容例如：alert('我要学JavaScript!');alert('我要学习!');学习总结：日常小总结例如：后面的分号；可以随便去掉，不影响运行效果。不能去掉小括号，否则会报错，不信你可以试试。必须是英文引号，否则会报错。课外扩展：历史渊源例如：ECMAScript是一种语言标准，而JavaScript是网景公</div>
</li>
<li><a href="/article/1892344959785299968.htm"
title="百度极速版APP 自动脚本 javascript代码" target="_blank">百度极速版APP 自动脚本 javascript代码</a>
<span class="text-muted">zaxjb123</span>
<a class="tag" taget="_blank" href="/search/dubbo/1.htm">dubbo</a>
<div>使用JavaScript编写针对百度极速版APP的自动化脚本通常涉及到使用WebView测试框架，比如Puppeteer或Selenium，这些工具允许你控制一个浏览器或WebView环境，从而与网页或APP中的Web内容进行交互。然而，对于原生APP（如百度极速版）的自动化测试，通常需要使用专门的移动应用自动化框架，如Appium。Appium支持多种编程语言，包括JavaScript。要使用J</div>
</li>
<li><a href="/article/1892333107923709952.htm"
title="JavaScript案例（简易ATM机）" target="_blank">JavaScript案例（简易ATM机）</a>
<span class="text-muted">fusheng_cn</span>
<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><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>
<div>Documentvarnum=100;do{varoperate=prompt("请输入您需要的操作：\n1.存钱\n2.取钱\n3.显示余额\n4.退出");switch(parseInt(operate)){case1://存钱varmoney1=prompt("请输入您需要存入的钱数：");varsum1=num+parseInt(money1);alert("您的余额为："+sum1);n</div>
</li>
<li><a href="/article/1892318611989655552.htm"
title="正则表达式regex" target="_blank">正则表达式regex</a>
<span class="text-muted">GotoMeiben</span>
<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>
<div>工具网站：RegExr:Learn,Build,&TestRegEx正则表达式（RegularExpression,Regex）是一种强大的字符串匹配工具，广泛用于文本搜索、数据处理和输入验证等场景。无论是Python、Java、JavaScript还是Shell脚本，Regex都是不可或缺的技能。本文将深入介绍正则表达式的各种用法，包括：基本匹配（字母、数字）特殊符号^$\b量词{}*+?字符类</div>
</li>
<li><a href="/article/1892279125322821632.htm"
title="(01)ES6 教程——let与const、解构赋值、Symbol" target="_blank">(01)ES6 教程——let与const、解构赋值、Symbol</a>
<span class="text-muted">欲游山河十万里</span>
<a class="tag" taget="_blank" href="/search/web%E6%A1%86%E6%9E%B6%E5%AD%A6%E4%B9%A0/1.htm">web框架学习</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</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>前言ES6，全称ECMAScript6.0，是JavaScript的下一个版本标准，2015.06发版。ES6主要是为了解决ES5的先天不足，比如JavaScript里并没有类的概念，但是目前浏览器的JavaScript是ES5版本，大多数高版本的浏览器也支持ES6，不过只实现了ES6的部分特性和功能。ECMAScript的背景JavaScript是大家所了解的语言名称，但是这个语言名称是商标（O</div>
</li>
<li><a href="/article/1892267654920597504.htm"
title="Electron学习" target="_blank">Electron学习</a>
<span class="text-muted">星空0107</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>Electron的简介Electron基于chromium和Node.js，让我们可以使用Javascript,HTML,CSS构建跨平台的桌面应用程序，同时Electron兼容Mac,Window,和Linux,可以构建出三个平台的应用程序Electron的安装运行cmd,输入npminit，然后一直按enter换行即可输入cnpmielectron-S（如果电脑没有安装cnpm会报错，需要安装</div>
</li>
<li><a href="/article/1892267275638075392.htm"
title="electron学习笔记" target="_blank">electron学习笔记</a>
<span class="text-muted">weixin_46452138</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>electron个人学习笔记一、electron简单了解Electron是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。可以使用HTML、CSS来绘制界面和控制布局，使用JavaScript来控制用户行为和业务逻辑，使用Node.js来通信、处理音频视频等，几乎所有的Web前端技术和框架（jQuery、Vue、React、Angular等）都可以应用到桌面GUI开发中。二、开发前基</div>
</li>
<li><a href="/article/1892263746714267648.htm"
title="HTML之JavaScript对象" target="_blank">HTML之JavaScript对象</a>
<span class="text-muted">录大大i</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>HTML之JavaScript对象Document/*参考文档地址：https://www.runoob.com/js/js-obj-intro.htmljsonjava数据类型变量数据类型变量运算符运算符流程控制流程控制函数方法对象面向对象常见对象*Java常用类(类库)1.数组1.数组创建方式2.数组API*/vararr=newArray();//类似于object集合vararr1=new</div>
</li>
<li><a href="/article/1892263494523351040.htm"
title="探索AutoJS：一款强大的Android自动化工具" target="_blank">探索AutoJS：一款强大的Android自动化工具</a>
<span class="text-muted">夏庭彭Maxine</span>
<div>探索AutoJS：一款强大的Android自动化工具去发现同类优质开源项目:https://gitcode.com/在如今高度数字化的世界中，自动化扮演着越来越重要的角色。尤其在移动端，AutoJS是一个专为Android设计的强大自动化工具，它允许用户编写JavaScript代码来实现各种自动化任务，极大地提高了效率。这篇推荐文章将带你了解AutoJS的核心技术、应用场景以及其独特之处。项目简介</div>
</li>
<li><a href="/article/1892256681367236608.htm"
title="虚拟DOM和真实DOM的区别" target="_blank">虚拟DOM和真实DOM的区别</a>
<span class="text-muted">水煮庄周鱼鱼</span>
<a class="tag" taget="_blank" href="/search/%E6%A6%82%E5%BF%B5/1.htm">概念</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>虚拟DOM（VirtualDOM）、DOM（RealDOM）是前端开发中常用的两种概念。什么是真实DOM？真实DOM是浏览器中实际存在的DOM结构，它由浏览器解析HTML生成，并且直接与浏览器交互。当页面中的数据发生变化时，真实DOM会重新计算布局和渲染，这个过程比较耗费性能。什么是虚拟DOM?虚拟DOM是一种在内存中以JavaScript对象的形式表示的轻量级的DOM结构。它是对真实DOM的一种</div>
</li>
<li><a href="/article/1892224500456550400.htm"
title="【一文读懂】JS与Java的区别" target="_blank">【一文读懂】JS与Java的区别</a>
<span class="text-muted">Bl_a_ck</span>
<a class="tag" taget="_blank" href="/search/JS%E8%BF%9B%E9%98%B6/1.htm">JS进阶</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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>相同点这两个语言除了注释长得差不多之外就没什么相同点了不同点设计初衷：JS从开发到上线就经历了10天的时间，最初的目的是实现网页端的动态交互效果，由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript写出来的程序混乱不堪。所以现在有了TS来代替JSJava设计用于编写跨平台的、运行在虚拟机上的应用程序设计理念：Java是典型的面相对象的语言，具有面向对象的三大特</div>
</li>
<li><a href="/article/1892219834280767488.htm"
title="【如何实现 JavaScript 的防抖和节流？】" target="_blank">【如何实现 JavaScript 的防抖和节流？】</a>
<span class="text-muted">程序员远仔</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%AB%98%E9%A2%91%E9%97%AE%E9%A2%98%E5%AE%9D%E5%85%B8/1.htm">前端面试高频问题宝典</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%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/html5/1.htm">html5</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的防抖和节流？前言防抖（Debounce）和节流（Throttle）是JavaScript中优化高频事件处理的两种常用技术。它们可以有效减少事件处理函数的调用次数，提升性能并改善用户体验。本文将详细介绍防抖和节流的实现原理及其应用场景。关键词JavaScript、防抖、节流、高频事件、性能优化、事件处理、前端开发、前端面试、前端基础、前端进阶、前端工程化、前端开发最佳实</div>
</li>
<li><a href="/article/1892214288949506048.htm"
title="写轮眼按钮特效：打造炫酷网页按钮" target="_blank">写轮眼按钮特效：打造炫酷网页按钮</a>
<span class="text-muted">孤客网络科技工作室</span>
<a class="tag" taget="_blank" href="/search/html%2Bcss%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">html+css网页开发</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>写轮眼按钮特效：打造炫酷网页按钮引言在网页设计中，按钮是用户交互的重要元素之一。一个炫酷的按钮特效不仅能提升用户体验，还能为网页增添独特的视觉吸引力。今天，我们将通过CSS和JavaScript来实现一个“写轮眼”按钮特效，灵感来源于《火影忍者》中的经典元素——写轮眼。效果预览在开始之前，我们先来看一下最终的效果：实现步骤1.index.html（部分代码）首先，我们需要创建一个简单的HTML结构</div>
</li>
<li><a href="/article/1892206853664862208.htm"
title="前端 window.print() 打印图片" target="_blank">前端 window.print() 打印图片</a>
<span class="text-muted">BillKu</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>在使用document.write时，确保内容加载完成后再执行其他操作（如print），可以通过以下方法实现：1.使用window.onload事件window.onload事件会在页面所有资源（包括图片、脚本等）加载完成后触发。javascript复制window.onload=function(){document.write("页面已加载完成");window.print();//确保内容加</div>
</li>
<li><a href="/article/1892201180927422464.htm"
title="今日-Vue框架" target="_blank">今日-Vue框架</a>
<span class="text-muted">幼儿园口算大王</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>什么是VUE框架？Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。Vue的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。Vue也被称为</div>
</li>
<li><a href="/article/1892177468253597696.htm"
title="redux中间件-redux-thunk" target="_blank">redux中间件-redux-thunk</a>
<span class="text-muted">#清词#</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</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>
<div>今天，让我们一起揭开redux中间件-redux-thunk的神秘面纱。本次小文章将会以任务驱动的形式去逐步讲解thunk及其在redux中的使用，这样易于理解，有理有据能够化抽象为具体。首先，为什么要使用redux中间件？什么是中间件？中间件有什么作用呢？redux是一个通用的JavaScript状态管理容器。对于state的变化是通过触发dispatch一个action，然后最交给reduce</div>
</li>
<li><a href="/article/1892131196150804480.htm"
title="Bootstrap CSS 概览" target="_blank">Bootstrap CSS 概览</a>
<span class="text-muted">froginwe11</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>BootstrapCSS概览引言Bootstrap是一个流行的前端框架，它可以帮助开发者快速构建响应式、移动优先的网站和应用程序。Bootstrap使用CSS、HTML和JavaScript来构建界面，其中CSS部分提供了丰富的样式和组件，使得开发者可以轻松实现各种设计效果。本文将为您提供一个关于BootstrapCSS的概览，帮助您了解其核心功能和用法。BootstrapCSS简介Bootstr</div>
</li>
<li><a href="/article/48.htm"
title="开发者关心的那些事" target="_blank">开发者关心的那些事</a>
<span class="text-muted">圣子足道</span>
<a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/apple/1.htm">apple</a><a class="tag" taget="_blank" href="/search/%E6%94%AF%E4%BB%98/1.htm">支付</a>
<div>我要在app里添加IAP，必须要注册自己的产品标识符（product identifiers）。产品标识符是什么？
产品标识符（Product Identifiers）是一串字符串，它用来识别你在应用内贩卖的每件商品。App Store用产品标识符来检索产品信息，标识符只能包含大小写字母（A-Z）、数字（0-9）、下划线（-）、以及圆点(.)。你可以任意排列这些元素，但我们建议你创建标识符时使用</div>
</li>
<li><a href="/article/175.htm"
title="负载均衡器技术Nginx和F5的优缺点对比" target="_blank">负载均衡器技术Nginx和F5的优缺点对比</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/F5/1.htm">F5</a>
<div> 对于数据流量过大的网络中，往往单一设备无法承担，需要多台设备进行数据分流，而负载均衡器就是用来将数据分流到多台设备的一个转发器。
目前有许多不同的负载均衡技术用以满足不同的应用需求，如软/硬件负载均衡、本地/全局负载均衡、更高</div>
</li>
<li><a href="/article/302.htm"
title="LeetCode[Math] - #9 Palindrome Number" target="_blank">LeetCode[Math] - #9 Palindrome Number</a>
<span class="text-muted">Cwind</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a>
<div>原题链接：#9 Palindrome Number
要求：
判断一个整数是否是回文数，不要使用额外的存储空间
难度：简单
分析：
题目限制不允许使用额外的存储空间应指不允许使用O(n)的内存空间，O(1)的内存用于存储中间结果是可以接受的。于是考虑将该整型数反转，然后与原数字进行比较。
注：没有看到有关负数是否可以是回文数的明确结论，例如</div>
</li>
<li><a href="/article/429.htm"
title="画图板的基本实现" target="_blank">画图板的基本实现</a>
<span class="text-muted">15700786134</span>
<a class="tag" taget="_blank" href="/search/%E7%94%BB%E5%9B%BE%E6%9D%BF/1.htm">画图板</a>
<div> 要实现画图板的基本功能，除了在qq登陆界面中用到的组件和方法外，还需要添加鼠标监听器，和接口实现。
首先，需要显示一个JFrame界面：
public class DrameFrame extends JFrame { //显示</div>
</li>
<li><a href="/article/556.htm"
title="linux的ps命令" target="_blank">linux的ps命令</a>
<span class="text-muted">被触发</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>Linux中的ps命令是Process Status的缩写。ps命令用来列出系统中当前运行的那些进程。ps命令列出的是当前那些进程的快照，就是执行ps命令的那个时刻的那些进程，如果想要动态的显示进程信息，就可以使用top命令。
要对进程进行监测和控制，首先必须要了解当前进程的情况，也就是需要查看当前进程，而 ps 命令就是最基本同时也是非常强大的进程查看命令。使用该命令可以确定有哪些进程正在运行</div>
</li>
<li><a href="/article/683.htm"
title="Android 音乐播放器 下一曲 连续跳几首歌" target="_blank">Android 音乐播放器 下一曲 连续跳几首歌</a>
<span class="text-muted">肆无忌惮_</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>最近在写安卓音乐播放器的时候遇到个问题。在MediaPlayer播放结束时会回调
player.setOnCompletionListener(new OnCompletionListener() {
@Override
public void onCompletion(MediaPlayer mp) {
mp.reset();
Log.i("H</div>
</li>
<li><a href="/article/810.htm"
title="java导出txt文件的例子" target="_blank">java导出txt文件的例子</a>
<span class="text-muted">知了ing</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a>
<div>代码很简单就一个servlet,如下：
package com.eastcom.servlet;
import java.io.BufferedOutputStream;
import java.io.IOException;
import java.net.URLEncoder;
import java.sql.Connection;
import java.sql.Resu</div>
</li>
<li><a href="/article/937.htm"
title="Scala stack试玩, 提高第三方依赖下载速度" target="_blank">Scala stack试玩, 提高第三方依赖下载速度</a>
<span class="text-muted">矮蛋蛋</span>
<a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a><a class="tag" taget="_blank" href="/search/sbt/1.htm">sbt</a>
<div>原文地址：
http://segmentfault.com/a/1190000002894524
sbt下载速度实在是惨不忍睹, 需要做些配置优化
下载typesafe离线包, 保存为ivy本地库
wget http://downloads.typesafe.com/typesafe-activator/1.3.4/typesafe-activator-1.3.4.zip
解压r</div>
</li>
<li><a href="/article/1064.htm"
title="phantomjs安装(linux，附带环境变量设置) ，以及casperjs安装。" target="_blank">phantomjs安装(linux，附带环境变量设置) ，以及casperjs安装。</a>
<span class="text-muted">alleni123</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/spider/1.htm">spider</a>
<div>1. 首先从官网
http://phantomjs.org/下载phantomjs压缩包，解压缩到/root/phantomjs文件夹。
2. 安装依赖
sudo yum install fontconfig freetype libfreetype.so.6 libfontconfig.so.1 libstdc++.so.6
3. 配置环境变量
vi /etc/profil</div>
</li>
<li><a href="/article/1191.htm"
title="JAVA IO FileInputStream和FileOutputStream，字节流的打包输出" target="_blank">JAVA IO FileInputStream和FileOutputStream，字节流的打包输出</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java%E6%A0%B8%E5%BF%83%E6%80%9D%E6%83%B3/1.htm">java核心思想</a><a class="tag" taget="_blank" href="/search/JAVA+IO%E6%93%8D%E4%BD%9C/1.htm">JAVA IO操作</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E6%B5%81/1.htm">字节流</a>
<div>在程序设计语言中，数据的保存是基本，如果某程序语言不能保存数据那么该语言是不可能存在的，JAVA是当今最流行的面向对象设计语言之一，在保存数据中也有自己独特的一面，字节流和字符流
1，字节流是由字节构成的，字符流是由字符构成的 字节流和字符流都是继承的InputStream和OutPutStream ,java中两种最基本的就是字节流和字符流
类 FileInputStream</div>
</li>
<li><a href="/article/1318.htm"
title="Spring基础实例（依赖注入和控制反转）" target="_blank">Spring基础实例（依赖注入和控制反转）</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
<div>前提条件：在http://www.springsource.org/download网站上下载Spring框架，并将spring.jar、log4j-1.2.15.jar、commons-logging.jar加载至工程1.武器接口
package com.bijian.spring.base3;
public interface Weapon {
void kil</div>
</li>
<li><a href="/article/1445.htm"
title="HR看重的十大技能" target="_blank">HR看重的十大技能</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E6%8F%90%E5%8D%87/1.htm">提升</a><a class="tag" taget="_blank" href="/search/%E8%83%BD%E5%8A%9B/1.htm">能力</a><a class="tag" taget="_blank" href="/search/HR/1.htm">HR</a><a class="tag" taget="_blank" href="/search/%E6%88%90%E9%95%BF/1.htm">成长</a>
<div> 一个人掌握何种技能取决于他的兴趣、能力和聪明程度，也取决于他所能支配的资源以及制定的事业目标，拥有过硬技能的人有更多的工作机会。但是，由于经济发展前景不确定，掌握对你的事业有所帮助的技能显得尤为重要。以下是最受雇主欢迎的十种技能。 一、解决问题的能力 每天，我们都要在生活和工作中解决一些综合性的问题。那些能够发现问题、解决问题并迅速作出有效决</div>
</li>
<li><a href="/article/1572.htm"
title="【Thrift一】Thrift编译安装" target="_blank">【Thrift一】Thrift编译安装</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/thrift/1.htm">thrift</a>
<div>什么是Thrift
The Apache Thrift software framework, for scalable cross-language services development, combines a software stack with a code generation engine to build services that work efficiently and s</div>
</li>
<li><a href="/article/1699.htm"
title="【Avro三】Hadoop MapReduce读写Avro文件" target="_blank">【Avro三】Hadoop MapReduce读写Avro文件</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a>
<div>Avro是Doug Cutting(此人绝对是神一般的存在）牵头开发的。 开发之初就是围绕着完善Hadoop生态系统的数据处理而开展的（使用Avro作为Hadoop MapReduce需要处理数据序列化和反序列化的场景）,因此Hadoop MapReduce集成Avro也就是自然而然的事情。
这个例子是一个简单的Hadoop MapReduce读取Avro格式的源文件进行计数统计，然后将计算结果</div>
</li>
<li><a href="/article/1826.htm"
title="nginx定制500，502，503，504页面" target="_blank">nginx定制500，502，503，504页面</a>
<span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nginx%E3%80%80%E9%94%99%E8%AF%AF%E6%98%BE%E7%A4%BA/1.htm">nginx 错误显示</a>
<div>server {
listen 80;
error_page 500/500.html;
error_page 502/502.html;
error_page 503/503.html;
error_page 504/504.html;
location /test {return502;}}
配置很简单，和配</div>
</li>
<li><a href="/article/1953.htm"
title="java-1.二叉查找树转为双向链表" target="_blank">java-1.二叉查找树转为双向链表</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%9F%A5%E6%89%BE%E6%A0%91/1.htm">二叉查找树</a>
<div>
import java.util.ArrayList;
import java.util.List;
public class BSTreeToLinkedList {
/*
把二元查找树转变成排序的双向链表
题目：
输入一棵二元查找树，将该二元查找树转换成一个排序的双向链表。
要求不能创建任何新的结点，只调整指针的指向。
10
/ \
6 14
/ \ </div>
</li>
<li><a href="/article/2080.htm"
title="Netty源码学习-HTTP-tunnel" target="_blank">Netty源码学习-HTTP-tunnel</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关于HTTP tunnel的说明：
http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/socket/http/package-summary.html#package_description
这个说明有点太简略了
一个完整的例子在这里：
https://github.com/bylijinnan</div>
</li>
<li><a href="/article/2207.htm"
title="JSONUtil.serialize(map)和JSON.toJSONString(map)的区别" target="_blank">JSONUtil.serialize(map)和JSON.toJSONString(map)的区别</a>
<span class="text-muted">coder_xpf</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/map/1.htm">map</a><a class="tag" taget="_blank" href="/search/val%28%29/1.htm">val()</a>
<div> JSONUtil.serialize(map)和JSON.toJSONString(map)的区别
数据库查询出来的map有一个字段为空
通过System.out.println()输出 JSONUtil.serialize(map)： {"one":"1","two":"nul</div>
</li>
<li><a href="/article/2334.htm"
title="Hibernate缓存总结" target="_blank">Hibernate缓存总结</a>
<span class="text-muted">cuishikuan</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/javaweb/1.htm">javaweb</a><a class="tag" taget="_blank" href="/search/hibernate%E7%BC%93%E5%AD%98/1.htm">hibernate缓存</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E5%A4%A7%E6%A1%86%E6%9E%B6/1.htm">三大框架</a>
<div>一、为什么要用Hibernate缓存？
Hibernate是一个持久层框架，经常访问物理数据库。
为了降低应用程序对物理数据源访问的频次，从而提高应用程序的运行性能。
缓存内的数据是对物理数据源中的数据的复制，应用程序在运行时从缓存读写数据，在特定的时刻或事件会同步缓存和物理数据源的数据。
二、Hibernate缓存原理是怎样的？
Hibernate缓存包括两大类：Hib</div>
</li>
<li><a href="/article/2461.htm"
title="CentOs6" target="_blank">CentOs6</a>
<span class="text-muted">dalan_123</span>
<a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a>
<div>首先su - 切换到root下面1、首先要先安装GCC GCC-C++ Openssl等以来模块：yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel2、再安装ncurses模块yum -y install ncurses-develyum install ncurses-devel3、下载Erang</div>
</li>
<li><a href="/article/2588.htm"
title="10款用 jquery 实现滚动条至页面底端自动加载数据效果" target="_blank">10款用 jquery 实现滚动条至页面底端自动加载数据效果</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>
无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术，它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果，改变了一直以来只能通过点击下一页来翻页这种常规做法。
无限滚动自动翻页技术的鼻祖是微博的先驱：推特(twitter)，后来必应图片搜索、谷歌图片搜索、google reader、箱包批发网等纷纷抄袭了这一项技术，于是靠滚动浏览器滚动条</div>
</li>
<li><a href="/article/2715.htm"
title="ImageButton去边框&Button或者ImageButton的背景透明" target="_blank">ImageButton去边框&Button或者ImageButton的背景透明</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/imagebutton/1.htm">imagebutton</a>
<div>在ImageButton中载入图片后，很多人会觉得有图片周围的白边会影响到美观，其实解决这个问题有两种方法
一种方法是将ImageButton的背景改为所需要的图片。如：android:background="@drawable/XXX"
第二种方法就是将ImageButton背景改为透明，这个方法更常用
在XML里；
<ImageBut</div>
</li>
<li><a href="/article/2842.htm"
title="JSP之c:foreach" target="_blank">JSP之c:foreach</a>
<span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/forearch/1.htm">forearch</a>
<div>原文出自：http://www.cnblogs.com/draem0507/archive/2012/09/24/2699745.html
<c:forEach>标签用于通用数据循环，它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的最后一个项目 step 步长 否 1</div>
</li>
<li><a href="/article/2969.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程序中可以实现自动扫描蓝牙、配对蓝牙、建立数据通道。蓝牙分不同类型，这篇文字只讨论如何与蓝牙耳机连接。
大致可以分三步：
一、扫描蓝牙设备：
1、注册并监听广播：
BluetoothAdapter.ACTION_DISCOVERY_STARTED
BluetoothDevice.ACTION_FOUND
BluetoothAdapter.ACTION_DIS</div>
</li>
<li><a href="/article/3096.htm"
title="android学习轨迹之四：org.json.JSONException: No value for" target="_blank">android学习轨迹之四：org.json.JSONException: No value for</a>
<span class="text-muted">hyz301</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a>
<div>org.json.JSONException: No value for items
在JSON解析中会遇到一种错误，很常见的错误
06-21 12:19:08.714 2098-2127/com.jikexueyuan.secret I/System.out﹕ Result:{"status":1,"page":1,&</div>
</li>
<li><a href="/article/3223.htm"
title="干货分享：从零开始学编程 系列汇总" target="_blank">干货分享：从零开始学编程 系列汇总</a>
<span class="text-muted">justjavac</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a>
<div>程序员总爱重新发明轮子，于是做了要给轮子汇总。
从零开始写个编译器吧系列 (知乎专栏)
从零开始写一个简单的操作系统 (伯乐在线)
从零开始写JavaScript框架 (图灵社区)
从零开始写jQuery框架 (蓝色理想 )
从零开始nodejs系列文章 (粉丝日志)
从零开始编写网络游戏 </div>
</li>
<li><a href="/article/3350.htm"
title="jquery-autocomplete 使用手册" target="_blank">jquery-autocomplete 使用手册</a>
<span class="text-muted">macroli</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a>
<div>jquery-autocomplete学习
一、用前必备
官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
当前版本：1.1
需要JQuery版本：1.2.6
二、使用
<script src="./jquery-1.3.2.js" type="text/ja</div>
</li>
<li><a href="/article/3477.htm"
title="PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改" target="_blank">PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改</a>
<span class="text-muted">超声波</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a>
<div> 在服务器上将Oracle安装好之后接下来要做的就是通过本地机器来远程连接服务器端的oracle数据库，常用的客户端连接工具就是PLSQL-Developer或者Navicat这些工具了。刚开始也是各种报错，什么TNS:no listener;TNS:lost connection;TNS:target hosts...花了一天的时间终于让PLSQL-Developer和Navicat等这些客户</div>
</li>
<li><a href="/article/3604.htm"
title="数据仓库数据模型之：极限存储--历史拉链表" target="_blank">数据仓库数据模型之：极限存储--历史拉链表</a>
<span class="text-muted">superlxw1234</span>
<a class="tag" taget="_blank" href="/search/%E6%9E%81%E9%99%90%E5%AD%98%E5%82%A8/1.htm">极限存储</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BB%93%E5%BA%93/1.htm">数据仓库</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%A8%A1%E5%9E%8B/1.htm">数据模型</a><a class="tag" taget="_blank" href="/search/%E6%8B%89%E9%93%BE%E5%8E%86%E5%8F%B2%E8%A1%A8/1.htm">拉链历史表</a>
<div>在数据仓库的数据模型设计过程中，经常会遇到这样的需求：
1. 数据量比较大; 2. 表中的部分字段会被update,如用户的地址，产品的描述信息，订单的状态等等; 3. 需要查看某一个时间点或者时间段的历史快照信息，比如，查看某一个订单在历史某一个时间点的状态， 比如，查看某一个用户在过去某一段时间内，更新过几次等等; 4. 变化的比例和频率不是很大，比如，总共有10</div>
</li>
<li><a href="/article/3731.htm"
title="10点睛Spring MVC4.1-全局异常处理" target="_blank">10点睛Spring MVC4.1-全局异常处理</a>
<span class="text-muted">wiselyman</span>
<a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a>
<div>10.1 全局异常处理
使用@ControllerAdvice注解来实现全局异常处理;
使用@ControllerAdvice的属性缩小处理范围
10.2 演示
演示控制器
package com.wisely.web;
import org.springframework.stereotype.Controller;
import org.spring</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>