(O)编写可维护的代码示例（原创）

图片轮播：

/*广告图片数组*/
var imgs=[
  {"i":0,"img":"images/index/banner_01.jpg"},
  {"i":1,"img":"images/index/banner_02.jpg"},
  {"i":2,"img":"images/index/banner_03.jpg"},
  {"i":3,"img":"images/index/banner_04.jpg"},
  {"i":4,"img":"images/index/banner_05.jpg"},
];
var slider={
  LIWIDTH:0,//保存每个li的宽度,其实就是#slider的宽
  DURATION:1000,//动画的总时间
  WAIT:3000,//自动轮播之间的等待时间
  timer:null,//保存一次性定时器序号
  canAuto:true,//保存是否可以自动轮播
  init:function(){
    this.LIWIDTH=parseFloat(
      $("#slider").css("width")
    );
    this.updateView();
    //为id为indexs的ul添加鼠标进入事件代理，只有不是hover的li才能响应事件
    $("#indexs").on("mouseover","li:not(.hover)",
      function(e){
        //获得目标元素$target
        var $target=$(e.target);
      //调用move方法，传入要移动的个数:
        //目标元素的内容-目标元素的兄弟中class为hover的li的内容
        this.move($target.html()
               -$target.siblings(".hover").html());
    }.bind(this));
    //当鼠标进入#slider时，将canAuto改为false
    //当鼠标移出#slider时，将canAuto改为true
    $("#slider").hover(
      function(){this.canAuto=false;}.bind(this),
      function(){this.canAuto=true;}.bind(this)
    )
    this.autoMove();
  },
  autoMove:function(){//启动自动轮播
    //启动一次性定时器:
    this.timer=setTimeout(
      function(){
        if(this.canAuto){
          this.move(1);//调用move执行移动一个
        }else{
          this.autoMove();//继续等待
        }
      }.bind(this),
      this.WAIT
    );
  },
  move:function(n){
    clearTimeout(this.timer);//停止一次性定时器
    this.timer=null;
    $("#imgs").stop(true);//停止动画，防止叠加
    if(n<0){//如果n<0,右移，先改数组，再移动
      n*=-1;//将n转为正数
      imgs=//先删除结尾的n个元素，拼接到开头
        imgs.splice(imgs.length-n,n).concat(imgs);
      this.updateView();//更新界面
      //获得#imgs当前的left,转为浮点数
      var left=parseFloat($("#imgs").css("left"));
      //修改#imgs的left为left-n*LIWIDTH
      $("#imgs").css("left",left-n*this.LIWIDTH);
      //启动动画，在DURATION时间内，left移动到0
      $("#imgs").animate(
        {left:"0"},
        this.DURATION,
        this.autoMove.bind(this)
      );
    }else{//否则, 左移,先移动，再改数组
      //让#imgs的ul再DURATION事件内，left变为-n*LIWIDTH
      $("#imgs").animate(
        {left:-n*this.LIWIDTH+"px"},
        this.DURATION,
      //在动画结束后调用endMove,替换this，传入参数n
        this.endMove.bind(this,n)
      );
    }
  },
  endMove:function(n){
    //删除imgs开头的n个元素,再拼到结尾
    imgs=imgs.concat(imgs.splice(0,n))
    this.updateView();//更新页面
    $("#imgs").css("left",0);//设置#imgs的left为0
    this.autoMove();//启动自动轮播
  },
  updateView:function(){//将数组中的元素更新到页面
    //遍历imgs数组中每个对象,同时声明空字符串html
    for(var i=0,html="",idxs="";i<imgs.length;i++){
      html+="<li><img src='"+imgs[i].img+"'></li>";
      idxs+="<li>"+(i+1)+"</li>";
    }
    //设置id为imgs的内容为html,再设置其宽为LIWIDTH*imgs的元素个数
    $("#imgs").html(html)
            .css("width",this.LIWIDTH*imgs.length);
    //设置id为indexs的内容为idxs
    $("#indexs").html(idxs);
    //获得#indexs下的和imgs中第一个元素的i属性对应的li,设置其class为hover,选择兄弟中的class为hover的li,清除其class
    $("#indexs>li:eq("+imgs[0].i+")")
      .addClass("hover")
      .siblings(".hover").removeClass("hover");
  }
}
slider.init();

