Web API接口 FileReader学习笔记
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
一、介绍
FileReader接口的方法
FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
FileReader接口事件
FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态；
属性
状态常量
二、使用
下面是几个实例，第一个演示了三种不同读取图片文件的方法，第二个实例其实是第一个实例中将文件读取为data url的翻版；最后一个实例，是对不支持FileReader对象的浏览器的兼容性扩展方法，即针对IE10以下的浏览器，我们通过使用滤镜来兼容旧版本的IE；
实例-1：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>
<label for="">请选择一个图片文件label>
<input type="file" id="file" />
<input type="button" value="读取图片" onclick="readAsDataURL()" />
<input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
<input type="button" value="读取文本文件" onclick="readAsText()" />
div>
<div id="result" name="result">div>
<script type="text/javascript">
var result = document.getElementById("result");
var file = document.getElementById("file");
//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
result.InnerHTML="你的浏览器不支持FileReader接口！
";
// alert('你的浏览器不支持FileReader接口！')
// 并把选择控件设置成不可操作
file.setAttribute("disabled", "disabled");
}
// 将文件读取为DataURL
function readAsDataURL(){
// 检验是否为图像文件
var file = document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type)){
alert("看清楚，这个需要图片！");
return false;
}
var reader = new FileReader(); // 实例化一个FileReader接口
reader.readAsDataURL(file); // 调用FileReader接口的readAsDataURl方法，将文件以Data URL形式读入页面
reader.onload = function(e){ // 绑定onload事件，当读取完成时触发
var result=document.getElementById("result");
//显示文件
result.innerHTML='
this.result +'" alt="" />';
}
}
// 将文件读取为二进制编码
function readAsBinaryString(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.readAsBinaryString(file); // 将文件以二进制形式读入页面
reader.onload = function(e){
var result = document.getElementById("result");
result.innerHTML = this.result; // 显示选中的文件
}
}
// 将文件读取为文本
function readAsText(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.readAsText(file); // 将文件以文本形式读入页面
reader.onload = function(e){
var result = document.getElementById("result");
result.innerHTML=this.result; // 显示文件
}
}
script>
body>
html>运行截图：
实例-2：
在线演示-demo
"text/html; charset=UTF-8" http-equiv="Content-Type" />
Image preview example<<span class="hljs-regexp">/title>
<script type="text/javascript</span><span class="hljs-string">">
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)<span class="hljs-variable">$/</span>i;
oFReader.onload = function (oFREvent) {
document.getElementById("</span>uploadPreview<span class="hljs-string">").src = oFREvent.target.result;
};
function loadImageFile() {
if (document.getElementById("</span>uploadImage<span class="hljs-string">").files.length === 0) { return; }
var oFile = document.getElementById("</span>uploadImage<span class="hljs-string">").files[0];
if (!rFilter.test(oFile.type)) { alert("</span>You must <span class="hljs-keyword">select</span> a valid image file!<span class="hljs-string">"); return; }
oFReader.readAsDataURL(oFile);
}
</script>
</head>
<body onload="</span>loadImageFile();<span class="hljs-string">">
<form name="</span>uploadForm<span class="hljs-string">">
<table>
<tbody>
<tr>
<td><img id="</span>uploadPreview<span class="hljs-string">" style="</span>width: <span class="hljs-number">100</span>px; height: <span class="hljs-number">100</span>px;<span class="hljs-string">" src="</span>data:image/svg+xml,<span class="hljs-variable">%3C</span><span class="hljs-variable">%3Fxml</span><span class="hljs-variable">%20version</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%221</span>.<span class="hljs-number">0</span><span class="hljs-variable">%22</span><span class="hljs-variable">%3F</span><span class="hljs-variable">%3E</span><span class="hljs-variable">%0A</span><span class="hljs-variable">%3Csvg</span><span class="hljs-variable">%20width</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22153</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20height</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22153</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20xmlns</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22http</span><span class="hljs-variable">%3A</span>//www.w3.org/<span class="hljs-number">2000</span>/svg<span class="hljs-variable">%22</span><span class="hljs-variable">%3E</span><span class="hljs-variable">%0A</span><span class="hljs-variable">%20</span><span class="hljs-variable">%3Cg</span><span class="hljs-variable">%3E</span><span class="hljs-variable">%0A</span><span class="hljs-variable">%20</span><span class="hljs-variable">%20</span><span class="hljs-variable">%3Ctitle</span><span class="hljs-variable">%3ENo</span><span class="hljs-variable">%20image</span><span class="hljs-variable">%3C</span>/title<span class="hljs-variable">%3E</span><span class="hljs-variable">%0A</span><span class="hljs-variable">%20</span><span class="hljs-variable">%20</span><span class="hljs-variable">%3Crect</span><span class="hljs-variable">%20id</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22externRect</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20height</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22150</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20width</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22150</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20y</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%221</span>.<span class="hljs-number">5</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20x</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%221</span>.<span class="hljs-number">500024</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20stroke</span>-width<span class="hljs-variable">%3D</span><span class="hljs-variable">%223</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20stroke</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22</span><span class="hljs-variable">%23666666</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20fill</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22</span><span class="hljs-variable">%23e1e1e1</span><span class="hljs-variable">%22</span>/<span class="hljs-variable">%3E</span><span class="hljs-variable">%0A</span><span class="hljs-variable">%20</span><span class="hljs-variable">%20</span><span class="hljs-variable">%3Ctext</span><span class="hljs-variable">%20transform</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22matrix</span><span class="hljs-variable">%286</span>.<span class="hljs-number">66667</span><span class="hljs-variable">%2C</span><span class="hljs-variable">%200</span><span class="hljs-variable">%2C</span><span class="hljs-variable">%200</span><span class="hljs-variable">%2C</span><span class="hljs-variable">%206</span>.<span class="hljs-number">66667</span><span class="hljs-variable">%2C</span><span class="hljs-variable">%20</span>-<span class="hljs-number">960.5</span><span class="hljs-variable">%2C</span><span class="hljs-variable">%20</span>-<span class="hljs-number">1099.33</span><span class="hljs-variable">%29</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20xml</span><span class="hljs-variable">%3Aspace</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22preserve</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20text</span>-anchor<span class="hljs-variable">%3D</span><span class="hljs-variable">%22middle</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20font</span>-family<span class="hljs-variable">%3D</span><span class="hljs-variable">%22Fantasy</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20font</span>-size<span class="hljs-variable">%3D</span><span class="hljs-variable">%2214</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20id</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22questionMark</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20y</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22181</span>.<span class="hljs-number">249569</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20x</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22155</span>.<span class="hljs-number">549819</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20stroke</span>-width<span class="hljs-variable">%3D</span><span class="hljs-variable">%220</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20stroke</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22</span><span class="hljs-variable">%23666666</span><span class="hljs-variable">%22</span><span class="hljs-variable">%20fill</span><span class="hljs-variable">%3D</span><span class="hljs-variable">%22</span><span class="hljs-variable">%23000000</span><span class="hljs-variable">%22</span><span class="hljs-variable">%3E</span><span class="hljs-variable">%3F</span><span class="hljs-variable">%3C</span>/text<span class="hljs-variable">%3E</span><span class="hljs-variable">%0A</span><span class="hljs-variable">%20</span><span class="hljs-variable">%3C</span>/g<span class="hljs-variable">%3E</span><span class="hljs-variable">%0A</span><span class="hljs-variable">%3C</span>/svg<span class="hljs-variable">%3E</span><span class="hljs-string">" alt="</span>Image preview<span class="hljs-string">" /></td>
<td><input id="</span>uploadImage<span class="hljs-string">" type="</span>file<span class="hljs-string">" name="</span>myPhoto<span class="hljs-string">" onchange="</span>loadImageFile();<span class="hljs-string">" /></td>
</tr>
</tbody>
</table>
<p><input type="</span>submit<span class="hljs-string">" value="</span>Send<span class="hljs-string">" /></p>
</form>
</body>
</html></span></code></pre>
<p>运行截图： <br> <a href="http://img.e-com-net.com/image/info8/2337a5f639f047939bf0b8f5cc76ad11.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2337a5f639f047939bf0b8f5cc76ad11.jpg" alt="Web API接口 FileReader学习笔记_第6张图片" title="" width="650" height="403" style="border:1px solid black;"></a></p>
<blockquote>
<p>注: IE10以下的版本不支持FileReader()构造函数， 不过可以利用滤镜来兼容旧版本的IE</p>
</blockquote>
<p><strong>实例-3： 兼容IE的图片本地预览</strong>. <br> 在线演示——Demo</p>
<pre class="prettyprint"><code class=" hljs xml"><span class="hljs-doctype"><!doctype html></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"Content-Type"</span> /></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span>Image preview example<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
<span class="hljs-id">#imagePreview</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">160</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">120</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> left</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">filter</span>:<span class="hljs-value"> progid:DXImageTransform.Microsoft.<span class="hljs-function">AlphaImageLoader(sizingMethod=scale)</span></span></span>;
<span class="hljs-rule">}</span></span>
</span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"imagePreview"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">form</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"uploadForm"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"imageInput"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"file"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"myPhoto"</span> <span class="hljs-attribute">onchange</span>=<span class="hljs-value">"loadImageFile();"</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"submit"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"Send"</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">form</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
<span class="hljs-keyword">var</span> loadImageFile = (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
<span class="hljs-keyword">if</span> (window.FileReader) {
<span class="hljs-keyword">var</span> oPreviewImg = <span class="hljs-literal">null</span>, oFReader = <span class="hljs-keyword">new</span> window.FileReader(),
rFilter = <span class="hljs-regexp">/^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i</span>;
oFReader.onload = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(oFREvent)</span> {</span>
<span class="hljs-keyword">if</span> (!oPreviewImg) {
<span class="hljs-keyword">var</span> newPreview = document.getElementById(<span class="hljs-string">"imagePreview"</span>);
oPreviewImg = <span class="hljs-keyword">new</span> Image();
oPreviewImg.style.width = (newPreview.offsetWidth).toString() + <span class="hljs-string">"px"</span>;
oPreviewImg.style.height = (newPreview.offsetHeight).toString() + <span class="hljs-string">"px"</span>;
newPreview.appendChild(oPreviewImg);
}
oPreviewImg.src = oFREvent.target.result;
};
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
<span class="hljs-keyword">var</span> aFiles = document.getElementById(<span class="hljs-string">"imageInput"</span>).files;
<span class="hljs-keyword">if</span> (aFiles.length === <span class="hljs-number">0</span>) { <span class="hljs-keyword">return</span>; }
<span class="hljs-keyword">if</span> (!rFilter.test(aFiles[<span class="hljs-number">0</span>].type)) { alert(<span class="hljs-string">"You must select a valid image file!"</span>); <span class="hljs-keyword">return</span>; }
oFReader.readAsDataURL(aFiles[<span class="hljs-number">0</span>]);
}
}
<span class="hljs-keyword">if</span> (navigator.appName === <span class="hljs-string">"Microsoft Internet Explorer"</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
document.getElementById(<span class="hljs-string">"imagePreview"</span>).filters.item(<span class="hljs-string">"DXImageTransform.Microsoft.AlphaImageLoader"</span>).src = document.getElementById(<span class="hljs-string">"imageInput"</span>).value;
}
}
})();
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code></pre>
<p>运行截图： <br> <a href="http://img.e-com-net.com/image/info8/2b5023a5472d4306896b77d7c9d0e5c1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2b5023a5472d4306896b77d7c9d0e5c1.jpg" alt="Web API接口 FileReader学习笔记_第7张图片" title="" width="650" height="390" style="border:1px solid black;"></a></p>
<p>参考阅读：</p>
<ul>
<li>HTML5学习之FileReader接口</li>
<li>HTML5之FileReader的使用</li>
<li>Web API接口——FileReader</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1296735670609453056"></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,HTML5)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1950232820773351424.htm"
title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a>
<span class="text-muted">good2know</span>
<div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div>
</li>
<li><a href="/article/1950194742100815872.htm"
title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a>
<span class="text-muted"></span>
<div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div>
</li>
<li><a href="/article/1950144218282389504.htm"
title="为什么学习Web前端一定要掌握JavaScript？" target="_blank">为什么学习Web前端一定要掌握JavaScript？</a>
<span class="text-muted">web前端学习指南</span>
<div>为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。</div>
</li>
<li><a href="/article/1950130692448907264.htm"
title="Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录" target="_blank">Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录</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/vue.js/1.htm">vue.js</a>
<div>1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非</div>
</li>
<li><a href="/article/1950114810557427712.htm"
title="12. 什么是事件委托" target="_blank">12. 什么是事件委托</a>
<span class="text-muted">yqcoder</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
<div>总结事件委托（EventDelegation）是JavaScript中一种重要的事件处理机制，它利用了事件冒泡的特性，将事件的处理程序绑定到父元素或祖先元素上，而不是直接绑定到具体的子元素上。什么是事件委托？事件冒泡：在DOM中，事件通常会从触发元素开始，然后逐级向上冒泡到其父元素、祖先元素，直到window对象。核心思想：事件委托的核心思想是利用事件冒泡机制，在父元素上监听事件，而不是在每个子元</div>
</li>
<li><a href="/article/1950104727928762368.htm"
title="震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！" target="_blank">震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！</a>
<span class="text-muted">coding随想</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/html5/1.htm">html5</a>
<div>一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入</div>
</li>
<li><a href="/article/1950100184717389824.htm"
title="11. HTML 中 DOCTYPE 的作用" target="_blank">11. HTML 中 DOCTYPE 的作用</a>
<span class="text-muted">yqcoder</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-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>总结H5的声明HTML5的DOCTYPE声明HTML5中的声明用于告诉浏览器当前文档使用的是HTML5的文档类型。它必须是文档中的第一行内容（在任何HTML标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE的作用触发标准模式：DOCTYPE声明的主要作用是让浏览器以标准模式（StandardsMode）来解析和渲染页面，而不是以兼容模式（QuirksMode）。兼容性：在没有DOCT</div>
</li>
<li><a href="/article/1950075480849838080.htm"
title="关于前端的性能优化" target="_blank">关于前端的性能优化</a>
<span class="text-muted"></span>
<div>性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C</div>
</li>
<li><a href="/article/1950074093608955904.htm"
title="时间组件库Day.js那些事" target="_blank">时间组件库Day.js那些事</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%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.什么是Day.jsDay.js是一个轻量级，易于使用的JavaScript日期库，提供了强大的日期和时间处理功能，与Moment.js的API设计相似，但具有更高的性能和更小的体积。Day.js官网https://day.js.org/docs/zh-CN/installation/installation2.优势a.特点轻量级：Dayjs的压缩后大小只有2KB左右，远小于Moment</div>
</li>
<li><a href="/article/1950071066281963520.htm"
title="JavaScript正则表达式去除括号但保留内容与去除括号与内容" target="_blank">JavaScript正则表达式去除括号但保留内容与去除括号与内容</a>
<span class="text-muted">Selicens</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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>
<div>项目上碰到一个需求，是取多个递增文件的文件名，类似于test(1).txt、test(2).txt，但是不需要括号，只要test1、test2这种格式，最开始想到的办法就是js里的replace替换，先上一个比较笨但是也能实现效果的例子letname="test(1).txt"letdata=name.split('.')[0].replace('(','').replace(')','')con</div>
</li>
<li><a href="/article/1950042324155297792.htm"
title="网络安全第14集" target="_blank">网络安全第14集</a>
<span class="text-muted">不灭锦鲤</span>
<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/%E5%AE%89%E5%85%A8/1.htm">安全</a>
<div>前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后</div>
</li>
<li><a href="/article/1950040812469415936.htm"
title="25年不倒的“犀牛书“：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？" target="_blank">25年不倒的“犀牛书“：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？</a>
<span class="text-muted">阿蒙Armon</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>25年不倒的"犀牛书"：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？当一本技术书能连续畅销25年，历经7次迭代仍稳坐领域第一梯队，它必然藏着超越时代的硬实力。《JavaScript权威指南（原书第7版）》就是这样一部传奇——豆瓣9.4分的封神之作，程序员口中的"犀牛书"，从网景时代到ES2020，它始终是JavaScript开发者的终极参考书。如果你还在为原型链、闭包、异步编</div>
</li>
<li><a href="/article/1949995914462556160.htm"
title="什么是JSON，如何与Java对象转化" target="_blank">什么是JSON，如何与Java对象转化</a>
<span class="text-muted">doublez234</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</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>
<div>JSON概念JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它易于人阅读和编写，同时也易于机器解析和生成。JSON基于JavaScript（ECMAScript（欧洲计算机协会制定的js规范））编程语言的一个子集，但它是一种独立于语言的数据格式，被广泛应用于各种编程语言和平台之间的数据交换。JSON的主要特点：轻量级：JSON格式非常简洁，只包含必要的数据信</div>
</li>
<li><a href="/article/1949975484238458880.htm"
title="APP开发入门：了解主流的编程语言" target="_blank">APP开发入门：了解主流的编程语言</a>
<span class="text-muted">agi大模型</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E4%B8%9A%E4%B8%8E%E8%81%8C%E5%9C%BA/1.htm">职业与职场</a><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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a>
<div>前言在过去的几年里，有许多程序员开始学习和使用编程语言。这其中包括C、C++、Java和Python。尽管有许多语言可供选择，但大多数程序员都会选择最容易学习的编程语言。如今，有很多编程语言供选择。程序员们在学习这些语言时可以自由地选择他们喜欢的方式，因为他们的目标是构建任何软件，而不仅仅是创建一个应用程序。你可以在Linux上学习C/C++、Java、Python、C#或JavaScript，你</div>
</li>
<li><a href="/article/1949928456414359552.htm"
title="探秘CommonJS：Node.js模块化核心解析" target="_blank">探秘CommonJS：Node.js模块化核心解析</a>
<span class="text-muted"></span>
<div>CommonJS是JavaScript的模块化规范，主要应用于服务器端环境（尤其是Node.js），其核心目标是解决代码组织、依赖管理和作用域隔离问题。以下是其核心要点：一、核心特性同步加载模块通过require()同步加载并执行，后续代码需等待模块加载完成后执行，适用于I/O快速的服务器环境（如本地文件读取）。作用域隔离每个文件视为独立模块，模块内定义的变量、函数默认私有（不污染全局作用域），仅</div>
</li>
<li><a href="/article/1949926944988524544.htm"
title="壹脉销客AI电子名片源码核心架构" target="_blank">壹脉销客AI电子名片源码核心架构</a>
<span class="text-muted"></span>
<div>为什么选择源码部署AI电子名片？在数字化转型浪潮中，越来越多的企业意识到拥有自主可控的电子名片系统的重要性。源码部署相比SaaS服务具有三大核心优势：数据完全自主-客户信息存储在企业自有服务器深度定制自由-可根据业务需求二次开发长期成本优化-一次部署永久使用壹脉销客AI电子名片源码核心架构壹脉销客提供的企业级电子名片解决方案采用前后端分离架构：前端技术栈（小程序端）javascript//小程序a</div>
</li>
<li><a href="/article/1949918371738873856.htm"
title="vue 进入一个页面，然后离开这个页面他就重新加载" target="_blank">vue 进入一个页面，然后离开这个页面他就重新加载</a>
<span class="text-muted">Java&Develop</span>
<a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
<div>vue进入一个页面，然后离开这个页面他就重新加载这个代码导致的注释即可window.location.reload();window.location.reload()是JavaScript中的一个方法，用于强制刷新当前页面（重新加载页面内容）。其作用类似于用户手动点击浏览器的刷新按钮，但可以通过代码精确触发。核心作用：刷新页面重新加载当前显示的文档（即重新请求当前URL的资源）。可选参数控制缓存</div>
</li>
<li><a href="/article/1949898570761039872.htm"
title="[python][flask]flask静态资源" target="_blank">[python][flask]flask静态资源</a>
<span class="text-muted"></span>
<div>在Flask中，静态资源（如图片、CSS文件、JavaScript文件等）通常存储在项目的static文件夹中。Flask会自动为静态资源提供服务，使得你可以通过URL访问这些文件。以下是关于Flask中静态资源的使用方法和一些高级配置。1.默认静态文件夹Flask默认会将项目根目录下的static文件夹作为静态资源目录。例如，如果你的项目结构如下：my_flask_app/│├──app.py├</div>
</li>
<li><a href="/article/1949895918400630784.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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>HTML5的新特性和CSS3的新特性引入了一系列语义化标签使文档结构更加清晰(header,nav,aside,article,footer,section)，多媒体支持video,audio，Canvas绘图div上下居中对齐的几种方式第一种：flex布局display:flex;justify-content:center;/*水平居中/align-items:center;/垂直居中/第二种</div>
</li>
<li><a href="/article/1949894278360657920.htm"
title="JavaScript对象与Math对象完全指南" target="_blank">JavaScript对象与Math对象完全指南</a>
<span class="text-muted">hui函数</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对象与Math对象完全指南对象基础概念与操作对象是什么？数据集合：包含相关数据和功能的容器结构组成：属性：描述对象特征的变量（名词性）方法：对象可执行的操作（动词性，本质是函数）对象创建与访问//创建对象letperson={ //属性 name:"张三", age:28, profession:"软件工程师", //方法 introduce(){ return`大家好，我</div>
</li>
<li><a href="/article/1949892133389398016.htm"
title="深入理解JavaScript作用域与编译过程" target="_blank">深入理解JavaScript作用域与编译过程</a>
<span class="text-muted">君子心理</span>
<a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F/1.htm">作用域</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%AF%91/1.htm">编译</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8F%98%E9%87%8F%E6%8F%90%E5%8D%87/1.htm">变量提升</a><a class="tag" taget="_blank" href="/search/%E9%97%AD%E5%8C%85/1.htm">闭包</a>
<div>背景简介在编程领域，作用域和编译过程是理解语言机制的关键概念。JavaScript作为一种广泛使用的语言，其作用域规则和编译机制尤其值得我们深入探讨。本文将基于《你不懂JS》系列书籍中的相关内容，解析JavaScript的作用域系统、函数闭包以及编译过程，帮助读者获得更深层次的理解。作用域是什么？在JavaScript中，作用域定义了变量和函数的可访问范围。编写程序时，我们会频繁使用变量来存储和操</div>
</li>
<li><a href="/article/1949892007069544448.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%AF%B9%E8%B1%A1/1.htm">对象</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E5%9E%8B%E9%93%BE/1.htm">原型链</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F/1.htm">作用域</a>
<div>掌握JavaScript对象与函数：深入理解原型与作用域背景简介在探索JavaScript的世界时，我们经常遇到对象和函数这两个核心概念。对象是JavaScript中最为基本的结构之一，而函数则是实现代码复用、封装和模块化的主要工具。本文将基于给定的书籍章节内容，深入探讨对象的更新机制、原型继承以及函数的多样性及其调用模式，同时分享对全局变量使用的思考。更新对象在JavaScript中，对象的属性</div>
</li>
<li><a href="/article/1949891377278021632.htm"
title="JavaScript函数使用模式与作用域的深入解析" target="_blank">JavaScript函数使用模式与作用域的深入解析</a>
<span class="text-muted"></span>
<div>JavaScript函数使用模式与作用域的深入解析JavaScript作为一门灵活且功能强大的编程语言，其函数的使用和作用域的特性是学习和开发中的关键点。本篇博客将深入解析JavaScript函数的几种使用模式，以及作用域的重要概念。构造器模式在JavaScript中，函数可以作为构造器（constructor）使用，当用new关键字调用时，函数会返回一个新对象。为了区分构造器函数和其他普通函数，</div>
</li>
<li><a href="/article/1949890620248092672.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%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编程中，函数是一个核心概念，它不仅能帮助我们将代码组织得更加清晰，还能提高代码的复用性。理解函数的定义与调用、掌握作用域的概念，对于编写高效和可维护的代码至关重要。本文将通过创建一个计时器应用的案例，帮助你全面掌握JavaScript中的函数和作用域知识。任务目标通过本教程，你将学习并掌握：函数的声明与调用函数表达式的使用作用域的概念及其在函数中的应用闭包的原理及实践学习内容</div>
</li>
<li><a href="/article/1949887845539835904.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/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E4%B8%BA/1.htm">行为</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F/1.htm">作用域</a><a class="tag" taget="_blank" href="/search/%E9%97%AD%E5%8C%85/1.htm">闭包</a><a class="tag" taget="_blank" href="/search/%E9%80%92%E5%BD%92/1.htm">递归</a><a class="tag" taget="_blank" href="/search/%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/1.htm">作用域链</a>
<div>Hi，我是布兰妮甜！JavaScript是一种动态类型语言，它支持面向对象编程和函数式编程。函数是JavaScript的核心组成部分之一，而作用域则决定了变量的可见性和生命周期。本文将详细介绍JavaScript中的函数定义、调用、参数传递、闭包、递归以及作用域链的概念。文章目录一、函数基础二、作用域基础三、闭包四、递归五、作用域链六、总结一、函数基础1.定义函数函数声明函数可以通过函数声明的方式</div>
</li>
<li><a href="/article/1949884694208245760.htm"
title="深入理解作用域【JavaScript】" target="_blank">深入理解作用域【JavaScript】</a>
<span class="text-muted">陆仟</span>
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">Web前端开发</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>一、作用域的内部原理JavaScript的作用域机制是理解变量如何被访问和存储的重要概念。下面详细介绍作用域的内部原理，包括编译、执行、查询、嵌套和异常处理这五个步骤。1.编译在JavaScript的执行过程中，首要的步骤是编译。尽管JavaScript是解释性语言，但现代JavaScript引擎（如V8）在执行代码前会先进行编译。编译阶段主要完成以下几项工作：词法分析：将源代码分解成语法单元（t</div>
</li>
<li><a href="/article/1949875239387197440.htm"
title="即便你已经在浏览器中启用了 JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由 JavaScript 冲突" target="_blank">即便你已经在浏览器中启用了 JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由 JavaScript 冲突</a>
<span class="text-muted"></span>
<div>即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干</div>
</li>
<li><a href="/article/1949872340728868864.htm"
title="技术文章大纲：Anaconda插件开发挑战赛引言介绍Anaconda在数据科学和PythonUH开发中的重要性" target="_blank">技术文章大纲：Anaconda插件开发挑战赛引言介绍Anaconda在数据科学和PythonUH开发中的重要性</a>
<span class="text-muted">aadwje</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a>
<div>即便你已经在浏览器中启用了JavaScript有时网页依然可能出现功能失效、内容加载不完整或按钮点击无反应等问题。这些问题通常由JavaScript冲突、浏览器设置不当或插件干扰等原因引起。作为HostEase的技术人员我将为你提供一系列简单有效的JavaScript故障排除方法帮助你快速定位并解决这些问题。禁用可能干扰JavaScript的浏览器扩展,广告拦截器,安全插件或某些脚本管理器可能会干</div>
</li>
<li><a href="/article/1949803748612173824.htm"
title="深入分析 Node.js 的 V8 引擎如何在内部处理 JavaScript 代码，包括内存管理和垃圾回收机制。" target="_blank">深入分析 Node.js 的 V8 引擎如何在内部处理 JavaScript 代码，包括内存管理和垃圾回收机制。</a>
<span class="text-muted">海派程序猿</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.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>
<div>各位观众老爷们，晚上好！今天咱们就来聊聊Node.js的大心脏——V8引擎，看看它到底是怎么把咱们写的JavaScript代码给“消化”掉的。别害怕，今天咱不搞那些生涩难懂的学院派理论，尽量用大白话，外加一些“栗子”，保证让你听得津津有味。V8引擎：JavaScript的超级翻译官首先，简单介绍一下V8。V8是Google开发的高性能JavaScript和WebAssembly引擎，用C++写的。</div>
</li>
<li><a href="/article/1949801101146517504.htm"
title="Tailwind CSS 响应式设计实战指南" target="_blank">Tailwind CSS 响应式设计实战指南</a>
<span class="text-muted">qcidyu</span>
<a class="tag" taget="_blank" href="/search/%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C/1.htm">用户体验</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96/1.htm">代码优化</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E4%BC%98%E5%85%88/1.htm">移动优先</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E5%B8%83%E5%B1%80/1.htm">网站布局</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/Tailwind/1.htm">Tailwind</a><a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/1.htm">响应式设计</a>
<div>title:TailwindCSS响应式设计实战指南date:2024/6/13updated:2024/6/13author:cmdragonexcerpt:这篇文章介绍了如何运用TailwindCSS框架创建响应式网页设计，涵盖博客、电商网站及企业官网的布局实例，包括头部导航、内容区域、侧边栏、页脚及轮播图等组件的响应式实现。同时，探讨了与JavaScript框架集成、CSS预处理器配合、设计</div>
</li>
<li><a href="/article/24.htm"
title="tomcat基础与部署发布" target="_blank">tomcat基础与部署发布</a>
<span class="text-muted">暗黑小菠萝</span>
<a class="tag" taget="_blank" href="/search/Tomcat+java+web/1.htm">Tomcat java web</a>
<div>从51cto搬家了，以后会更新在这里方便自己查看。
做项目一直用tomcat，都是配置到eclipse中使用，这几天有时间整理一下使用心得，有一些自己配置遇到的细节问题。
Tomcat：一个Servlets和JSP页面的容器，以提供网站服务。
一、Tomcat安装
安装方式：①运行.exe安装包
&n</div>
</li>
<li><a href="/article/151.htm"
title="网站架构发展的过程" target="_blank">网站架构发展的过程</a>
<span class="text-muted">ayaoxinchao</span>
<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%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E6%9E%B6%E6%9E%84/1.htm">网站架构</a>
<div>1.初始阶段网站架构：应用程序、数据库、文件等资源在同一个服务器上
2.应用服务和数据服务分离：应用服务器、数据库服务器、文件服务器
3.使用缓存改善网站性能：为应用服务器提供本地缓存，但受限于应用服务器的内存容量，可以使用专门的缓存服务器，提供分布式缓存服务器架构
4.使用应用服务器集群改善网站的并发处理能力：使用负载均衡调度服务器，将来自客户端浏览器的访问请求分发到应用服务器集群中的任何</div>
</li>
<li><a href="/article/278.htm"
title="[信息与安全]数据库的备份问题" target="_blank">[信息与安全]数据库的备份问题</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
<div>
如果你们建设的信息系统是采用中心-分支的模式,那么这里有一个问题
如果你的数据来自中心数据库,那么中心数据库如果出现故障,你的分支机构的数据如何保证安全呢?
是否应该在这种信息系统结构的基础上进行改造,容许分支机构的信息系统也备份一个中心数据库的文件呢?
&n</div>
</li>
<li><a href="/article/405.htm"
title="使用maven tomcat plugin插件debug关联源代码" target="_blank">使用maven tomcat plugin插件debug关联源代码</a>
<span class="text-muted">商人shang</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/debug/1.htm">debug</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E7%9C%8B%E6%BA%90%E7%A0%81/1.htm">查看源码</a><a class="tag" taget="_blank" href="/search/tomcat-plugin/1.htm">tomcat-plugin</a>
<div>*首先需要配置好'''maven-tomcat7-plugin'''，参见[[Maven开发Web项目]]的'''Tomcat'''部分。
*配置好后，在[[Eclipse]]中打开'''Debug Configurations'''界面，在'''Maven Build'''项下新建当前工程的调试。在'''Main'''选项卡中点击'''Browse Workspace...'''选择需要开发的</div>
</li>
<li><a href="/article/532.htm"
title="大访问量高并发" target="_blank">大访问量高并发</a>
<span class="text-muted">oloz</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E8%AE%BF%E9%97%AE%E9%87%8F%E9%AB%98%E5%B9%B6%E5%8F%91/1.htm">大访问量高并发</a>
<div>大访问量高并发的网站主要压力还是在于数据库的操作上，尽量避免频繁的请求数据库。下面简
要列出几点解决方案：
01、优化你的代码和查询语句，合理使用索引
02、使用缓存技术例如memcache、ecache将不经常变化的数据放入缓存之中
03、采用服务器集群、负载均衡分担大访问量高并发压力
04、数据读写分离
05、合理选用框架，合理架构(推荐分布式架构)。
</div>
</li>
<li><a href="/article/659.htm"
title="cache 服务器" target="_blank">cache 服务器</a>
<span class="text-muted">小猪猪08</span>
<a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a>
<div>Cache 即高速缓存.那么cache是怎么样提高系统性能与运行速度呢？是不是在任何情况下用cache都能提高性能？是不是cache用的越多就越好呢？我在近期开发的项目中有所体会，写下来当作总结也希望能跟大家一起探讨探讨，有错误的地方希望大家批评指正。
1.Cache 是怎么样工作的?
Cache 是分配在服务器上</div>
</li>
<li><a href="/article/786.htm"
title="mysql存储过程" target="_blank">mysql存储过程</a>
<span class="text-muted">香水浓</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>Description:插入大量测试数据
use xmpl;
drop procedure if exists mockup_test_data_sp;
create procedure mockup_test_data_sp(
in number_of_records int
)
begin
declare cnt int;
declare name varch</div>
</li>
<li><a href="/article/913.htm"
title="CSS的class、id、css文件名的常用命名规则" target="_blank">CSS的class、id、css文件名的常用命名规则</a>
<span class="text-muted">agevs</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div> CSS的class、id、css文件名的常用命名规则
(一)常用的CSS命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right </div>
</li>
<li><a href="/article/1040.htm"
title="全局数据源" target="_blank">全局数据源</a>
<span class="text-muted">AILIKES</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a><a class="tag" taget="_blank" href="/search/JNDI/1.htm">JNDI</a>
<div>实验目的：为了研究两个项目同时访问一个全局数据源的时候是创建了一个数据源对象，还是创建了两个数据源对象。
1：将diuid和mysql驱动包（druid-1.0.2.jar和mysql-connector-java-5.1.15.jar）copy至%TOMCAT_HOME%/lib下；2：配置数据源，将JNDI在%TOMCAT_HOME%/conf/context.xml中配置好,格式如下：&l</div>
</li>
<li><a href="/article/1167.htm"
title="MYSQL的随机查询的实现方法" target="_blank">MYSQL的随机查询的实现方法</a>
<span class="text-muted">baalwolf</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>MYSQL的随机抽取实现方法。举个例子，要从tablename表中随机提取一条记录，大家一般的写法就是：SELECT * FROM tablename ORDER BY RAND() LIMIT 1。但是，后来我查了一下MYSQL的官方手册，里面针对RAND()的提示大概意思就是，在ORDER BY从句里面不能使用RAND()函数，因为这样会导致数据列被多次扫描。但是在MYSQL 3.23版本中，</div>
</li>
<li><a href="/article/1294.htm"
title="JAVA的getBytes()方法" target="_blank">JAVA的getBytes()方法</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/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a>
<div> 在Java中，String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组。这个表示在不同OS下，返回的东西不一样！
String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示，如：
byte[] b_gbk = "</div>
</li>
<li><a href="/article/1421.htm"
title="AngularJS中操作Cookies" target="_blank">AngularJS中操作Cookies</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/Cookies/1.htm">Cookies</a>
<div> 如果你的应用足够大、足够复杂，那么你很快就会遇到这样一咱种情况：你需要在客户端存储一些状态信息，这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。
幸运的是，这种方式已经一去不复返了，在所有现代浏览器中几乎</div>
</li>
<li><a href="/article/1548.htm"
title="[Maven学习笔记五]Maven聚合和继承特性" target="_blank">[Maven学习笔记五]Maven聚合和继承特性</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
<div>Maven聚合
在实际的项目中，一个项目通常会划分为多个模块，为了说明问题，以用户登陆这个小web应用为例。通常一个web应用分为三个模块：
1. 模型和数据持久化层user-core,
2. 业务逻辑层user-service以
3. web展现层user-web，
user-service依赖于user-core
user-web依赖于user-core和use</div>
</li>
<li><a href="/article/1675.htm"
title="【JVM七】JVM知识点总结" target="_blank">【JVM七】JVM知识点总结</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a>
<div> 1. JVM运行模式
1.1 JVM运行时分为-server和-client两种模式，在32位机器上只有client模式的JVM。通常，64位的JVM默认都是使用server模式，因为server模式的JVM虽然启动慢点，但是，在运行过程，JVM会尽可能的进行优化
1.2 JVM分为三种字节码解释执行方式：mixed mode, interpret mode以及compiler </div>
</li>
<li><a href="/article/1802.htm"
title="linux下查看nginx、apache、mysql、php的编译参数" target="_blank">linux下查看nginx、apache、mysql、php的编译参数</a>
<span class="text-muted">ronin47</span>
<div>在linux平台下的应用，最流行的莫过于nginx、apache、mysql、php几个。而这几个常用的应用，在手工编译完以后，在其他一些情况下（如：新增模块），往往想要查看当初都使用了那些参数进行的编译。这时候就可以利用以下方法查看。
1、nginx
[root@361way ~]# /App/nginx/sbin/nginx -V
nginx: nginx version: nginx/</div>
</li>
<li><a href="/article/1929.htm"
title="unity中运用Resources.Load的方法？" target="_blank">unity中运用Resources.Load的方法？</a>
<span class="text-muted">brotherlamp</span>
<a class="tag" taget="_blank" href="/search/unity%E8%A7%86%E9%A2%91/1.htm">unity视频</a><a class="tag" taget="_blank" href="/search/unity%E8%B5%84%E6%96%99/1.htm">unity资料</a><a class="tag" taget="_blank" href="/search/unity%E8%87%AA%E5%AD%A6/1.htm">unity自学</a><a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/unity%E6%95%99%E7%A8%8B/1.htm">unity教程</a>
<div>问：unity中运用Resources.Load的方法？
答：Resources.Load是unity本地动态加载资本所用的方法,也即是你想动态加载的时分才用到它,比方枪弹,特效,某些实时替换的图像什么的,主张此文件夹不要放太多东西,在打包的时分,它会独自把里边的一切东西都会集打包到一同,不论里边有没有你用的东西,所以大多数资本应该是自个建文件放置
1、unity实时替换的物体即是依据环境条件</div>
</li>
<li><a href="/article/2056.htm"
title="线段树-入门" target="_blank">线段树-入门</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><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E6%AE%B5%E6%A0%91/1.htm">线段树</a>
<div>
/**
* 线段树入门
* 问题：已知线段[2,5] [4,6] [0,7]；求点2,4,7分别出现了多少次
* 以下代码建立的线段树用链表来保存，且树的叶子结点类似[i,i]
*
* 参考链接：http://hi.baidu.com/semluhiigubbqvq/item/be736a33a8864789f4e4ad18
* @author lijinna</div>
</li>
<li><a href="/article/2183.htm"
title="全选与反选" target="_blank">全选与反选</a>
<span class="text-muted">chicony</span>
<a class="tag" taget="_blank" href="/search/%E5%85%A8%E9%80%89/1.htm">全选</a>
<div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>全选与反选</title>
</div>
</li>
<li><a href="/article/2310.htm"
title="vim一些简单记录" target="_blank">vim一些简单记录</a>
<span class="text-muted">chenchao051</span>
<a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
<div>mac在/usr/share/vim/vimrc linux在/etc/vimrc
1、问：后退键不能删除数据，不能往后退怎么办？
答：在vimrc中加入set backspace=2
2、问：如何控制tab键的缩进？
答：在vimrc中加入set tabstop=4 (任何</div>
</li>
<li><a href="/article/2437.htm"
title="Sublime Text 快捷键" target="_blank">Sublime Text 快捷键</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a><a class="tag" taget="_blank" href="/search/sublime/1.htm">sublime</a>
<div>[size=large][/size]Sublime Text快捷键：Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：</div>
</li>
<li><a href="/article/2564.htm"
title="php 引用(&)详解" target="_blank">php 引用(&)详解</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a>
<div>在PHP 中引用的意思是：不同的名字访问同一个变量内容. 与Ｃ语言中的指针是有差别的．Ｃ语言中的指针里面存储的是变量的内容在内存中存放的地址 变量的引用 PHP 的引用允许你用两个变量来指向同一个内容 复制代码代码如下:
<?
$a="ABC";
$b =&$a;
echo</div>
</li>
<li><a href="/article/2691.htm"
title="SVN中trunk,branches,tags用法详解" target="_blank">SVN中trunk,branches,tags用法详解</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a>
<div>Subversion有一个很标准的目录结构，是这样的。比如项目是proj，svn地址为svn://proj/，那么标准的svn布局是svn://proj/|+-trunk+-branches+-tags这是一个标准的布局，trunk为主开发目录，branches为分支开发目录，tags为tag存档目录（不允许修改）。但是具体这几个目录应该如何使用，svn并没有明确的规范，更多的还是用户自己的习惯。</div>
</li>
<li><a href="/article/2818.htm"
title="对软件设计的思考" target="_blank">对软件设计的思考</a>
<span class="text-muted">e200702084</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/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%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a>
<div>软件设计的宏观与微观
软件开发是一种高智商的开发活动。一个优秀的软件设计人员不仅要从宏观上把握软件之间的开发，也要从微观上把握软件之间的开发。宏观上，可以应用面向对象设计，采用流行的SSH架构，采用web层，业务逻辑层，持久层分层架构。采用设计模式提供系统的健壮性和可维护性。微观上，对于一个类，甚至方法的调用，从计算机的角度模拟程序的运行情况。了解内存分配，参数传</div>
</li>
<li><a href="/article/2945.htm"
title="同步、异步、阻塞、非阻塞" target="_blank">同步、异步、阻塞、非阻塞</a>
<span class="text-muted">geeksun</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%9E%E9%98%BB%E5%A1%9E/1.htm">非阻塞</a>
<div>同步、异步、阻塞、非阻塞这几个概念有时有点混淆，在此文试图解释一下。
同步：发出方法调用后，当没有返回结果，当前线程会一直在等待（阻塞）状态。
场景：打电话，营业厅窗口办业务、B/S架构的http请求-响应模式。
异步：方法调用后不立即返回结果，调用结果通过状态、通知或回调通知方法调用者或接收者。异步方法调用后，当前线程不会阻塞，会继续执行其他任务。
实现：</div>
</li>
<li><a href="/article/3072.htm"
title="Reverse SSH Tunnel 反向打洞實錄" target="_blank">Reverse SSH Tunnel 反向打洞實錄</a>
<span class="text-muted">hongtoushizi</span>
<a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a>
<div>實際的操作步驟：
# 首先，在客戶那理的機器下指令連回我們自己的 Server，並設定自己 Server 上的 12345 port 會對應到幾器上的 SSH port
ssh -NfR 12345:localhost:22 fred@myhost.com
# 然後在 myhost 的機器上連自己的 12345 port，就可以連回在客戶那的機器
ssh localhost -p 1</div>
</li>
<li><a href="/article/3199.htm"
title="Hibernate中的缓存" target="_blank">Hibernate中的缓存</a>
<span class="text-muted">Josh_Persistence</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%80%E7%BA%A7%E7%BC%93%E5%AD%98/1.htm">一级缓存</a><a class="tag" taget="_blank" href="/search/Hiberante%E7%BC%93%E5%AD%98/1.htm">Hiberante缓存</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2%E7%BC%93%E5%AD%98/1.htm">查询缓存</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BA%A7%E7%BC%93%E5%AD%98/1.htm">二级缓存</a>
<div>Hibernate中的缓存
一、Hiberante中常见的三大缓存：一级缓存，二级缓存和查询缓存。
Hibernate中提供了两级Cache，第一级别的缓存是Session级别的缓存，它是属于事务范围的缓存。这一级别的缓存是由hibernate管理的，一般情况下无需进行干预；第二级别的缓存是SessionFactory级别的缓存，它是属于进程范围或群集范围的缓存。这一级别的缓存</div>
</li>
<li><a href="/article/3326.htm"
title="对象关系行为模式之延迟加载" target="_blank">对象关系行为模式之延迟加载</a>
<span class="text-muted">home198979</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD/1.htm">延迟加载</a>
<div>形象化设计模式实战 HELLO!架构
一、概念
Lazy Load：一个对象，它虽然不包含所需要的所有数据，但是知道怎么获取这些数据。
延迟加载貌似很简单，就是在数据需要时再从数据库获取，减少数据库的消耗。但这其中还是有不少技巧的。
二、实现延迟加载
实现Lazy Load主要有四种方法：延迟初始化、虚</div>
</li>
<li><a href="/article/3453.htm"
title="xml 验证" target="_blank">xml 验证</a>
<span class="text-muted">pengfeicao521</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/xml%E8%A7%A3%E6%9E%90/1.htm">xml解析</a>
<div>有些字符，xml不能识别，用jdom或者dom4j解析的时候就报错
public static void testPattern() {
// 含有非法字符的串
String str = "Jamey친ÑԂ</div>
</li>
<li><a href="/article/3580.htm"
title="div设置半透明效果" target="_blank">div设置半透明效果</a>
<span class="text-muted">spjich</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%8D%8A%E9%80%8F%E6%98%8E/1.htm">半透明</a>
<div>为div设置如下样式：
div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}
说明：
1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认2、-moz-opaci</div>
</li>
<li><a href="/article/3707.htm"
title="你真的了解单例模式么？" target="_blank">你真的了解单例模式么？</a>
<span class="text-muted">w574240966</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a>
<div> 单例模式，很多初学者认为单例模式很简单，并且认为自己已经掌握了这种设计模式。但事实上，你真的了解单例模式了么。
一，单例模式的5中写法。（回字的四种写法，哈哈。）
1，懒汉式
（1）线程不安全的懒汉式
public cla</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>