一个导航条的进化
一个导航条的进化
这篇文章很基础，高手请绕道。
学习编程是个循序渐进的过程，最重要的是学习思路、解决问题的方法，了解的多了就会有自己的新方法，懂得如何结合现有方法解决新问题，甚至是想出新方法来解决。
下面通过讲述一个导航条的进化，来展示思路的重要，其间也有代码之美。
导航条是很常见的网页元素，几乎所有的网站上都有。像上图这样的导航条会存在于许多页面中，我们大可以复制、粘贴到每个页面来完成工作。这看起来很快速，但如果策划要求调整导航条的顺序或者添加新项呢？把一个页面改好后，再一个个的复制、粘贴吗？
懒惰是打字员优秀品质之一，遇到重复劳动的时候，我们就要思考怎样让计算机帮我们来做。解决方法是写个 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 是为了增强健壮性，防止传错的情况。这样，策划的任何修改都能轻松解决。
最后，希望这篇文章能够抛砖引玉，给大家更多的启示。
作者： Ju2ender
出处： http://www.cnblogs.com/ju2ender/archive/2013/04/12/3017026.html
本作品采用 知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议 进行许可。 版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息