你好,游客 登录 注册 搜索
背景:
阅读新闻

一个导航条的进化 -

[日期:2013-04-12] 来源:  作者: [字体: ]

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

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

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

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

懒惰是打字员优秀品质之一,遇到重复劳动的时候,我们就要思考怎样让计算机帮我们来做。解决方法是写个 JavaScript 函数来构建导航条,在需要的时候去调用它。

要呈现的导航条的 HTML 如下:

<div class="ID_navbar add_top">
  <ul>
    <li class="active">
      <a href=http://blog.csdn.net/dyllove98/article/details/"#" onclick="javascript:return false;">用户登录</a>
    </li>
    <li>
      <a href=http://blog.csdn.net/dyllove98/article/details/"http://passport.kayou110.com/Register/Register.aspx">用户注册</a>
    </li>
    <li>
      <a href=http://blog.csdn.net/dyllove98/article/details/"http://passport.kayou110.com/FindPwd/Index.aspx">密码找回</a>
    </li>
    <li>
      <a href=http://blog.csdn.net/dyllove98/article/details/"http://passport.kayou110.com/PwdAppeal.aspx">密码申诉</a>
    </li>
    <li>
      <a href=http://blog.csdn.net/dyllove98/article/details/"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=http://blog.csdn.net/dyllove98/article/details/"#" 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 是为了增强健壮性,防止传错的情况。这样,策划的任何修改都能轻松解决。

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






收藏 推荐 打印 | 录入:admin | 阅读:
相关新闻