在Web中实现表情符号的输入

如果你准备在Web中开发一个可以聊天互动的应用，那么一个支持表情符号的输入框很可能会是必备的内容项。但具体到Web环境来说，我们知道，表单元素和</code>只能输入纯文本，这样的话，表情符号的支持具体要如何做呢？</p> <p>让我们从熟悉的东西开始。</p> <h2>来自微博和微信的两种风格</h2> <p>下图是微信里的聊天：</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/81d320e594aa46abb9bb549b87304de8.jpg" target="_blank"><img class="lazy" alt="在Web中实现表情符号的输入_第1张图片" title="微信的表情输入" src="http://img.e-com-net.com/image/info9/81d320e594aa46abb9bb549b87304de8.jpg" width="400" height="412" style="border:1px solid black;"></a></span></p> <p>下图是微博里的写微博：</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/191dd5b7d5f84165a76946d0c6c18409.jpg" target="_blank"><img class="lazy" alt="在Web中实现表情符号的输入_第2张图片" title="微博的表情输入" src="http://img.e-com-net.com/image/info9/191dd5b7d5f84165a76946d0c6c18409.jpg" width="400" height="419" style="border:1px solid black;"></a></span></p> <p>综合以上微信和微博的表情输入设计，我们可以看出有两种风格可以采用：</p> <ul> <li>一种是像微信这样，只用纯文本，通过类似<code>[旺柴]</code>这样的符号标识来替代表情，最后输出时再显示成真正的表情。</li> <li>另一种是像微博这样，所见即所得，输入框本身就是表情和文字混合在一起。</li> </ul> <p>看起来似乎微博这种风格要复杂一点，我们就从微博的这种开始吧。</p> <h2>表情图和文字在一起的场景</h2> <p>对HTML来说，文字和图片放在一起是非常基础的能力。但是，我们还要求它可以作为输入框来使用，这就需要用到HTML属性<code>contenteditable</code>。它可能不太常用，但其实是一个支持范围很广，历史悠久的HTML属性。</p> <p>使用<code>contenteditable</code>，就可以得到这个简单却满足要求的输入框元素：</p> <pre><code class="html"><div contenteditable="true"></div></code></pre> <h3>表情的显示</h3> <p>现在的输入框已经是一个<code><div></code>，所以，你可以用任意的HTML标签来显示表情，而其中最为常用的就是图片<code><img></code>。以前面的微博内容为例，它和输入框一起，应该构成像下面这样的HTML代码：</p> <pre><code class="html"><div contenteditable="true"> 一条带表情<img src="/path/to/emoji/3.gif"><img src="/path/to/emoji/3.gif">的微博<img src="/path/to/emoji/9.gif"> </div></code></pre> <p>可以看出，<strong>插入表情实际就是插入一段HTML代码</strong>。HTML代码和剩余的纯文本一起，共同构成带表情符号的输入内容。</p> <h3>表情输入功能的要点</h3> <p>接下来，我们参照以下示例界面，来完成微博风格的输入框。</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/aff370c6613c46bfab4c9b118784178a.png" target="_blank"><img class="lazy" alt="在Web中实现表情符号的输入_第3张图片" title="表情输入界面" src="http://img.e-com-net.com/image/info9/aff370c6613c46bfab4c9b118784178a.png" width="370" height="209" style="border:1px solid black;"></a></span></p> <p>这个界面中间的横线，就是<code>contenteditable</code>的<code><div></code>输入框元素。结合这个界面，我们可以分析出接下来的两个实现要点：</p> <ul> <li>点击下方的表情，就将该表情对应的HTML代码插入到输入框<code><div></code>。</li> <li>表情HTML代码插入的位置要<strong>符合输入框<code><div></code>的当前光标位置</strong>。</li> </ul> <p>显然，只是第一个要点的话是很容易的，关键是第二个。</p> <p>这第二个要点，就需要了解Selection和Range的概念了。</p> <h2>Selection 和 Range</h2> <p>在网页中，你一定很熟悉下图展示的两种状态：</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/2ad89e33d9354cffa4a5c0ff6aa7f893.png" target="_blank"><img class="lazy" alt="在Web中实现表情符号的输入_第4张图片" title="不同类型的Selection" src="http://img.e-com-net.com/image/info9/2ad89e33d9354cffa4a5c0ff6aa7f893.png" width="551" height="110" style="border:1px solid black;"></a></span></p> <ul> <li>一种是有一个不断闪烁的光标，表示着当前正在输入或准备输入的位置。它一般只出现在网页的可以输入的元素内，比如文本输入框。</li> <li>另一种是一部分内容呈现蓝底白字（这个颜色可以修改，但默认是这个颜色）的状态，表示当前被选中。它可以出现在任意的网页元素内，我们也常用来部分复制网页内容。</li> </ul> <p>以上两种状态虽然表现形式不同，但它们在Web领域都叫做<strong>Selection</strong>。Selection描述的正是网页中的“当前选择”。闪烁的光标也算作一种特殊的选择，称为已折叠（Collapsed）的选择。</p> <p>Selection在JavaScript中对应的是<code>Selection</code>对象，它可以通过<code>window.getSelection()</code>或<code>document.getSelection()</code>获取到。</p> <p>任何时候，当网页中“当前选择”发生改变时，都会触发<code>document.onselectionchange</code>事件。这个事件处理函数仅存在于<code>document</code>。</p> <h3>Range的设计意义</h3> <p>Selection已经表示了“当前选择”，那Range是做什么的呢？简单来说，<strong>Range</strong>是Selection的“预备军”，它和Selection类似，都可以具体描述网页中的“选择”状态，只是<strong>Selection是可见的，Range是不可见的</strong>。</p> <p>通过Selection的和Range有关的方法，可以把Range应用到Selection，这时候就可以看到Range的选择效果了。这就好像Selection代表了舞台，Range则是一个又一个幕后的演员，它们可以轮换上场和退场。</p> <p>除Firefox外，其他浏览器的Selection都只支持单个Range，因此，<strong>我们一般在同一时间只能应用一个Range到Selection</strong>。</p> <p>一个Range由两个边界点组成，分别是起始边界点和结尾边界点。这两个边界点在一起，就可以描述任意的“选择”状态。当两个边界点完全相同时，这个“选择”状态就称为<strong>折叠的</strong>（<strong>Collapsed</strong>），也就是闪烁光标的状态。</p> <p>Selection的和Range有关的方法很重要，具体如下：</p> <ul> <li><code>getRangeAt(i)</code> - 按索引获取Selection的当前Range。除Firefox外，其他浏览器只固定使用索引<code>0</code>。</li> <li><code>addRange(range)</code> - 将<code>range</code>应用到Selection。除Firefox外，如果Selection当前已经有其他Range，将忽略此方法调用。</li> <li><code>removeRange(range)</code> - 从Selection中取消应用<code>range</code>。</li> <li><code>removeAllRanges()</code> - 取消应用所有Range。</li> <li><code>empty()</code> - 等同于<code>removeAllRanges()</code>。</li> </ul> <p>关于Selection和Range的更详细的介绍和说明，推荐阅读这篇<a href="https://javascript.info/selection-range" rel="nofollow">Selection And Range</a>。</p> <h2>符合光标位置的表情插入</h2> <p>了解了Selection和Range的基础知识后，我们继续来完成微博风格的表情输入。前面说过，要点是<strong>表情HTML代码的插入位置要符合输入框的光标位置</strong>，所以我们首先要做的就是记录这个光标位置。</p> <p>先标记输入框为<code>inputBox</code>（本示例使用Vue）：</p> <pre><code class="html"><div ref="inputBox" class="input-box" contenteditable="true"></div></code></pre> <p>然后使用前面提到的<code>document.onselectionchange</code>监听选择变化事件：</p> <pre><code class="js">document.onselectionchange = () => { let selection = document.getSelection(); if (selection.rangeCount > 0) { const range = selection.getRangeAt(0); if (vmEmoji.$refs.inputBox.contains(range.commonAncestorContainer)) { rangeOfInputBox = range; } } };</code></pre> <p>这段代码的作用是，在“当前选择”发生变化（鼠标点击或触摸动作等）后，如果变化后的Selection位于输入框<code>inputBox</code>内部，就用变量<code>rangeOfInputBox</code>保存它。这里也可以看到，Selection是用Range来保存的。</p> <p><code>selection.rangeCount</code>是<code>Selection</code>的属性，它表示Selection正在应用的Range数目。当它大于<code>0</code>时，说明当前是“有选择”的状态。</p> <p><code>range.commonAncestorContainer</code>是<code>Range</code>的属性，它表示Range的两个边界点的距离最近的共同父元素。这里用于判断Range发生在<code>inputBox</code>内。</p> <p>最后，当点击表情时，执行插入表情的方法<code>insertEmoji</code>：</p> <pre><code class="js">insertEmoji (name) { let emojiEl = document.createElement("img"); emojiEl.src = `${this.emoji.path}${name}${this.emoji.suffix}`; if (!rangeOfInputBox) { rangeOfInputBox = new Range(); rangeOfInputBox.selectNodeContents(this.$refs.inputBox); } if (rangeOfInputBox.collapsed) { rangeOfInputBox.insertNode(emojiEl); } else { rangeOfInputBox.deleteContents(); rangeOfInputBox.insertNode(emojiEl); } rangeOfInputBox.collapse(false); }</code></pre> <p>这段代码中，参数<code>name</code>代表了不同表情，从而生成不同表情对应的不同HTML元素（都是<code><img></code>）。</p> <p>如果<code>rangeOfInputBox</code>不存在，说明还没有过任何发生在输入框内的选择事件，此时就指定一个默认的Range。<code>selectNodeContents(node)</code>是<code>Range</code>的方法，将一个Range设定为选中整个<code>node</code>元素内容。</p> <p><code>insertNode(node)</code>是<code>Range</code>的方法，可以将<code>node</code>元素插入到Range的起始边界点。它是本示例的关键方法，用于完成表情HTML元素插入。这里需要对Range的状态做判断，如果Range是折叠的（闪烁光标），直接插入表情元素，如果Range不是折叠的（选中了一部分输入框内容），就先删除选中的内容，再插入表情元素（相当于替换内容的效果）。<code>deleteContent()</code>也是<code>Range</code>的方法，可以将Range包含的内容从网页文档中删除。</p> <p>结尾调用的<code>collapse(toStart)</code>仍然是<code>Range</code>的方法，它可以将Range的两个边界点变成相同的，也就是折叠的状态。如果参数<code>toStart</code>为<code>true</code>则取起始边界点的位置，如果为<code>false</code>则是取结尾边界点。这里取的是结尾边界点，这样就好像是在插入一个表情后，自动将光标移动到刚插入的表情元素后方，从而支持表情的<strong>连续输入</strong>。</p> <p>到此，微博风格的表情输入就已经实现了：</p> <p><span class="img-wrap"></span></p> <p>把输入框内的内容作为HTML代码（富文本），就可以提交给后台，或者像图里这样简单展示在上方的聊天窗口内。</p> <h3>完善点击表情时的光标置位</h3> <p>这种文字和表情图混合在一起的风格还存在一个待完善的地方：如果点击文字，光标会正确定位到选中的文字前方，而点击表情图，就没有任何动作。这个光标置位的功能我们可以手动补全。</p> <p>为输入框增加<code>click</code>事件处理：</p> <pre><code class="html"><div ref="inputBox" @click="handleBoxClick" class="input-box" contenteditable="true"></div></code></pre> <p>对应的<code>handleBoxClick()</code>事件处理方法如下：</p> <pre><code class="js">handleBoxClick (event) { let target = event.target; this.setCaretForEmoji(target); }, setCaretForEmoji (target) { if (target.tagName.toLowerCase() === "img") { let range = new Range(); range.setStartBefore(target); range.collapse(true); document.getSelection().removeAllRanges(); document.getSelection().addRange(range); } },</code></pre> <p><code>setStartBefore(node)</code>是<code>Range</code>的方法，可以设定边界起始点的位置到一个元素之前。这段代码整体来说就是，如果当前<code>click</code>的是<code><img></code>元素，就创建一个Range，设定它为折叠状态，位置在刚才点击的表情图之前，然后应用这个Range到Selection，变成真实可见的选择效果。</p> <h2>用纯文本符号来替代表情的场景</h2> <p>现在，我们重新开始，来实现微信风格的表情输入。</p> <p>前面说过，微信是使用类似<code>[旺柴]</code>这样的符号标识来替代表情的风格。这种风格全部使用纯文本，因此，输入框会很容易实现，可以直接使用表单元素的文本输入框：</p> <pre><code class="html"><input ref="formInput" @keydown="handleFormInputKeydown" class="form-input" type="text"></code></pre> <p>这里预留的<code>handleFormInputKeydown()</code>输入事件处理方法，将在后文中使用。</p> <p>和微博风格类似，接下来也是可以分成两个实现要点：</p> <ul> <li>点击下方的表情，就将该表情对应的纯文本符号插入到输入框<code><input></code>。</li> <li>纯文本符号的插入位置要<strong>符合输入框<code><input></code>的当前光标位置</strong>。</li> </ul> <p>虽然同样是结合Selection和Range的概念，按光标位置来插入纯文本符号，但<code><input></code>会更加简单。</p> <h3>按光标位置来插入纯文本</h3> <p>表单元素<code><input></code>自身有以下3个属性是关于“选择”的：</p> <ul> <li><code>input.selectionStart</code> - 选择的起始位置。它的值是一个索引数字，比如<code>6</code>。</li> <li><code>input.selectionEnd</code> - 选择的结尾位置。值的格式同上。</li> <li><code>input.selectionDirection</code> - 选择的方向。可选值<code>"forward"</code>,<code>"backward"</code>和<code>"none"</code>。一般对应的情况是指鼠标拖拽选择时是从前向后，还是从后向前，又或者是双击选中。</li> </ul> <p>通过这些属性，就可以实现对“选择”状态的读取和写入，而无需使用<code>Selection</code>和<code>Range</code>。</p> <p>现在，点击表情时，执行插入表情的方法<code>insertEmojiText</code>：</p> <pre><code class="js">insertEmojiText (name) { let input = this.$refs.formInput; let emojiText = `[${name}]`; input.focus(); input.setRangeText(emojiText, input.selectionStart, input.selectionEnd, "end"); input.blur(); }</code></pre> <p>可以看到纯文本的表情插入非常简单。这里也是用<code>[name]</code>的符号来表示表情。</p> <p><code>input.setRangeText(replacement, [start], [end], [selectionMode])</code>是<code>input</code>的方法，可以将索引位置从<code>start</code>到<code>end</code>的文本，替换成<code>replacement</code>的文本。而如果<code>start</code>等于<code>end</code>，就相当于闪烁光标的状态，没有文本会被替换，变成了插入文本的效果。末尾参数<code>selectionMode</code>决定了在文本替换（或插入）操作完毕后，<code>input</code>如何更新选择状态。这里取<code>"end"</code>表示将选择状态设定为“闪烁光标，位置在新插入文本的后方”，从而支持表情连续输入。</p> <p>使用<code>input.setRangeText()</code>，无论当前状态是闪烁光标，还是已经选择了一些文本，都会以符合我们输入习惯的方式插入表情文本。</p> <p>关于<code>input.setRangeText()</code>的更详细的说明，同样推荐阅读这篇<a href="https://javascript.info/selection-range" rel="nofollow">Selection And Range</a>。</p> <p>这段代码中的<code>input.focus()</code>和<code>input.blur()</code>，是因为仅在<code><input></code>元素被focus的情况下进行文本编辑操作，才能确保<code>input.selectionStart</code>和<code>input.selectionEnd</code>两个值正确更新。同时，这里又并不希望<code><input></code>元素被真地focus，所以又用了<code>input.blur()</code>来取消。</p> <p>到这里，微信风格的表情输入就基本可用了。但是，这种纯文本符号的风格也有一个应完善的地方：<strong>用退格键（Backspace）来删除文本时，代表一个表情的纯文本符号应该以作为一个整体被删除</strong>。比如<code>[旺柴]</code>这样的表情符号，在光标位于<code>]</code>的后方时，一个退格键就应该删除这一整段文本。这也是微信里存在的功能。</p> <h3>退格键支持 - 以表情符号为整体删除文本</h3> <p>前文示例中为<code><input></code>元素预留的<code>handleFormInputKeydown()</code>方法，就是用于实现这一功能：</p> <pre><code class="js">handleFormInputKeydown (event) { let input = this.$refs.formInput; let chatString = input.value; // "Backspace" and selection type "Caret" if (event.keyCode === 8 && input.selectionStart === input.selectionEnd) { let indexEnd = input.selectionStart - 1; let charToDelete = chatString.charAt(indexEnd); // delete the whole [***] if (charToDelete === "]") { event.preventDefault(); let indexStart = chatString.lastIndexOf("[", indexEnd); input.setRangeText("", indexStart, indexEnd + 1, "end"); } } }</code></pre> <p>这段代码是判断当选择状态为闪烁光标，且刚好位于字符<code>]</code>后按下了退格键的时候，就找出整个<code>[name]</code>表情文本，使用<code>input.setRangeText()</code>实现整段删除。</p> <p>到此，微信风格的表情输入也就完成了：</p> <p><span class="img-wrap"></span></p> <p>在提交给后台或者图中这样展示在上方聊天窗口内的时候，取输入框内的纯文本，然后将所有<code>[name]</code>格式的文本符号，替换成对应表情的HTML（比如<code>[1]</code>变成<code><img src="/path/to/emoji/1.gif"></code>）即可。</p> <h2>完整代码示例</h2> <p>两种风格的完整代码示例：</p> <ul> <li><a href="https://codesandbox.io/s/emoji-input-contenteditable-75qe8" rel="nofollow">微博风格（表情图和文字一起）</a></li> <li><a href="https://codesandbox.io/s/emoji-input-text-yqfe3" rel="nofollow">微信风格（表情用纯文本符号替代）</a></li> </ul> <h2>补充</h2> <h3>光标颜色</h3> <p>Selection在可输入元素内的折叠状态，也就是闪烁光标，它的颜色也是可以修改的，比如：</p> <pre><code class="css">input { caret-color: red; }</code></pre> <p>会将闪烁光标修改为红色。更详细的说明请查看<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/caret-color" rel="nofollow">MDN上的caret-color</a>。</p> <h3>输入法里的表情字符</h3> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/90828dbb0b494ac79dbe9fe6c18a9bc5.jpg" target="_blank"><img class="lazy" alt="在Web中实现表情符号的输入_第5张图片" title="输入法里的表情字符" src="http://img.e-com-net.com/image/info9/90828dbb0b494ac79dbe9fe6c18a9bc5.jpg" width="300" height="293" style="border:1px solid black;"></a></span></p> <p>在手机上，你可能注意到像搜狗这样的输入法也给你提供了一套表情（上图中的Emoji），它们在微信中也可以使用，而且可以直接显示在微信的输入框内。这种不依赖其他东西就可以使用的表情，本质上是Unicode字符，你可以到<a href="https://unicode-table.com/cn/" rel="nofollow">Unicode Character Table</a>上查找更多的表情字符。</p> <p>Unicode字符表情最终呈现的样子取决于它所处的环境。比如不同手机，不同操作系统，都可能有不同的外观。</p> <h3>定义虚拟键盘的动作键</h3> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/40a82346c441440295953e6404df932f.jpg" target="_blank"><img class="lazy" alt="在Web中实现表情符号的输入_第6张图片" title="定义虚拟键盘的动作键" src="http://img.e-com-net.com/image/info9/40a82346c441440295953e6404df932f.jpg" width="300" height="234" style="border:1px solid black;"></a></span></p> <p>手机上的输入法键盘，右下角的动作键可以通过HTML属性<code>enterkeyhint</code>设置为不同的类型：</p> <pre><code class="html"><div ref="inputBox" enterkeyhint="send" contenteditable="true"></div></code></pre> <p>这里值<code>send</code>对应的就是前面图中的“发送”。其他可用的值可以参考<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint" rel="nofollow">MDN上的enterkeyhint</a>。</p> <p>如果想要像微信那样，点击虚拟键盘右下角的“发送”就可以发送消息（而不是点击网页上的按钮），监听输入元素的键盘事件，并确认按键为<code>enter</code>键即可。</p> <h2>结语</h2> <p>“可以输入表情”对于聊天交流而言可以说是非常棒的一项增强。不管具体用哪一种风格实现，最终都是让大家可以表达出更多。</p> <p>希望本文的表情功能开发指南可以帮到你。</p> <p>（重新编辑自我的博客，原文地址：<a href="http://acgtofe.com/posts/2021/03/web-emoji-input" rel="nofollow">http://acgtofe.com/posts/2021...</a>）</p> </article> </div> </div> </div>  <div id="SOHUCS" sid="1369278805138554880"></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">  <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>  <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>  <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)</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/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/1835118231979913216.htm" title="HighCharts图表自动化简介" target="_blank">HighCharts图表自动化简介</a> <span class="text-muted">知识的宝藏</span> <a class="tag" taget="_blank" href="/search/Selenium%E9%AB%98%E7%BA%A7%E7%AF%87/1.htm">Selenium高级篇</a><a class="tag" taget="_blank" href="/search/Selenium%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">Selenium图表自动化测试</a><a class="tag" taget="_blank" href="/search/highcharts%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">highcharts图表自动化</a><a class="tag" taget="_blank" href="/search/Selenium%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">Selenium图表自动化</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">图表自动化测试</a><a class="tag" taget="_blank" href="/search/highcharts/1.htm">highcharts</a><a class="tag" taget="_blank" href="/search/Selenium/1.htm">Selenium</a> <div>什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互</div> </li> <li><a href="/article/43.htm" title="集合框架" target="_blank">集合框架</a> <span class="text-muted">天子之骄</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E5%90%88%E6%A1%86%E6%9E%B6/1.htm">集合框架</a> <div> 集合框架集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。简单介绍： Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi</div> </li> <li><a href="/article/170.htm" title="Table Driven（表驱动）方法实例" target="_blank">Table Driven（表驱动）方法实例</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/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/Table+Driven/1.htm">Table Driven</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E9%A9%B1%E5%8A%A8/1.htm">表驱动</a> <div>实例一： /** * 驾驶人年龄段 * 保险行业，会对驾驶人的年龄做年龄段的区分判断 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞) */ public class AgePeriodTest { //if...el</div> </li> <li><a href="/article/297.htm" title="Jquery 总结" target="_blank">Jquery 总结</a> <span class="text-muted">cuishikuan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/jquery%E6%96%B9%E6%B3%95/1.htm">jquery方法</a> <div>1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim(' Hello ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$</div> </li> <li><a href="/article/424.htm" title="面向对象概念的提出" target="_blank">面向对象概念的提出</a> <span class="text-muted">麦田的设计者</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/1.htm">面向对象</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E8%BF%87%E7%A8%8B/1.htm">面向过程</a> <div> 面向对象中，一切都是由对象展开的，组织代码，封装数据。在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。下面就结合编程语言的发展史，聊一聊面向过程和面向对象。 c语言由贝尔实</div> </li> <li><a href="/article/551.htm" title="linux网口绑定" target="_blank">linux网口绑定</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。一、环境描述我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。二、双网卡绑定步骤： 2.1 修改/etc/sysconfig/network</div> </li> <li><a href="/article/678.htm" title="XML基础语法" target="_blank">XML基础语法</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>一、什么是XML？ XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。二、为什么学习XML？用来解决程序间数据传输的格式问题做配置文件充当小型数据库三、XML与HTM</div> </li> <li><a href="/article/805.htm" title="为网页添加自己喜欢的字体" target="_blank">为网页添加自己喜欢的字体</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/%E5%AD%97%E4%BD%93+%E7%A7%92%E8%A1%A8+css/1.htm">字体秒表 css</a> <div>@font-face { font-family: miaobiao;//定义字体名字 font-style: normal; font-weight: 400; src: url('font/DS-DIGI-e.eot');//字体文件 } 使用： <label style="font-size:18px;font-famil</div> </li> <li><a href="/article/932.htm" title="redis范围查询应用-查找IP所在城市" target="_blank">redis范围查询应用-查找IP所在城市</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>原文地址： http://www.tuicool.com/articles/BrURbqV 需求根据IP找到对应的城市原来的解决方案 oracle表（ip_country）：查询IP对应的城市： 1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 2. select city from ip_</div> </li> <li><a href="/article/1059.htm" title="输入两个整数，计算百分比" target="_blank">输入两个整数，计算百分比</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public static String getPercent(int x, int total){ double result=(x*1.0)/(total*1.0); System.out.println(result); DecimalFormat df1=new DecimalFormat("0.0000%"); </div> </li> <li><a href="/article/1186.htm" title="百合——————>怎么学习计算机语言" target="_blank">百合——————>怎么学习计算机语言</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/java+%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">java 移动开发</a> <div> 对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和</div> </li> <li><a href="/article/1313.htm" title="linux下tomcat开机自启动" target="_blank">linux下tomcat开机自启动</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>方法一：修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/home/java1.6.0_27 export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:. export PATH=$JAVA_HOME/bin:$PATH export CATALINA_H</div> </li> <li><a href="/article/1440.htm" title="spring aop实例" target="_blank">spring aop实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a> <div>1.AdviceMethods.java package com.bijian.study.spring.aop.schema; public class AdviceMethods { public void preGreeting() { System.out.println("--how are you!--"); } } 2.beans.x</div> </li> <li><a href="/article/1567.htm" title="[Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization" target="_blank">[Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/serialization/1.htm">serialization</a> <div>enableComplexMapKeySerialization配置项的含义 Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。 GsonBuilder用于</div> </li> <li><a href="/article/1694.htm" title="【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题" target="_blank">【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Stream/1.htm">Stream</a> <div>包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 1. At most once，数据最多只能接受一次，有可能接收不到 2. At least once, 数据至少接受一次，有可能重复接收 3. Exactly once 数据保证被处理并且只被处理一次，具体的多读几遍http://spark.apache.org/docs/lates</div> </li> <li><a href="/article/1821.htm" title="shell脚本批量检测端口是否被占用脚本" target="_blank">shell脚本批量检测端口是否被占用脚本</a> <span class="text-muted">ronin47</span> <div>#!/bin/bash cat ports |while read line do#nc -z -w 10 $line nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then echo $line:ok else echo $line:fail fi done 这里的ports 既可以是文件</div> </li> <li><a href="/article/1948.htm" title="java-2.设计包含min函数的栈" target="_blank">java-2.设计包含min函数的栈</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ import java.util.ArrayList; import java.util.List; public class MinStack { //maybe we can use origin array rathe</div> </li> <li><a href="/article/2075.htm" title="Netty源码学习-ChannelHandler" target="_blank">Netty源码学习-ChannelHandler</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div> 一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是因为每一次调用decode方法时，可能数据未接收完全（incomplete），它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 p</div> </li> <li><a href="/article/2202.htm" title="java生成随机数" target="_blank">java生成随机数</a> <span class="text-muted">cngolon</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>方法一： /** * 生成随机数 * @author cngolon@126.com * @return */ public synchronized static String getChargeSequenceNum(String pre){ StringBuffer sequenceNum = new StringBuffer(); Date dateTime = new D</div> </li> <li><a href="/article/2329.htm" title="POI读写海量数据" target="_blank">POI读写海量数据</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/%E6%B5%B7%E9%87%8F%E6%95%B0%E6%8D%AE/1.htm">海量数据</a> <div>import java.io.FileOutputStream; import java.io.OutputStream; import org.apache.poi.xssf.streaming.SXSSFRow; import org.apache.poi.xssf.streaming.SXSSFSheet; import org.apache.poi.xssf.streaming</div> </li> <li><a href="/article/2456.htm" title="mysql 日期格式化date_format详细使用" target="_blank">mysql 日期格式化date_format详细使用</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/date_format/1.htm">date_format</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F%E8%BD%AC%E6%8D%A2/1.htm">日期格式转换</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F%E5%8C%96/1.htm">日期格式化</a> <div> 日期转换函数的详细使用说明 DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n</div> </li> <li><a href="/article/2583.htm" title="一个程序员分享8年的开发经验" target="_blank">一个程序员分享8年的开发经验</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div> 在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。明确入行的目的很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容</div> </li> <li><a href="/article/2710.htm" title="android欢迎界面淡入淡出效果" target="_blank">android欢迎界面淡入淡出效果</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。主要代码如下： package com.myaibang.activity; import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown</div> </li> <li><a href="/article/2837.htm" title="linux 复习笔记之常见压缩命令" target="_blank">linux 复习笔记之常见压缩命令</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/tar%E8%A7%A3%E5%8E%8B/1.htm">tar解压</a><a class="tag" taget="_blank" href="/search/linux%E7%B3%BB%E7%BB%9F%E5%B8%B8%E8%A7%81%E5%8E%8B%E7%BC%A9%E5%91%BD%E4%BB%A4/1.htm">linux系统常见压缩命令</a><a class="tag" taget="_blank" href="/search/linux%E5%8E%8B%E7%BC%A9%E5%91%BD%E4%BB%A4/1.htm">linux压缩命令</a><a class="tag" taget="_blank" href="/search/tar%E5%8E%8B%E7%BC%A9/1.htm">tar压缩</a> <div>转载请出自出处:http://eksliang.iteye.com/blog/2109693 linux中常见压缩文件的拓展名 *.gz gzip程序压缩的文件 *.bz2 bzip程序压缩的文件 *.tar tar程序打包的数据，没有经过压缩 *.tar.gz tar程序打包后，并经过gzip程序压缩 *.tar.bz2 tar程序打包后，并经过bzip程序压缩 *.zi</div> </li> <li><a href="/article/2964.htm" title="Android 应用程序发送shell命令" target="_blank">Android 应用程序发送shell命令</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！发就发吧！一、关于shell指令：我们知道，shell指令是Linux里面带的</div> </li> <li><a href="/article/3091.htm" title="java 无损读取文本文件" target="_blank">java 无损读取文本文件</a> <span class="text-muted">hw1287789687</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E5%8F%96%E6%96%87%E4%BB%B6/1.htm">读取文件</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E6%8D%9F%E8%AF%BB%E5%8F%96/1.htm">无损读取</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E5%8F%96%E6%96%87%E6%9C%AC%E6%96%87%E4%BB%B6/1.htm">读取文本文件</a><a class="tag" taget="_blank" href="/search/charset/1.htm">charset</a> <div>java 如何无损读取文本文件呢？以下是有损的 @Deprecated public static String getFullContent(File file, String charset) { BufferedReader reader = null; if (!file.exists()) { System.out.println("getFull</div> </li> <li><a href="/article/3218.htm" title="Firebase 相关文章索引" target="_blank">Firebase 相关文章索引</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/firebase/1.htm">firebase</a> <div>Awesome Firebase 最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。开发者只需引用一个 API 库文件就可以使用标准 RE</div> </li> <li><a href="/article/3345.htm" title="C++学习重点" target="_blank">C++学习重点</a> <span class="text-muted">lx.asymmetric</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>1.c++面向对象的三个特性：封装性，继承性以及多态性。 2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。 3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。 4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 &n</div> </li> <li><a href="/article/3472.htm" title="java bean和xml相互转换" target="_blank">java bean和xml相互转换</a> <span class="text-muted">q821424508</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/xml%E5%92%8Cbean%E8%BD%AC%E6%8D%A2/1.htm">xml和bean转换</a><a class="tag" taget="_blank" href="/search/java+bean%E5%92%8Cxml%E8%BD%AC%E6%8D%A2/1.htm">java bean和xml转换</a> <div>这几天在做微信公众号做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题，然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧，还是贴出来记录一下顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。 packag</div> </li> <li><a href="/article/3599.htm" title="C 语言初级位运算" target="_blank">C 语言初级位运算</a> <span class="text-muted">1140566087</span> <a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div> 第十章位运算 1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节 2、位运算符：运算符作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或他们的优先级从高到低； 3、位运算符的运算功能： a、按位取反： ~01001101 = 101</div> </li> <li><a href="/article/3726.htm" title="14点睛Spring4.1-脚本编程" target="_blank">14点睛Spring4.1-脚本编程</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a> <div>14.1 Scripting脚本编程脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; spring支持脚本</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </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>