该文于 2013 年创作，经年修改，录以记之
统一的规范有助于团队合作开发，但规范又臭又长，又不利于阅读与遵守，所以本规范尽量压缩。另外，本规范只是草案，还需要在实践中不断完善。
一、全局规范
tab or space
考虑到各代码编辑器的差异，前端统一采用 4 个空格 作为缩进标准。
设置 4 个空格后，向前删除空格时就会很痛苦，可在编辑器中，设置按下退格键时，一次删掉前面的四个空格。
Sublime Text 是这样设置的：
"tab_size": 4,
"translate_tabs_to_spaces": true,
VIM 是这样设置的：
set autoindent softtabstop=4 shiftwidth=4 expandtab
其他编辑器请自行摸索。
UNIX \n or Windows \r\n
统一使用 UNIX 的换行符
文件编码
统一使用不带 BOM 字节的 UTF-8 编码
路径和文件名
- 不要在路径和文件名中使用空格
- view/css/js/img 文件，统一采用陀峰风格，请不要用 - 或 _ 连接各个单词，更不要不区分单词，一律小写
二、HTML 书写规范
秉承 HTML5 规范与精神，结合 XHTML，制定本规范。
基本页面
采用如下模板：
page title
doctype 采用 html5 建议的 doctype，废弃 xhtml 的 doctype
-
charset 采用 html5 建议的 charset，不要使用：
charset 使用 utf-8
标签闭合
xhtml 规定，标签必须闭合，对没有内容的标签，也要写一个 /，例如：
html5 拨乱反正，回归 html 本质，所以，我们这样写：
疯狂的 html5 甚至允许这样：
header1
header2
cell11
cell12
cell21
cell22
content out of table, no table close tag before
second paragraph
我们不要这么疯狂，这样会弄乱我们的代码，所以，对于没有内容的标签，我们不必用 / 关闭，对于有内容的标签，我们仍然遵从 xhtml 的要求
属性和属性值
html5 允许对属性值不加任何引号，但我们不要这么做，我们还是要加引号的，引号可以用单引号，也可以用双引号，推荐使用单引号，因为输入双引号时，要同时按 Shift 键，例如：
没有值的属性
罗嗦的 xhtml 规定，对没有值的属性这样处理：
但接受 html5 鼓励的我们，应该这样写：
常见标签简洁写法
省略 script/link 标签的 type 属性，这不是必需的，例如：
罗嗦的写法：
简洁的写法：
标签顺序
head 标签内的标签顺序，推荐：
<link>
</code></pre>
<h4>script 标签的位置</h4>
<p><code><script></code> 应放置在 <code></body></code> 前，而不是 <code><head></code> 内，放在 <code><head></code> 内的脚本会阻塞页面，导致页面性能下降</p>
<h4>类名和 ID</h4>
<ul>
<li>类名使用 <code>-</code> 分割单词，不要使用 <code>_</code> 或陀峰命名法</li>
<li>ID 使用陀峰命名法，不要使用 <code>-</code> 或 <code>_</code> </li>
</ul>
<p>例如：</p>
<pre><code class="html">不当的类名和 ID
<div class='userBox' id='user_box'>
<div class='user_box' id='user-box'>
恰当的类名和 ID
<div class='user-box' id='userBox'>
</code></pre>
<h3>三、CSS 书写规范</h3>
<h4>类名和 ID</h4>
<ul>
<li> <p><strong>永远不要使用 ID 进行样式化</strong>，只使用类名，例如：</p> <pre><code class="less">// 不当的样式
#userBox {
...
}
// 良好的样式，使用类名
.user-box {
...
}
</code></pre> </li>
</ul>
<blockquote>
<p>类名用于样式化，ID 用于脚本访问</p>
</blockquote>
<h4>格式风格</h4>
<p>不当的格式风格和推荐的格式风格对比：</p>
<pre><code class="less">// 不当的，{ 应放在类名后，而不是重启一行
.user-box
{
...
}
// 应该这样：
.user-box {
...
}
// 不当的样式
.user-box{
...
}
// 应该这样，{ 与类名之间应该有空格
.user-box {
...
}
// 不当的，样式不应写在一行：
.user-box { font-size: 14px; line-height: 2; }
// 应该这样：
.user-box {
font-size: 14px;
line-height: 2;
}
// 不当的样式
font-size:14px;
// 应该这样，键和值应以空格隔开
font-size: 14px;
// 不当的，最后一行样式也应以 ; 结束
.user-box {
font-size: 14px;
line-height: 2
}
// 应该这样：
.user-box {
font-size: 14px;
line-height: 2;
}
// 不当的样式
.user-list a, .news-list a {
...
}
// 应该这样，每个 selector 占一行
.user-list a,
.news-list a {
...
}
</code></pre>
<h4>层级不可过多</h4>
<pre><code class="less">// 不当，层级过多
.user-box .user-list .user-item .user-avatar {
...
}
// 应该减少层级，这样能提高 CSS 性能
.user-box .user-avatar {
...
}
// 采用命名空间的情况下，最好一级
.user-avatar {
...
}
// 这种情况下，即 .class tag，可以两级
.user-avatar a {
...
}
// 最长不要超过三级
</code></pre>
<h4>使用命名空间</h4>
<p>多使用 <code>namespace-*</code> 形式的类名，每个业务场景定义一个前缀作为命名空间，如用 site- 作为全站的命名空间，用 user- 作为用户中心的命名空间，用 news- 作为咨询的命名空间：</p>
<pre><code class="less">.site-top
.user-nav
.news-left
</code></pre>
<h4>针对 tag 的样式</h4>
<ul>
<li> <p>永远不要针对 div/span/p 的样式，这些标签太通用：</p> <pre><code class="less">// 不当的
.user-box div
.news-box span
.article-list p
</code></pre> </li>
<li> <p>可以对 em strong 等含有丰富语义的标签应用样式，但不要嵌套</p> <pre><code class="less">// 恰当的
.user-list em {
...
}
// 不当的，进行了多级嵌套
.user-list li em {
...
}
// 最不当的，单独的 tag 样式是魔鬼
// 合理的 css reset 除外，全站应有且只有一个统一的 css reset
em {
...
}
</code></pre> </li>
<li><p>无论如何，少用 tag 样式</p></li>
</ul>
<h4>注释</h4>
<ul>
<li> <code>less</code> 中允许使用 <code>//</code> 注释，而 <code>css</code> 语法中不允许，只能使用 <code>/**/</code> </li>
</ul>
<h3>四、JS 书写规范</h3>
<h4>; 号的使用</h4>
<ul>
<li><p>虽然很多正规的教程，都要求每条 js 语句都应以 <code>;</code> 结束，但这里，我们选择<strong>所有的语句省略</strong></p></li>
<li><p><code>;</code> 浪费了键盘输入，窃以为是 js 中的糟粕，不用纠结，大胆省略吧</p></li>
<li> <p>有时，省略 <code>;</code> 会导致代码出错，可加一个前置 <code>;</code>，例如</p> <pre><code class="js">var str = ''
; [1, 2, 3].forEach(function(n) {
console.log(n)
})
</code></pre> </li>
</ul>
<h4>代码风格</h4>
<pre><code class="js">// 所有的二元运算符前后应有空格
var str = 'hi, ' + name
// 函数定义与 { 应处于同一行，并以空格分割
function lineTo(from, to) {
...
}
// 应尽量避免写 while 与 do .. while 循环，用 for 替代
// 可以尝试用 ECMAScript 5 新规范新增的 Array 方法，彻底替代循环结构，这些方法有：
// Array.prototype.forEach
// Array.prototype.map
// Array.prototype.every
// Array.prototype.some
// Array.prototype.filter
// Array.prototype.reduce
// Array.prototype.reduceRight
// 这些方法的使用，符合函数式理念，一旦习惯，就会爱上这种方式
// for 与 (，for 内的 ; 之间，) 与 { 都应有空格
for (var i = 1; i <= 9; i++) {
...
}
// if 与 for 同理，else 应与结束的 } 处于同一行
if (sex == 'girl') {
...
} else if (sex == 'boy') {
...
} else {
...
}
// 始终在 if/else/for 中使用 {}，那怕只有一条语句
if (condition) {
// only one statement
return true
}
// switch 的 case 应该这样缩进，default 应始终在最后
switch (sex) {
case 'boy':
....
break;
case 'girl':
....
break;
default:
...
}
// 尽量避免使用 switch 语句，可以采用这样的结构
var map = {
boy: ...,
girl: ...
}
var val = map[sex]
// 甚至可以用 map 执行函数
var actionMap = {
doThis: function() {
...
},
doThat: function() {
...
}
}
// 函数调用与 ( 之间不应有空格，以便和 for if 语句加以区分
lineTo(5, 6)
// 永远不要这样写
var arr = new Array()
var obj = new Object()
// 应这样写
var arr = []
var obj = {}
// 一行一个变量，应该这样
var v1 = 1
var v2 = 2
// 避免这样
var v1 = 1, v2 = 2
// 变量名和函数名采用陀峰样式，不要使用 _，如
var myVar = 22
// 尽量使用 ES6 的语法，前提是环境支持（或 webpack + babel 编译支持，或原生环境支持）
</code></pre>
<h4>尽量保持一个出口</h4>
<p>很多人这样写代码：</p>
<pre><code class="js">function someFunc(...) {
if (aCondition) {
...
return aValue
}
if (bCondition) {
...
return bValue
}
...
return cValue
}
</code></pre>
<p>这样的代码，说实话，在我眼里，很拙劣，无论你有千般理由！什么性能啦、逻辑清晰啦，都是你对代码没有掌控力的借口！</p>
<p>不要纠结于局部的、指令级的性能，你不是在写汇编！</p>
<p>多处 return，你是爽了，但这种代码，很容易出现维护性问题。</p>
<p>我宁愿多用嵌套 if ... else，始终保持一个出口，函数采用三段式（第一段前置全函数变量声明、第二段逻辑处理、第三段返回）来写，例如：</p>
<pre><code class="js">function someFunc(...) {
var result
if (...) {
if (...) {
...
} else {
...
}
} else {
...
}
return result
}
</code></pre>
<p>如果嵌套过多，可以将之提取出来，放到一个新函数里，并且，给这个新函数，取一个含义明确的名字，这样代码就能实现“自注释”，例如：</p>
<pre><code class="js">function someFunc(...) {
var result
if (...) {
result = newFuncWithWellDescription(...)
} else {
...
}
return result
}
function newFuncWithWellDescription(...) {
...
}
</code></pre>
<p>并且，应在 else 里处理例外情况（错误处理），在 if 里处理正常流程。</p>
<blockquote>
<p>不要怕函数多了影响性能，记住，你不是在写汇编，局部的、指令级的性能优化是没有意义的，系统整体的性能优化，才是重点</p>
</blockquote>
<h4>变量就地声明，声明的同时进行赋值</h4>
<p>有些人这样写：</p>
<pre><code class="js">function someFunc(items) {
var i, len = items.length
...
for (i = 0; i < len; i++) {
...
}
...
}
</code></pre>
<p>这样写没有任何好处，i 只是一个循环变量，没有必要像 C 语言那样作前置声明，应该直接这样：</p>
<pre><code class="js">function someFunc(items) {
...
for (var i = 0, len = items.length; i < len; i++) {
...
}
...
}
</code></pre>
<blockquote>
<p>变量就地声明并赋值，赋值后保持不变，不仅仅符合函数式编程思想，也是一种良好的编程习惯</p>
</blockquote>
<h4>嵌套函数</h4>
<p>嵌套函数应该这样写：</p>
<pre><code class="js">function doSomething(...) {
...
var doSomethingInner = function(...) {
...
}
...
}
</code></pre>
<p>而不应该这样：</p>
<pre><code class="js">function doSomething(...) {
...
function doSomethingInner(...) {
...
}
...
}
</code></pre>
<blockquote>
<p>要牢记，在 JS 这类函数式语言中，函数也是值</p>
</blockquote>
<p>在 seajs 中，所有的函数都声明在 define(function() { ... }) 内，也即，所有的函数都是嵌套函数，但这里，我们忽略 seajs 这一级，将 seajs 内的第一级函数，当成顶级函数，例如：</p>
<pre><code class="js">define(function(require) {
...
function someFunc(...) {
...
}
...
})
</code></pre>
<p>而不要这样：</p>
<pre><code class="js">define(function(require) {
...
var someFunc = function(...) {
...
}
...
})
</code></pre>
<blockquote>
<p>佛说，不要着相</p>
</blockquote>
<h3>五、函数式编程</h3>
<p>js 本质上是函数式编程语言，受当时面向对象思潮的影响，也沾染上一些面向对象的糟粕。让我们去芜存菁，回归函数式本质。</p>
<p>关于函数式，可通过搜索引擎进行学习，这里只谈函数式的一个很重要的特性：不变性。</p>
<h4>不变性</h4>
<p>简单理解，一个变量，一旦定义并赋值（定义时同时赋值，是一个良好的编程习惯），其值应保持不变。</p>
<p>看以下代码：</p>
<pre><code class="js">function onSuccess(data) {
data = parseJson(data)
if (data.s == 200) {
...
}
}
</code></pre>
<p>上述代码存在的问题是，data 的值在第一行发生了变化！即使在命令式编程语言中，这种代码也是很拙劣的！</p>
<p>一般，稍微有经验的程序员，无论是否受到过函数式编程思想的影响，都不会写出这样的代码。多声明一个变量会死呀？应该这样：</p>
<pre><code class="js">function onSuccess(data) {
var json = parseJson(data)
if (json.s == 200) {
...
}
}
</code></pre>
<p>再看以下代码：</p>
<pre><code class="js">function doubleIt(items) {
for (var i = 0, len = items.length; i < len; i++) {
items[i] = items[i] * 2
}
return items
}
</code></pre>
<p>很多命令式编程语言的程序员，觉得上述代码没什么，甚至会告诉你，这样节省内存</p>
<p>上述代码不符合函数式精神，items 中的元素，仍然发生了变化，这样写：</p>
<pre><code class="js">function doubleIt(items) {
var newItems = []
for (var i = 0, len = items.length; i < len; i++) {
newItems[i] = items[i] * 2
}
return newItems
}
</code></pre>
<p>上述代码，只有循环变量 i 在变，并且局限在局部。更彻底地，我们使用 Array.prototype.map：</p>
<pre><code class="js">function doubleIt(items) {
return items.map(function(item) {
return item * 2
})
}
</code></pre>
<blockquote>
<p>回忆高中时，数学中关于函数的定义：函数是一个集合到另一个集合！这样的代码，才算是，真正回归了，编程语言的数学本质</p>
</blockquote>
<p>不要担心函数调用的性能，现代的 JS 引擎，会对这样的调用进行优化</p>
<blockquote>
<p>JS 性能点不在这里，而在 DOM 操作。一个 DOM 操作所耗时间，约是 JS 对象操作的 1000 倍以上，所以应该尽量减少 DOM 操作</p>
</blockquote>
<h3>六、补充材料</h3>
<p>解读ECMAScript[1]——执行环境、作用域及闭包<br> 解读ECMAScript[2]——函数、构造器及原型<br> 闭包漫谈（从抽象代数及函数式编程角度）<br> CSS 相对绝对定位系列（一）<br> SeaJS 官方文档<br> LESS 中文文档<br> 使用SeaJS实现模块化JavaScript开发</p>
<h3>七、拥抱 ES6+</h3>
<p>从现在开始，重视并书写 ES6+，这里有个很好的教程 http://es6.ruanyifeng.com/</p>
</article>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1289238236077563904"></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">你可能感兴趣的:(前端代码规范)</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/1835497792265613312.htm"
title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a>
<span class="text-muted">加密社</span>
<a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a>
<div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</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/1835448238103162880.htm"
title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a>
<span class="text-muted">苹果酱0567</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div>
</li>
<li><a href="/article/1835437775344726016.htm"
title="博客网站制作教程" target="_blank">博客网站制作教程</a>
<span class="text-muted">2401_85194651</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
<div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div>
</li>
<li><a href="/article/1835428317084348416.htm"
title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a>
<span class="text-muted">全能全知者</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
<div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div>
</li>
<li><a href="/article/1835427057752961024.htm"
title="补充元象二面" target="_blank">补充元象二面</a>
<span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
<div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div>
</li>
<li><a href="/article/1835420753252675584.htm"
title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a>
<span class="text-muted">jun778895</span>
<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>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div>
</li>
<li><a href="/article/1835411044768509952.htm"
title="字节二面" target="_blank">字节二面</a>
<span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
<div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div>
</li>
<li><a href="/article/1835398064727224320.htm"
title="前端代码上传文件" target="_blank">前端代码上传文件</a>
<span class="text-muted">余生逆风飞翔</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/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>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div>
</li>
<li><a href="/article/1835385458356482048.htm"
title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a>
<span class="text-muted">2401_85123349</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
<div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</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/1835368019430305792.htm"
title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a>
<span class="text-muted">九旬大爷的梦</span>
<div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</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/1835352325032603648.htm"
title="第三十一节:Vue路由:前端路由vs后端路由的了解" target="_blank">第三十一节:Vue路由:前端路由vs后端路由的了解</a>
<span class="text-muted">曹老师</span>
<div>1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访</div>
</li>
<li><a href="/article/1835350917352878080.htm"
title="华雁智科前端面试题" target="_blank">华雁智科前端面试题</a>
<span class="text-muted">因为奋斗超太帅啦</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E6%95%B4%E7%90%86/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>1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l</div>
</li>
<li><a href="/article/1835350535818014720.htm"
title="如何建设数据中台（五）——数据汇集—打破企业数据孤岛" target="_blank">如何建设数据中台（五）——数据汇集—打破企业数据孤岛</a>
<span class="text-muted">weixin_47088026</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95%E5%92%8C%E6%80%BB%E7%BB%93/1.htm">学习记录和总结</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E5%8F%B0/1.htm">中台</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8F%B0/1.htm">数据中台</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a>
<div>数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi</div>
</li>
<li><a href="/article/1835343473629294592.htm"
title="分布式锁和spring事务管理" target="_blank">分布式锁和spring事务管理</a>
<span class="text-muted">暴躁的鱼</span>
<a class="tag" taget="_blank" href="/search/%E9%94%81%E5%8F%8A%E4%BA%8B%E5%8A%A1/1.htm">锁及事务</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据</div>
</li>
<li><a href="/article/1835340577596600320.htm"
title="前端CSS面试常见题" target="_blank">前端CSS面试常见题</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
<div>边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子</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/1835331375377510400.htm"
title="【前端】vue 报错:The template root requires exactly one element" target="_blank">【前端】vue 报错:The template root requires exactly one element</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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行</div>
</li>
<li><a href="/article/1835302949362954240.htm"
title="从单体到微服务：FastAPI ‘挂载’子应用程序的转变" target="_blank">从单体到微服务：FastAPI ‘挂载’子应用程序的转变</a>
<span class="text-muted">黑金IT</span>
<a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
<div>在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方</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/1835291483406692352.htm"
title="前端three.js的Sprite模拟下雪动画效果" target="_blank">前端three.js的Sprite模拟下雪动画效果</a>
<span class="text-muted">qq_35430208</span>
<a class="tag" taget="_blank" href="/search/three.js/1.htm">three.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E7%BB%B4%E5%9C%BA%E6%99%AF%E4%B8%AD%E4%B8%8B%E9%9B%AA%E6%95%88%E6%9E%9C/1.htm">三维场景中下雪效果</a><a class="tag" taget="_blank" href="/search/threejs%E5%AE%9E%E7%8E%B0%E4%B8%8B%E9%9B%AA%E6%95%88%E6%9E%9C/1.htm">threejs实现下雪效果</a>
<div>一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add</div>
</li>
<li><a href="/article/1835243206963458048.htm"
title="系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机" target="_blank">系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机</a>
<span class="text-muted">rabbit_it</span>
<a class="tag" taget="_blank" href="/search/qiankun%E5%AD%A6%E4%B9%A0/1.htm">qiankun学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a>
<div>一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性</div>
</li>
<li><a href="/article/1835239047803531264.htm"
title="ODOO不同版本与平台选择" target="_blank">ODOO不同版本与平台选择</a>
<span class="text-muted">chouchengyin2080</span>
<a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
<div>1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架</div>
</li>
<li><a href="/article/1835221149026447360.htm"
title="Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数" target="_blank">Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数</a>
<span class="text-muted">qcidyu</span>
<a class="tag" taget="_blank" href="/search/%E5%A5%BD%E7%94%A8%E7%9A%84%E5%B7%A5%E5%85%B7%E9%9B%86%E5%90%88/1.htm">好用的工具集合</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E6%95%88%E7%8E%87/1.htm">代码效率</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E5%B7%A7/1.htm">前端技巧</a><a class="tag" taget="_blank" href="/search/Vue%E5%BC%80%E5%8F%91/1.htm">Vue开发</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E5%90%88%E5%BC%8F%E5%87%BD%E6%95%B0/1.htm">组合式函数</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%9D%97%E7%AE%A1%E7%90%86/1.htm">模块管理</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%AF%BC%E5%85%A5/1.htm">自动导入</a><a class="tag" taget="_blank" href="/search/Nuxt/1.htm">Nuxt</a><a class="tag" taget="_blank" href="/search/Kit/1.htm">Kit</a>
<div>title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N</div>
</li>
<li><a href="/article/109.htm"
title="统一思想认识" target="_blank">统一思想认识</a>
<span class="text-muted">永夜-极光</span>
<a class="tag" taget="_blank" href="/search/%E6%80%9D%E6%83%B3/1.htm">思想</a>
<div>1.统一思想认识的基础,才能有的放矢
原因:
总有一种描述事物的方式最贴近本质,最容易让人理解.
如何让教育更轻松,在于找到最适合学生的方式.
难点在于,如何模拟对方的思维基础选择合适的方式. &</div>
</li>
<li><a href="/article/236.htm"
title="Joda Time使用笔记" target="_blank">Joda Time使用笔记</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/joda+time/1.htm">joda time</a>
<div>Joda Time的介绍可以参考这篇文章：
http://www.ibm.com/developerworks/cn/java/j-jodatime.html
工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：
/**
* DateTime变化（增减）
*/
@Tes</div>
</li>
<li><a href="/article/363.htm"
title="FileUtils API" target="_blank">FileUtils API</a>
<span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/FileUtils/1.htm">FileUtils</a><a class="tag" taget="_blank" href="/search/FileUtils+API/1.htm">FileUtils API</a>
<div>转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述
这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。 </div>
</li>
<li><a href="/article/490.htm"
title="各种新兴技术" target="_blank">各种新兴技术</a>
<span class="text-muted">不懂事的小屁孩</span>
<a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF/1.htm">技术</a>
<div>1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。
现在构建系统常用到maven工具，现在有更容易上手的gradle，
搭建java环境:
http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/
搭建android环境：
http://m</div>
</li>
<li><a href="/article/617.htm"
title="tomcat6的https双向认证" target="_blank">tomcat6的https双向认证</a>
<span class="text-muted">酷的飞上天空</span>
<a class="tag" taget="_blank" href="/search/tomcat6/1.htm">tomcat6</a>
<div>1.生成服务器端证书
keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36</div>
</li>
<li><a href="/article/744.htm"
title="托管虚拟桌面市场势不可挡" target="_blank">托管虚拟桌面市场势不可挡</a>
<span class="text-muted">蓝儿唯美</span>
<div>用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。
在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。
MSP的利润空间将根据其参与的程度而有所不同，Din说。
“我们有一些合作伙伴负责将我们推荐给客户作为个</div>
</li>
<li><a href="/article/871.htm"
title="spring学习——xml文件的配置" target="_blank">spring学习——xml文件的配置</a>
<span class="text-muted">a-john</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
<div>在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件：
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.or</div>
</li>
<li><a href="/article/998.htm"
title="HDU 4342 History repeat itself 模拟" target="_blank">HDU 4342 History repeat itself 模拟</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/%E6%A8%A1%E6%8B%9F/1.htm">模拟</a>
<div>来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342
题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。
思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即</div>
</li>
<li><a href="/article/1125.htm"
title="java中最常用jar包的用途" target="_blank">java中最常用jar包的用途</a>
<span class="text-muted">asia007</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>java中最常用jar包的用途
jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法. w</div>
</li>
<li><a href="/article/1252.htm"
title="ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法" target="_blank">ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/json%E7%BC%96%E7%A0%81%E8%BF%94%E5%9B%9E%E5%BC%82%E5%B8%B8/1.htm">json编码返回异常</a>
<div>一:ajax获取自定义Struts框架中的json编码 出现以下 问题:
1,强制flush输出 json编码打印在首页
2, 不强制flush js会解析json 打印出来的是错误的jsp页面 却没有跳转到错误页面
3, ajax中的dataType的json 改为text 会</div>
</li>
<li><a href="/article/1379.htm"
title="JUnit使用的设计模式" target="_blank">JUnit使用的设计模式</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/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a>
<div>JUnit源代码涉及使用了大量设计模式
1、模板方法模式（Template Method）
定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。
</div>
</li>
<li><a href="/article/1506.htm"
title="Linux常用命令（摘录）" target="_blank">Linux常用命令（摘录）</a>
<span class="text-muted">sunjing</span>
<a class="tag" taget="_blank" href="/search/crond/1.htm">crond</a><a class="tag" taget="_blank" href="/search/chkconfig/1.htm">chkconfig</a>
<div>chkconfig --list 查看linux所有服务
chkconfig --add servicename 添加linux服务
netstat -apn | grep 8080 查看端口占用
env 查看所有环境变量
echo $JAVA_HOME 查看JAVA_HOME环境变量
安装编译器
yum install -y gcc</div>
</li>
<li><a href="/article/1633.htm"
title="【Hadoop一】Hadoop伪集群环境搭建" target="_blank">【Hadoop一】Hadoop伪集群环境搭建</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a>
<div> 结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb</div>
</li>
<li><a href="/article/1760.htm"
title="Anychart图表系列五之事件监听" target="_blank">Anychart图表系列五之事件监听</a>
<span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/chart/1.htm">chart</a>
<div>创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。
以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下：
<script>
//创建AnyChart
var chart = new AnyChart();
//添加钻取操作&quo</div>
</li>
<li><a href="/article/1887.htm"
title="Web前端相关段子" target="_blank">Web前端相关段子</a>
<span class="text-muted">braveCS</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a>
<div>Web标准：结构、样式和行为分离
使用语义化标签
0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。
1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div</div>
</li>
<li><a href="/article/2014.htm"
title="编程之美-24点游戏" target="_blank">编程之美-24点游戏</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a>
<div>
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashSet;
import java.util.List;
import java.util.Random;
import java.util.Set;
public class PointGame {
/**编程之美 </div>
</li>
<li><a href="/article/2141.htm"
title="主页面子页面传值总结" target="_blank">主页面子页面传值总结</a>
<span class="text-muted">chengxuyuancsdn</span>
<a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%93/1.htm">总结</a>
<div>1、showModalDialog
returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值
主界面
var sonValue=window.showModalDialog("son.jsp");
子界面
window.retu</div>
</li>
<li><a href="/article/2268.htm"
title="[网络与经济]互联网+的含义" target="_blank">[网络与经济]互联网+的含义</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91%2B/1.htm">互联网+</a>
<div>
互联网+后面是一个人的名字 = 网络控制系统
互联网+你的名字 = 网络个人数据库
每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不</div>
</li>
<li><a href="/article/2395.htm"
title="oracle 创建视图 with check option" target="_blank">oracle 创建视图 with check option</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/%E8%A7%86%E5%9B%BE/1.htm">视图</a><a class="tag" taget="_blank" href="/search/view/1.htm">view</a><a class="tag" taget="_blank" href="/search/oralce/1.htm">oralce</a>
<div>我们来看下面的例子：
create or replace view testview
as
select empno,ename from emp where ename like ‘M%’
with check option;
这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果：
select * from testv</div>
</li>
<li><a href="/article/2522.htm"
title="ToastPlugin插件在cordova3.3下使用" target="_blank">ToastPlugin插件在cordova3.3下使用</a>
<span class="text-muted">dibov</span>
<a class="tag" taget="_blank" href="/search/Cordova/1.htm">Cordova</a>
<div> 自己开发的Todos应用，想实现“
再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。
ToastPlugin.java
package&nbs</div>
</li>
<li><a href="/article/2649.htm"
title="C语言22个系统函数" target="_blank">C语言22个系统函数</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/function/1.htm">function</a>
<div>C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D</div>
</li>
<li><a href="/article/2776.htm"
title="开发一个类的流程" target="_blank">开发一个类的流程</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91/1.htm">开发</a>
<div>本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。
以下是开发流程：
1. 明确类的功能，抽象出类的大概结构
2. 初步设想类的接口
3. 类名设计（驼峰式命名）
4. 属性设置(权限设置)
判断某些变量是否有必要作为成员属</div>
</li>
<li><a href="/article/2903.htm"
title="java 并发" target="_blank">java 并发</a>
<span class="text-muted">shuizhaosi888</span>
<a class="tag" taget="_blank" href="/search/java+%E5%B9%B6%E5%8F%91/1.htm">java 并发</a>
<div>能够写出高伸缩性的并发是一门艺术
在JAVA SE5中新增了3个包
java.util.concurrent
java.util.concurrent.atomic
java.util.concurrent.locks
在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。 </div>
</li>
<li><a href="/article/3030.htm"
title="Spring Security（11）——匿名认证" target="_blank">Spring Security（11）——匿名认证</a>
<span class="text-muted">234390216</span>
<a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a><a class="tag" taget="_blank" href="/search/ROLE_ANNOYMOUS/1.htm">ROLE_ANNOYMOUS</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D/1.htm">匿名</a>
<div>匿名认证
目录
1.1 配置
1.2 AuthenticationTrustResolver
对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat</div>
</li>
<li><a href="/article/3157.htm"
title="NODEJS项目实践0.2[ express,ajax通信...]" target="_blank">NODEJS项目实践0.2[ express,ajax通信...]</a>
<span class="text-muted">逐行分析JS源代码</span>
<a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</a>
<div>
一、前言
通过上节学习，我们已经 ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就</div>
</li>
<li><a href="/article/3284.htm"
title="在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值" target="_blank">在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值</a>
<span class="text-muted">lhbthanks</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a><a class="tag" taget="_blank" href="/search/checkbox/1.htm">checkbox</a>
<div>第一种方法：获取结果String类型
在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。
所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。
以下是实现的代码：
前台 HTML 代码：
</div>
</li>
<li><a href="/article/3411.htm"
title="003.Kafka基本概念" target="_blank">003.Kafka基本概念</a>
<span class="text-muted">nweiren</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a>
<div>Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic： 消息源（Message）的分类。 Partition： Topic物理上的分组，一</div>
</li>
<li><a href="/article/3538.htm"
title="Linux环境下安装JDK" target="_blank">Linux环境下安装JDK</a>
<span class="text-muted">roadrunners</span>
<a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>1、准备工作
创建JDK的安装目录：
mkdir -p /usr/java/
下载JDK，找到适合自己系统的JDK版本进行下载：
http://www.oracle.com/technetwork/java/javase/downloads/index.html
把JDK安装包下载到/usr/java/目录，然后进行解压：
tar -zxvf jre-7</div>
</li>
<li><a href="/article/3665.htm"
title="Linux忘记root密码的解决思路" target="_blank">Linux忘记root密码的解决思路</a>
<span class="text-muted">tomcat_oracle</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 3: grub启动菜单中加入 single以单用户进入系统. 4:用以上方法mount到根分区把/etc/passwd中的root密码去除 例如: ro</div>
</li>
<li><a href="/article/3792.htm"
title="跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现" target="_blank">跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现</a>
<span class="text-muted">xueyou</span>
<a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p</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>