一个导航条的进化

一个导航条的进化

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

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

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

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

懒惰是打字员优秀品质之一，遇到重复劳动的时候，我们就要思考怎样让计算机帮我们来做。解决方法是写个 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 中国大陆许可协议进行许可。 版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。