一个导航条的进化

这篇文章很基础，高手请绕道。

学习编程是个循序渐进的过程，最重要的是学习思路、解决问题的方法，了解的多了就会有自己的新方法，懂得如何结合现有方法解决新问题，甚至是想出新方法来解决。

下面通过讲述一个导航条的进化，来展示思路的重要，其间也有代码之美。

导航条是很常见的网页元素，几乎所有的网站上都有。像上图这样的导航条会存在于许多页面中，我们大可以复制、粘贴到每个页面来完成工作。这看起来很快速，但如果策划要求调整导航条的顺序或者添加新项呢？把一个页面改好后，再一个个的复制、粘贴吗？

懒惰是打字员优秀品质之一，遇到重复劳动的时候，我们就要思考怎样让计算机帮我们来做。解决方法是写个 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 是为了增强健壮性，防止传错的情况。这样，策划的任何修改都能轻松解决。

最后，希望这篇文章能够抛砖引玉，给大家更多的启示。