这篇文章很基础，高手请绕道。
学习编程是个循序渐进的过程，最重要的是学习思路、解决问题的方法，了解的多了就会有自己的新方法，懂得如何结合现有方法解决新问题，甚至是想出新方法来解决。
下面通过讲述一个导航条的进化，来展示思路的重要，其间也有代码之美。
导航条是很常见的网页元素，几乎所有的网站上都有。像上图这样的导航条会存在于许多页面中，我们大可以复制、粘贴到每个页面来完成工作。这看起来很快速，但如果策划要求调整导航条的顺序或者添加新项呢？把一个页面改好后，再一个个的复制、粘贴吗？
懒惰是打字员优秀品质之一，遇到重复劳动的时候，我们就要思考怎样让计算机帮我们来做。解决方法是写个 JavaScript 函数来构建导航条，在需要的时候去调用它。
要呈现的导航条的 HTML 如下：
<div class="ID_navbar add_top">
<ul>
<li class="active">
<a href="#" onclick="javascript:return false;">用户登录</a>
</li>
<li>
<a href="http://passport.kayou110.com/Register/Register.aspx">用户注册</a>
</li>
<li>
<a href="http://passport.kayou110.com/FindPwd/Index.aspx">密码找回</a>
</li>
<li>
<a href="http://passport.kayou110.com/PwdAppeal.aspx">密码申诉</a>
</li>
<li>
<a href="http://passport.kayou110.com/MyHome/BindKayouCode.aspx">卡游码验证</a>
</li>
</ul>
</div>
class 为 active 的 li 将高亮，表示当前页。将当前链接的 href 设置 #，onclick 设为 javascript:return false; 是为了点击时没有效果。当然最好的方法不是写在代码里，而是用 jQuery 对 class 为 active 的 li 下的 a 作统一处理，这里就直接写上去了。
接下来我们要做的就是把这段 HTML 搬到 JavaScript 中，或许你一开始会这么做：
function buildNavbar() {
$('.ID_navbar').html(
'<div class="ID_navbar add_top">' +
'<ul>' +
'<li class="active">' +
'<a href="#" onclick="javascript:return false;">用户登录</a>' +
'</li>' +
'<li>' +
'<a href="http://passport.kayou110.com/Register/Register.aspx">用户注册</a>' +
'</li>' +
'<li>' +
'<a href="http://passport.kayou110.com/FindPwd/Index.aspx">密码找回</a>' +
'</li>' +
'<li>' +
'<a href="http://passport.kayou110.com/PwdAppeal.aspx">密码申诉</a>' +
'</li>' +
'<li>' +
'<a href="http://passport.kayou110.com/MyHome/BindKayouCode.aspx">卡游码验证</a>' +
'</li>' +
'</ul>' +
'</div>';
}
很直接不是吗？但不高明，这样写有很多重复的代码，要添加一项，我再复制、粘贴，好么，跟以前一模一样。
稍加观察，我们会发现，变化的部分是链接的内容和地址。把这些变化的地方提取出来，创建多个 li，添加到 ul 中，再放入页面中：
function buildNavbar() {
var items = [],
pageNames = [],
pageUrls = [];
pageNames = [
'用户登录',
'用户注册',
'密码找回',
'密码申诉',
'卡游码验证'
];
baseUrl = 'http://passport.kayou110.com/';
pageUrls = [
'Index.aspx',
'Register/Register.aspx',
'FindPwd/Index.aspx',
'PwdAppeal.aspx',
'MyHome/BindKayouCode.aspx'
];
for (var i = 0; i < pageNames.length; ++i) {
items.push('<li>' +
'<a href="' + baseUrl + pageUrls[i] + '>' + pageNames[i] + '</a>' +
'</li>');
}
$('.ID_navbar').html(
$('<ul />', {
html: items.join('')
})
);
}
看着不错，我们把链接名称和地址分别放在两个数组中，它们每项是一一对应的。链接中相同的部分提取出来，遍历，然后提取对应的名称和地址。再用这些项构建 ul，将其放入页面。大体的代码已经完成，
但还是有几个问题需要解决：1. 当前页不高亮；2. 当前页中点击对应的链接会重新载入，影响用户体验。
要解决问题，函数就需要接收个参数，来告诉函数当前是哪个页面，需要对哪个链接做处理。分析后，问题迎刃而解：
function buildNavbar(index) {
var items = [],
pageNames = [],
pageUrls = [];
var baseUrl = '';
pageNames = [
'用户登录',
'用户注册',
'密码找回',
'密码申诉',
'卡游码验证'
];
baseUrl = 'http://passport.kayou110.com/';
pageUrls = [
'Index.aspx',
'Register/Register.aspx',
'FindPwd/Index.aspx',
'PwdAppeal.aspx',
'MyHome/BindKayouCode.aspx'
];
for (var i = 0; i < pageNames.length; ++i) {
var liClass = '';
var aHref = '';
if (i == index) {
liClass = ' class="active"';
aHref = '#" onclick="javascript:return false;"';
}
else {
aHref = baseUrl + pageUrls[i] + '"';
}
items.push('<li' + liClass + '>' +
'<a href="' + aHref + '>' + pageNames[i] + '</a>' +
'</li>');
}
$('.ID_navbar').html(
$('<ul />', {
html: items.join('')
})
);
}
嗯，问题是解决了，但调用的时候传的是 0、1、2，时间久了也不知道这分别代表什么，而且也无法解决链接顺序变动与添加的问题，下标乱了，很多页面都要改。
为了增强代码的可读性，也为了一劳永逸，我们应传入页面的名字，在函数中根据页面名来判断对应哪个下标：
var PAGE_LOGIN = 'login'; // 用户登录
var PAGE_REGISTER = 'register'; // 用户注册
var PAGE_FIND_PWD = 'findPwd'; // 密码找回
var PAGE_PWD_APPEAL = 'pwdAppeal'; // 密码申诉
var PAGE_BIND_KAYOU_CODE = 'bindKayouCode'; // 卡游码验证
function buildNavbar(page) {
var items = [],
pageNames = [],
pageUrls = [];
var baseUrl = '';
var index = 0;
pageNames = [
'用户登录',
'用户注册',
'密码找回',
'密码申诉',
'卡游码验证'
];
baseUrl = 'http://passport.kayou110.com/';
pageUrls = [
'Index.aspx',
'Register/Register.aspx',
'FindPwd/Index.aspx',
'PwdAppeal.aspx',
'MyHome/BindKayouCode.aspx'
];
switch (page) {
case PAGE_LOGIN:
index = 0;
break;
case PAGE_REGISTER:
index = 1;
break;
case PAGE_FIND_PWD:
index = 2;
break;
case PAGE_PWD_APPEAL:
index = 3;
break;
case PAGE_BIND_KAYOU_CODE:
index = 4;
break;
default:
index = 0;
break;
}
for (var i = 0; i < pageNames.length; ++i) {
var liClass = '';
var aHref = '';
if (i == index) {
liClass = ' class="active"';
aHref = '#" onclick="javascript:return false;"';
}
else {
aHref = baseUrl + pageUrls[i] + '"';
}
items.push('<li' + liClass + '>' +
'<a href="' + aHref + '>' + pageNames[i] + '</a>' +
'</li>');
}
$('.ID_navbar').html(
$('<ul />', {
html: items.join('')
})
);
}
这样就完成了，调用的页面使用这些已定义好的变量来将其对应的页面名传入函数，函数中也同样用这些变量来做判断，switch 中保留了 default 是为了增强健壮性，防止传错的情况。这样，策划的任何修改都能轻松解决。
最后，希望这篇文章能够抛砖引玉，给大家更多的启示。