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/1835509897106649088.htm"
title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
<span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
</li>
<li><a href="/article/1835498925755297792.htm"
title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
<span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
<div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
</li>
<li><a href="/article/1835496149843275776.htm"
title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
<span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
<div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
</li>
<li><a href="/article/1835496148601761792.htm"
title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
<span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
</li>
<li><a href="/article/1835492740536823808.htm"
title="node.js学习" target="_blank">node.js学习</a>
<span class="text-muted">小猿L</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
<div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div>
</li>
<li><a href="/article/1835448239864770560.htm"
title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a>
<span class="text-muted">跳房子的前端</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div>
</li>
<li><a href="/article/1835428948339683328.htm"
title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</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%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</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中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div>
</li>
<li><a href="/article/1835419870070665216.htm"
title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a>
<span class="text-muted">hai40587</span>
<a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
<div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div>
</li>
<li><a href="/article/1835383919906746368.htm"
title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a>
<span class="text-muted">海淀萌狗</span>
<div>-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i</div>
</li>
<li><a href="/article/1835373236217540608.htm"
title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a>
<span class="text-muted">马小蜗</span>
<div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div>
</li>
<li><a href="/article/1835372727582683136.htm"
title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a>
<span class="text-muted">红匣子实力推荐</span>
<div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div>
</li>
<li><a href="/article/1835360244646113280.htm"
title="JavaScript中秋快乐！" target="_blank">JavaScript中秋快乐！</a>
<span class="text-muted">Q_w7742</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>我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh</div>
</li>
<li><a href="/article/1835359727924637696.htm"
title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a>
<span class="text-muted">听你讲故事啊</span>
<div>动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin</div>
</li>
<li><a href="/article/1835354700392787968.htm"
title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a>
<span class="text-muted">张某布响丸辣</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
<div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div>
</li>
<li><a href="/article/1835354447627251712.htm"
title="前端知识点" target="_blank">前端知识点</a>
<span class="text-muted">ZhangTao_zata</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div>
</li>
<li><a href="/article/1835331376895848448.htm"
title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</a>
<span class="text-muted">程序员-张师傅</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/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>前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi</div>
</li>
<li><a href="/article/1835298981362626560.htm"
title="webstorm报错TypeError: this.cliEngine is not a constructor" target="_blank">webstorm报错TypeError: this.cliEngine is not a constructor</a>
<span class="text-muted">Blue_Color</span>
<div>点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:</div>
</li>
<li><a href="/article/1835296397365178368.htm"
title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a>
<span class="text-muted">uthRaman</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
<div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div>
</li>
<li><a href="/article/1835293121953492992.htm"
title="了解 UNPKG：前端开发者的包管理利器" target="_blank">了解 UNPKG：前端开发者的包管理利器</a>
<span class="text-muted">小于负无穷</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
<div>在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n</div>
</li>
<li><a href="/article/1835247344719851520.htm"
title="2019-05-29 vue-router的两种模式的区别" target="_blank">2019-05-29 vue-router的两种模式的区别</a>
<span class="text-muted">Kason晨</span>
<div>1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash</div>
</li>
<li><a href="/article/1835216109297561600.htm"
title="electron多标签页模式更像客户端" target="_blank">electron多标签页模式更像客户端</a>
<span class="text-muted">diygwcom</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser</div>
</li>
<li><a href="/article/1835194426499100672.htm"
title="外卖霸王餐返利外卖会员卡小程序开发" target="_blank">外卖霸王餐返利外卖会员卡小程序开发</a>
<span class="text-muted">闹小艾</span>
<a class="tag" taget="_blank" href="/search/good506070/1.htm">good506070</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><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
<div>外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账</div>
</li>
<li><a href="/article/1835192531881652224.htm"
title="Axure设计之全屏与退出全屏交互实现" target="_blank">Axure设计之全屏与退出全屏交互实现</a>
<span class="text-muted">招风的黑耳</span>
<a class="tag" taget="_blank" href="/search/Axure/1.htm">Axure</a><a class="tag" taget="_blank" href="/search/axure/1.htm">axure</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a>
<div>在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure</div>
</li>
<li><a href="/article/1835162742533746688.htm"
title="全面指南：用户行为从前端数据采集到实时处理的最佳实践" target="_blank">全面指南：用户行为从前端数据采集到实时处理的最佳实践</a>
<span class="text-muted">数字沉思</span>
<a class="tag" taget="_blank" href="/search/%E8%90%A5%E9%94%80/1.htm">营销</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E9%87%8F%E8%BF%90%E8%90%A5/1.htm">流量运营</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/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/%E5%86%85%E5%AE%B9%E8%BF%90%E8%90%A5/1.htm">内容运营</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a>
<div>引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信</div>
</li>
<li><a href="/article/1835154546289111040.htm"
title="EcmaScript和JavaScript的区别" target="_blank">EcmaScript和JavaScript的区别</a>
<span class="text-muted">每天吃八顿</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，</div>
</li>
<li><a href="/article/1835137656992919552.htm"
title="javascript添加p元素，html添加文字，appendChild" target="_blank">javascript添加p元素，html添加文字，appendChild</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/html%E6%B7%BB%E5%8A%A0p/1.htm">html添加p</a><a class="tag" taget="_blank" href="/search/appendChild/1.htm">appendChild</a>
<div>javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}</div>
</li>
<li><a href="/article/1835136018660028416.htm"
title="CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制" target="_blank">CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制</a>
<span class="text-muted">SteveJi666</span>
<a class="tag" taget="_blank" href="/search/WebGL/1.htm">WebGL</a><a class="tag" taget="_blank" href="/search/cesium/1.htm">cesium</a><a class="tag" taget="_blank" href="/search/EarthSDK/1.htm">EarthSDK</a><a class="tag" taget="_blank" href="/search/SuperMap/1.htm">SuperMap</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</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/arcgis/1.htm">arcgis</a>
<div>版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap</div>
</li>
<li><a href="/article/1835131605585326080.htm"
title="html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示" target="_blank">html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示</a>
<span class="text-muted">睿理</span>
<div>html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以</div>
</li>
<li><a href="/article/1835131225128398848.htm"
title="如何在 Python 中声明一个静态属性?" target="_blank">如何在 Python 中声明一个静态属性?</a>
<span class="text-muted">潮易</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla</div>
</li>
<li><a href="/article/1835125415920889856.htm"
title="数据格式：什么是JSON和XML" target="_blank">数据格式：什么是JSON和XML</a>
<span class="text-muted">isNotNullX</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
<div>JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是</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>