(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();