电梯：

var elevator={
  FHEIGHT:0,//保存楼层的高度
  //保存亮灯区域上下边界距文档显示区顶部距离
  UPLEVEL:0, DOWNLEVEL:0,
  DURATION:1000,//动画持续时间
  init:function(){
    this.FHEIGHT=//#f1的高+#f1的marginBottom
      parseFloat($("#f1").css("height"))+
        parseFloat($("#f1").css("marginBottom"));
    this.UPLEVEL=//(innerHeight-FHEIGHT)/2
      (innerHeight-this.FHEIGHT)/2
    this.DOWNLEVEL=//UPLEVEL+FHEIGHT
      this.UPLEVEL+this.FHEIGHT;
    //为document绑定scroll事件为scroll方法
    $(document).scroll(this.scroll.bind(this));
    //为#elevator下的ul添加mouseover事件代理,只有li才能响应事件
    $("#elevator>ul").on("mouseover","li",
      function(e){//target: li a
        var $target=$(e.target);//获得目标元素
        if(e.target.nodeName=="A"){//如果target是a
          $target=$target.parent();//换成其父元素li
        }
        //$target中显示第2个a，隐藏第1个a
        $target.children(":first").hide();
        $target.children(":last").show();
      }
    );
    //为#elevator下的ul添加mouseout事件代理，只有li响应事件
    $("#elevator>ul").on("mouseout","li",
      function(e){
        var $target=$(e.target);
        if(e.target.nodeName=="A"){//如果target是a
          $target=$target.parent();//就改为其父元素
        }
        //获得$target在ul下的下标
        var i=$target.index("#elevator>ul>li");
        //查找.floor下的header下的span取第i个
        var $span=$(".floor>header>span:eq("+i+")");
        //如果span的class没有hover
        if(!$span.hasClass("hover")){
          //$target中显示第1个a，隐藏第2个a
          $target.children(":first").show();
          $target.children(":last").hide();
        }
      }
    );
    //为#elevator下的ul添加click事件代理,只有li下class为etitle的a才能响应事件
    $("#elevator>ul").on("click","li>a.etitle",
      function(e){
      //停止body上的动画，清空队列
        $("body").stop(true);
      //获得目标元素的父元素$li
        var $li=$(e.target).parent();
      //获得$li在所有li中的下标i
        var i=$li.index("#elevator>ul>li");
      //查找.floor下的header下的span中第i个$span
        var $span=
          $(".floor>header>span:eq("+i+")");
      //启动动画，让body在DURATION时间内，滚动到$span距页面顶部的总距离-UPLEVEL
        $("body").animate(
          {scrollTop:
            $span.offset().top-this.UPLEVEL},
          this.DURATION
        );
      }.bind(this)
    );
  },
  scroll:function(){//响应document的scroll事件
    //查找.floor下的header下的span，对每个元素执行:
    $(".floor>header>span").each(function(i,elem){
      //function(i,elem){i: 下标, elem:当前DOM元素}
      //获取当前元素elem距页面顶部的总距离totalTop
      var totalTop=$(elem).offset().top;
      //获取body滚动过的距离scrollTop
      var scrollTop=$("body").scrollTop();
      //用totalTop-scrollTop，保存在innerTop
      var innerTop=totalTop-scrollTop;
      //如果innerTop>UPLEVEL且<=DOWNLEVEL
      if(innerTop>this.UPLEVEL
          &&innerTop<=this.DOWNLEVEL){
        //设置当前元素elem的class为hover
        $(elem).addClass("hover");
        //对应的li中显示第2个a，隐藏第1个a
        $("#elevator>ul>li:eq("+i+")>a:first")
          .hide();
        $("#elevator>ul>li:eq("+i+")>a:last")
          .show();
      }else{//否则,就移除当前元素elem的hover类
        $(elem).removeClass("hover");
        $("#elevator>ul>li:eq("+i+")>a:first")
          .show();
        $("#elevator>ul>li:eq("+i+")>a:last")
          .hide();
      }
    }.bind(this));
    //查找.floor下的header下的span中class为hover的，如果找到，就设置#elevator显示,否则就隐藏
    $(".floor>header>span.hover").length>0?
      $("#elevator").show():$("#elevator").hide();
  }
}
elevator.init();

