图片的懒加载的实现
第一种方法使用 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/1899366676525281280.htm"
title="Yarn：包管理优化与工作空间的最佳实践" target="_blank">Yarn：包管理优化与工作空间的最佳实践</a>
<span class="text-muted"></span>
<div>在现代前端开发中，包管理工具是不可或缺的工具之一。Yarn作为一个快速、可靠且安全的包管理工具，相对于npm，提供了一些独特的功能和优化，尤其是在工作空间管理和性能优化方面尤为突出。本文将深入探讨Yarn的专业使用，包括其工作空间的强大功能、性能优化技术以及在大型项目中的最佳实践。Yarn简介Yarn是由Facebook开发的一个JavaScript包管理工具，它旨在解决npm的一些关键问题，如安</div>
</li>
<li><a href="/article/1899360845343813632.htm"
title="ES6 解构赋值详解" target="_blank">ES6 解构赋值详解</a>
<span class="text-muted">修己xj</span>
<a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a>
<div>ES6是JavaScript语言的一次重大更新，引入了许多新特性和语法改进，其中解构赋值是一个非常实用和灵活的语法特性。它可以让我们从数组或对象中提取值，并赋给对应的变量，让代码变得更加简洁和易读。本文将深入探讨ES6解构赋值的语法、用法及其在实际开发中的应用。数组解构赋值数组解构赋值允许我们通过类似模式匹配的方式，从数组中提取值并赋给变量，即只要等会两边的变量模式相同，左边的变量就会被赋予对应的</div>
</li>
<li><a href="/article/1899356684506165248.htm"
title="ES6之解构" target="_blank">ES6之解构</a>
<span class="text-muted">Hopebearer_</span>
<a class="tag" taget="_blank" href="/search/ES6/1.htm">ES6</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><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>文章目录ES6之解构一、数组解构1.基本解构2.部分解构3.默认值4.剩余参数5.嵌套解构6.交换变量二、对象解构1.基本解构2.重命名3.默认值4.剩余参数三、函数参数结构1.数组参数解构2.对象参数解构3.默认值四、注意事项1.解构顺序2.undefined情况3.剩余元素4.对象的方法解构ES6之解构解构是JavaScript（ES6及以后版本）中一种非常强大的语法特性，它允许我们按照一定模</div>
</li>
<li><a href="/article/1899346470969077760.htm"
title="ES6解构赋值详解" target="_blank">ES6解构赋值详解</a>
<span class="text-muted">漫天转悠</span>
<a class="tag" taget="_blank" href="/search/ES6/1.htm">ES6</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/ecmascript/1.htm">ecmascript</a>
<div>ES6解构赋值详解ES6解构赋值是JavaScript语言的一项强大特性，它允许从数组或对象中提取数据，并将其赋值给变量。这一特性不仅简化了代码，提高了可读性，还增强了代码的灵活性。本文将详细介绍ES6解构赋值的基本概念、语法、应用场景以及一些高级用法。1.基本概念解构赋值是对赋值运算符的扩展。它允许按照一定的模式，从数组或对象中提取值，并赋值给变量。这种语法使得从复杂数据结构中提取数据变得更加简</div>
</li>
<li><a href="/article/1899343573246078976.htm"
title="web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript" target="_blank">web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript</a>
<span class="text-muted">IT-司马青衫</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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/html/1.htm">html</a>
<div>静态网站的编写主要是用HTMLDⅣV+CSSJS等来完成页面的排版设计，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。精彩专栏推荐【作者主页——获取更多优质源码】【web前端期末大作业——毕设项目精品实战案例(1</div>
</li>
<li><a href="/article/1899338906554396672.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>
<div>Vue基础Vue是什么？Vue是javascript的渐进式框架。Vue初识Vue工作时必须要创建一个Vue的实例，并且传入一个配置对象。root容器里的代码是符合html的语法但是新添加了一些Vue语法，在这些地方Vue会自动进行解析。root容器里的代码称为Vue模版。Vue实例和容器是一一对应的。在实际开发中只有一个Vue，配合组件使用。在vue里的插值{{}}内部只要写js表达式就能正常解</div>
</li>
<li><a href="/article/1899313310344474624.htm"
title="JavaScript -闭包" target="_blank">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/%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>闭包定义:函数声明时会保存其所在的作用域(词法环境),必然有一个全局作用域,除了全局作用域剩余的对于当前函数来说叫--闭包闭包特征:函数在声明时会保存其所在的所有作用域(词法环境)闭包本质:作用域中所使用到的值组成的对象闭包的作用:把使用到的来自于其他作用域的值保存起来,保障函数在执行时能顺利运行window里面的ashow对象拥有一个scopes属性,其中存放了函数使用到的其他作用域中的值:这些</div>
</li>
<li><a href="/article/1899301829213220864.htm"
title="Vue3 基础教程：从入门到实践 (保姆级教学)" target="_blank">Vue3 基础教程：从入门到实践 (保姆级教学)</a>
<span class="text-muted">前段技术人</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
<div>一、Vue3简介Vue.js是一款用于构建用户界面的JavaScript框架，而Vue3作为其最新的主要版本，带来了诸多令人瞩目的改进与新特性，使其在前端开发领域备受青睐。（一）Vue3的优势性能提升：Vue3重写了虚拟DOM算法，显著提高了挂载、更新和渲染的速度。在处理大型列表或频繁数据更新的场景时，Vue3的表现更为出色，能够为用户带来更流畅的交互体验。例如，一个包含大量商品信息的电商产品列表</div>
</li>
<li><a href="/article/1899300061964201984.htm"
title="VSCode 插件开发实战（十六）：详解插件生命周期" target="_blank">VSCode 插件开发实战（十六）：详解插件生命周期</a>
<span class="text-muted">乐闻x</span>
<a class="tag" taget="_blank" href="/search/VsCode/1.htm">VsCode</a><a class="tag" taget="_blank" href="/search/%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C/1.htm">使用手册</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a>
<div>前言VSCode它不仅功能强大，而且可以通过插件进行扩展，以满足不同开发者的需求。那么，VSCode自定义插件的生命周期是如何运行的呢？今天我们就用通俗易懂的方式来讲解一下。什么是VSCode插件？VSCode插件是用来扩展编辑器功能的小程序。通过这些插件，我们可以添加新的语言支持、代码片段、调试支持等。VSCode插件通常是用JavaScript或TypeScript编写的，并打包成VSIX文件</div>
</li>
<li><a href="/article/1899299809274163200.htm"
title="web前端高级JavaScript - 闭包的应用及循环事件绑定的N中解决办法" target="_blank">web前端高级JavaScript - 闭包的应用及循环事件绑定的N中解决办法</a>
<span class="text-muted">一笑程序猴</span>
<a class="tag" taget="_blank" href="/search/WEB%E5%89%8D%E7%AB%AF%E9%AB%98%E7%BA%A7%E6%95%99%E7%A8%8B/1.htm">WEB前端高级教程</a><a class="tag" taget="_blank" href="/search/%E9%97%AD%E5%8C%85%E5%BA%94%E7%94%A8/1.htm">闭包应用</a><a class="tag" taget="_blank" href="/search/%E5%BE%AA%E7%8E%AF%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A/1.htm">循环事件绑定</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B4%A2%E5%BC%95/1.htm">自定义索引</a>
<div>闭包在循环事件绑定中的应用场景描述：在页面上有3个button按钮，当点击每个按钮时输出当前按钮的索引值，要求用循环来绑定每个按钮的事件，看下面的代码。button1button2button3varbuttons=document.querySelectorAll('button');for(vari=0;i<buttons.length;i++){buttons[i].onclick=func</div>
</li>
<li><a href="/article/1899299059043201024.htm"
title="刷题前必学！二叉树！用JavaScript学数据结构与算法" target="_blank">刷题前必学！二叉树！用JavaScript学数据结构与算法</a>
<span class="text-muted"></span>
<div>JavaScript算法与数据结构-HowieCong务必要熟悉JavaScript使用再来学！一、树是什么？数据结构中的树，对于现实世界中的树简化——树根抽象为“根节点”，树枝抽象为“边”，树枝的两个端点抽象为“结点”，树叶抽象为“叶子结点”计算机中的树如下：二、树的重点树的层次计算规则：根结点所在的那一层为第一层，其子节点为第二层，以此类推结点和树的高度计算规则：叶子结点高度为1，每向上一层</div>
</li>
<li><a href="/article/1899290731877560320.htm"
title="JavaScript-闭包" target="_blank">JavaScript-闭包</a>
<span class="text-muted">tuoluoo</span>
<a class="tag" taget="_blank" href="/search/JavaScript%E5%AD%A6%E4%B9%A0/1.htm">JavaScript学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>闭包概念在JS中，变量的作用域属于函数作用域，在函数执行后作用域就会被清理、内存也随之回收，但是由于闭包是建立在一个函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会随之销毁，这时的子函数——也就是闭包形成：函数中嵌套函数作用：函数内部调用外部变量、构造函数的私有属性、延长变量生命周期优点：希望一个变量长期存在内存中、模块化代码避免全局变量的污染、私有属性缺点：无法回</div>
</li>
<li><a href="/article/1899272198774910976.htm"
title="自助洗车小程序开发方案详解" target="_blank">自助洗车小程序开发方案详解</a>
<span class="text-muted">ALLSectorSorft</span>
<a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a>
<div>自助洗车小程序开发设计详细扩写一、系统架构设计（一）技术栈选型1.前端：微信小程序（原生开发）：直接基于微信官方提供的开发框架，能充分利用微信的原生能力，如小程序的启动速度快、与微信生态的无缝衔接等。开发过程中可使用微信开发者工具进行代码编写、调试和预览，通过WXML（类似HTML）、WXSS（类似CSS）和JavaScript构建用户界面和交互逻辑。例如利用微信原生的组件库，快速搭建出美观且符合</div>
</li>
<li><a href="/article/1899248247185141760.htm"
title="正则表达式" target="_blank">正则表达式</a>
<span class="text-muted">yuren_xia</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/1.htm">前端技术</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF%E6%8A%80%E6%9C%AF/1.htm">后端技术</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/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>正则表达式（RegularExpression）是一种用于描述字符模式的规则，主流语言对其都有良好的支持。文章目录一、元字符二、常见校验1、校验数字的表达式2、校验字符的表达式3、特殊需求表达式三、JavaScript中使用正则表达式四、在java中使用正则表达式一、元字符正则表达式中有许多元字符，它们具有特殊的含义：1、字符类相关点号（.）匹配除换行符之外的任意单个字符。例如，在表达式a.b中，</div>
</li>
<li><a href="/article/1899244464128454656.htm"
title="React Native" target="_blank">React Native</a>
<span class="text-muted">svygh123</span>
<a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E8%BF%87%E7%A8%8B/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/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>ReactNative是一个用于构建原生移动应用的框架，它使用JavaScript和React（一个用于构建用户界面的JavaScript库）来开发iOS和Android平台的应用程序。ReactNative由Facebook开发并维护，并且是开源的。特点跨平台开发：ReactNative允许开发者使用相同的代码库为多个平台（如iOS和Android）编写应用，极大地提高了开发效率。热重载：开发者</div>
</li>
<li><a href="/article/1899234753589080064.htm"
title="VScode使用小技巧" target="_blank">VScode使用小技巧</a>
<span class="text-muted">前端CV攻城狮</span>
<a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</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>代码片段快捷键设置设置位置：文件—首选项—用户代码片段----搜javaScript,进入JavaScript.json,自定义快捷键（setting→ConfigureUserSnippets→JavaScripts.json）例：log快速输入console.log()"Printtoconsole":{"prefix":"log","body":["console.log('$1')"],"</div>
</li>
<li><a href="/article/1899223152446205952.htm"
title="数据监控工具Mixpanel的简易使用教程" target="_blank">数据监控工具Mixpanel的简易使用教程</a>
<span class="text-muted">alankuo</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a>
<div>Mixpanel的使用教程如下：注册与准备创建账号：访问Mixpanel官方网站，按照提示填写相关信息创建账号。登录后，在项目设置中可以获取项目密钥。了解基本概念：明确事件、用户属性等基本概念。事件是用户在应用中的操作，如点击按钮、完成注册等；用户属性是描述用户特征的信息，像年龄、城市、会员等级等。集成SDKWeb应用：在HTML文件中引入MixpanelJavaScriptSDK。在页面的标签内</div>
</li>
<li><a href="/article/1899211793948012544.htm"
title="最新网络安全-跨站脚本攻击(XSS)的原理、攻击及防御_xsstrike原理" target="_blank">最新网络安全-跨站脚本攻击(XSS)的原理、攻击及防御_xsstrike原理</a>
<span class="text-muted">2401_84239830</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/xss/1.htm">xss</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a>
<div>XSS的类型反射型XSS/不持久型XSS存储型XSS/持久型XSS基于DOM的XSS常用Payload与工具XSS扫描工具Payloadsscript标签类结合js的html标签伪协议绕过危害防御简介跨站脚本攻击(全称CrossSiteScripting,为和CSS（层叠样式表）区分，简称为XSS)是指恶意攻击者在Web页面中插入恶意javascript代码（也可能包含html代码），当用户浏览网</div>
</li>
<li><a href="/article/1899191610839724032.htm"
title="智慧树刷课插件常见问题解决方案" target="_blank">智慧树刷课插件常见问题解决方案</a>
<span class="text-muted">姬虹俪Humble</span>
<div>智慧树刷课插件常见问题解决方案zhihuishu智慧树刷课插件，自动播放下一集、1.5倍速度、无声项目地址:https://gitcode.com/gh_mirrors/zh/zhihuishu1.项目基础介绍本项目是一个开源的智慧树刷课插件，旨在帮助用户自动化观看智慧树教学视频。该插件能够自动播放下一集视频、提供1.5倍速播放以及无声播放的功能。主要使用的编程语言为JavaScript和HTML</div>
</li>
<li><a href="/article/1899186687989313536.htm"
title="Vue懒加载" target="_blank">Vue懒加载</a>
<span class="text-muted">充气大锤</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">前端性能优化</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/1.htm">前端</a><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/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/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><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a>
<div>一、什么是懒加载在Vue中实现懒加载（LazyLoading）通常是为了优化应用的性能，尤其是在加载大型应用或组件时。懒加载可以帮助减少初始加载时间，只在用户需要时才加载特定的代码块或组件。二、懒加载的几种方式方法1：使用动态导入（DynamicImports）你可以使用JavaScript的动态导入语法来懒加载组件。例如，如果你想懒加载一个名为MyComponent的组件，你可以这样做：//在组</div>
</li>
<li><a href="/article/1899123777283878912.htm"
title="JavaScript性能优化：DOM操作优化实战" target="_blank">JavaScript性能优化：DOM操作优化实战</a>
<span class="text-muted">lifire_H</span>
<a class="tag" taget="_blank" href="/search/JavaScript%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">JavaScript性能优化</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/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性能优化：DOM操作优化实战一重排与重绘的代价问题场景用户点击按钮后，需要动态生成一个包含10,000个选项的下拉列表，但界面出现长达5秒的冻结。错误代码示例functioncreateList(){constul=document.getElementById("myList");for(leti=0;i{item.addEventListener("click",handl</div>
</li>
<li><a href="/article/1899117726182469632.htm"
title="TypeScript基础类型详解：与JavaScript的对比与核心价值" target="_blank">TypeScript基础类型详解：与JavaScript的对比与核心价值</a>
<span class="text-muted">念九_ysl</span>
<a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>TypeScript作为JavaScript的超集，最大的特性是引入了静态类型系统。本文将基于TypeScript官网内容，解析其基础类型设计，并与ES/JavaScript进行对比，揭示类型系统的实际价值。一、基础类型全景图1.原生类型的强化JavaScript原生类型：boolean、number、string、undefined、null、symbol、bigintTypeScript完全保</div>
</li>
<li><a href="/article/1899112806519730176.htm"
title="鸿蒙全栈开发 D2" target="_blank">鸿蒙全栈开发 D2</a>
<span class="text-muted">GH小杨</span>
<a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a>
<div>课程目标掌握ArkTS基础语法与核心概念理解声明式UI开发范式能独立开发简单鸿蒙应用组件建立规范的代码编写习惯第一部分：初识ArkTS1.1语言全景认知JavaScriptTypeScriptArkTS鸿蒙生态手机平板智能穿戴关键特征解析：类型安全：编译时检查错误（演示类型错误案例）UI即代码：通过代码直接描述界面（对比传统XML布局）一次开发：同一套代码适配不同设备尺寸1.2开发环境初体验Dev</div>
</li>
<li><a href="/article/1899093138190954496.htm"
title="Vue3中动态Ref的魔法：绑定与妙用" target="_blank">Vue3中动态Ref的魔法：绑定与妙用</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>前言在Vue3的开发过程中，动态绑定Ref是一项非常实用的技术，特别是在处理复杂组件结构和动态数据时。通过动态绑定Ref，我们可以更灵活地访问和操作DOM元素或组件实例，实现更高效的交互和状态管理。本文将详细介绍如何在Vue3中实现动态Ref的绑定，并通过实例展示其妙用。一、Vue3中的Ref概述在Vue3中，Ref是一个用于创建响应式数据的API。通过Ref，我们可以将普通的JavaScript</div>
</li>
<li><a href="/article/1899092633926561792.htm"
title="《踩坑与填坑：细数早期 Vue2 项目那些事儿，附一手优化经验》" target="_blank">《踩坑与填坑：细数早期 Vue2 项目那些事儿，附一手优化经验》</a>
<span class="text-muted">内向的小农</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>前端实现导入文件的步骤(运用vue.js—导入）1,利用inputtype=file原生属性绑定change事件2，为触发按钮绑定事件导入3、按钮绑定的事件中触发inputchange事件```javascript//导入表格`在这里插入代码片`asyncimportData(){this.$refs.userImport.click()},4，清空inputflie文件（element.oute</div>
</li>
<li><a href="/article/1899053793992044544.htm"
title="深度解析前端页面性能优化" target="_blank">深度解析前端页面性能优化</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/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a>
<div>1.优化页面加载性能1.1减少HTTP请求问题：过多的HTTP请求会增加页面加载时间。解决方案：合并CSS和JavaScript文件。使用CSSSprites合并小图标。使用字体图标（如FontAwesome）代替图片图标。代码示例：合并CSS和JavaScript1.2使用CDN加速静态资源加载问题：静态资源加载速度受服务器地理位置影响。解决方案：将静态资源（如图片、CSS、JavaScript</div>
</li>
<li><a href="/article/1899045342582730752.htm"
title="第八课：性能优化与高并发处理方案" target="_blank">第八课：性能优化与高并发处理方案</a>
<span class="text-muted">deming_su</span>
<a class="tag" taget="_blank" href="/search/Nodejs/1.htm">Nodejs</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a>
<div>Node.js作为一种基于事件驱动、非阻塞I/O模型的JavaScript运行环境，广泛应用于高并发、实时性强的应用开发。然而，随着业务需求的不断增长，如何在Node.js中高效地处理大量并发请求、优化性能，成为了开发者必须面对的重要课题。本文将详细介绍Node.js性能优化与高并发处理的几种关键方案，包括使用Cluster模块多进程优化、Redis缓存加速数据查询、负载均衡与Nginx反向代理，</div>
</li>
<li><a href="/article/1899016732626972672.htm"
title="【Javascript网页设计】在线图片画板案例" target="_blank">【Javascript网页设计】在线图片画板案例</a>
<span class="text-muted">Netsuite + 影刀</span>
<a class="tag" taget="_blank" href="/search/Javascript%E6%A1%88%E4%BE%8B/1.htm">Javascript案例</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>代码如下：在线画板body{text-align:center;font-family:Arial,sans-serif;margin:20px;}.toolbar{margin-bottom:10px;}canvas{border:2pxsolid#000;cursor:crosshair;}button{margin:5px;padding:8px15px;border:none;backgr</div>
</li>
<li><a href="/article/1899012192515190784.htm"
title="快来收藏，欢迎打卡，编程自学成长指南" target="_blank">快来收藏，欢迎打卡，编程自学成长指南</a>
<span class="text-muted">猫咪薄荷</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><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%BA%BF%E6%80%A7%E5%9B%9E%E5%BD%92/1.htm">线性回归</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/1.htm">链表</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/1.htm">排序算法</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92/1.htm">动态规划</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a>
<div>自学编程是一段充满挑战和成就感的旅程。为了帮助初学者顺利起步，以下是一个全面的编程自学成长指南，涵盖从语言选择到实践项目的各个方面，助您在编程之路上稳步前行。1.确定学习目标首先，明确您学习编程的目的。这有助于选择合适的编程语言和学习路径。•Web开发：如果您对构建网站感兴趣，建议学习HTML、CSS和JavaScript等语言。•数据分析：对于数据处理和分析，Python是一个强大的工具。•移动</div>
</li>
<li><a href="/article/1899011307399606272.htm"
title="计算机学习的五大避坑指南新手必藏" target="_blank">计算机学习的五大避坑指南新手必藏</a>
<span class="text-muted">编程诗人华仔</span>
<a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">架构设计</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B/1.htm">软件工程</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</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/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>避坑一：盲目跟风学习编程语言技术性深化：在选择编程语言时，要考虑语言的特点、适用场景以及未来发展趋势。例如，Java适合企业级应用开发，Python在数据分析和人工智能领域有广泛应用，而JavaScript则是前端开发的基础。明确自己的职业发展方向，选择与之匹配的语言进行深入学习。避坑二：忽视基础知识的掌握技术性深化：深入理解算法如排序、搜索等，熟悉常见的数据结构如链表、栈、队列、树等，并掌握设计</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>