放大镜：

var zoom={
  moved:0,//保存左移的li个数
  WIDTH:62,//保存每个li的宽度
  OFFSET:20,//保存ul的起始left值
  MAX:3,//保存可左移的最多li个数
  MSIZE:175,//保存mask的大小
  MAXLEFT:175,MAXTOP:175,//保存mask可用的最大坐标
  init:function(){
    //为id为preview下的h1添加单击事件代理，仅a能响应事件，事件处理函数为move
    $("#preview>h1").on(
      "click","a",this.move.bind(this));
    //为id为icon_list的ul添加鼠标进入事件代理，仅li下的img可响应事件，处理函数为changeImgs
    $("#icon_list").on(
      "mouseover","li>img",this.changeImgs);
    //为id为superMask的div添加hover事件,切换mask的显示和隐藏,再绑定鼠标移动事件为moveMask
    $("#superMask").hover(this.toggle,this.toggle)
                   .mousemove(
                      this.moveMask.bind(this));
  },
  moveMask:function(e){
    var x=e.offsetX;//获得鼠标相对于父元素的x
    var y=e.offsetY;//获得鼠标相对于父元素的y
    //计算mask的left: x-MSIZE/2
    var left=x-this.MSIZE/2;
    //计算mask的top: y-MSIZE/2
    var top=y-this.MSIZE/2;
    //如果left越界，要改回边界值
    left=left<0?0:
         left>this.MAXLEFT?this.MAXLEFT:
         left;
    //如果top越界，要改回边界值
    top=top<0?0:
        top>this.MAXTOP?this.MAXTOP:
        top;
    //设置id为mask的元素的left为left,top为top
    $("#mask").css({left:left,top:top});
    //设置id为largeDiv的背景图片位置:
    $("#largeDiv").css(
      "backgroundPosition",
      -left*16/7+"px "+-top*16/7+"px");
  },
  toggle:function(){//切换mask的显示和隐藏
    $("#mask").toggle();
    $("#largeDiv").toggle();
  },
  move:function(e){//移动一次
    var $target=$(e.target);//获得目标元素$target
    var btnClass=$target.attr("class");
    //如果btnClass中没有disabled
    if(btnClass.indexOf("disabled")==-1){
      //如果btnClass以forward开头
        //将moved+1
      //否则
        //将moved-1
      this.moved+=
        btnClass.indexOf("forward")!=-1?1:-1;
      //设置id为icon_list的ul的left为-moved*WIDTH+OFFSET
      $("#icon_list").css(
        "left",-this.moved*this.WIDTH+this.OFFSET);
      this.checkA();//检查a的状态:
    }
  },
  checkA:function(){//检查两个a的状态
    //查找class属性以backward开头的a，保存在$back
    var $back=$("a[class^='backward']");
    //查找class属性以forward开头的a，保存在$for
    var $for=$("a[class^='forward']");
    if(this.moved==0){//如果moved等于0
      //设置$back的class为backward_disabled
      $back.attr("class","backward_disabled");
    }else if(this.moved==this.MAX){
      //否则，如果moved等于MAX
      //设置$for的class为forward_disabled
      $for.attr("class","forward_disabled");
    }else{//否则
      //$back的class为backward
      $back.attr("class","backward");
      //$for的class为forward
      $for.attr("class","forward");
    }
  },
  changeImgs:function(e){//根据小图片更换中图片
    //获得目标元素的src属性，保存在变量src中
    var src=$(e.target).attr("src");
    //查找src中最后一个.的位置i
    var i=src.lastIndexOf(".");
    //设置id为mImg的元素的src为:
      //src从开头-i 拼上-m  拼上src从i到结尾
    $("#mImg").attr(
      "src",src.slice(0,i)+"-m"+src.slice(i));
    $("#largeDiv").css(
      "backgroundImage",
      "url("+src.slice(0,i)+"-l"+src.slice(i)+")"
    );
  }
}
zoom.init();