javascript焦点图实现（三）

重构（Refactoring）就是在不改变软件现有功能的基础上，通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更趋合理，提高软件的扩展性和维护性。－－百度百科

什么时候开始重构？为什么要重构？怎么衡量重构的好坏？

答案可以直接参考：http://baike.baidu.com/view/120901.htm 百度百科

个人觉得重构就是改善，使自己认识到重构的好处，前面二次的代码。

javascript-焦点图实现（一）

javascript-焦点图实现（二）

重构的价值在哪里？

直接用到上面的效果，上面的代码也不复杂，不用浪费时间去重构。

简单的实现对结构的要求不是很高，如果基于上面代码进行扩展时，代码不断增多，结构就很重要。

实践：

下面一段代码

Slider效果

对原来的html结构也有所改变。

<style>
#focus_view td{
    height:200px;
    color:#fff;
}

</style>
<div id="focus_view">
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="background:#f00;">1</td>
    <td style="background:#ff0;">2</td>
    <td style="background:#f0f;">3</td>
    <td style="background:#0f0;">4</td>
    <td style="background:#000;">5</td>
    <td style="background:#00f;">6</td>
  </tr>
</table>
</div>
<button id="focus_prev">上一项</button><button id="focus_next">下一项</button>

javascript代码：

<script>

function extend(subClass,superClass){//类式继承 来自于《javascript 设计模式》
    var f=function(){};
    f.prototype=superClass.prototype;
    subClass.prototype=new f;
    subClass.prototype.constructor=subClass;
}


/*
   导入 Focus类 *必需 
   继承自Focus类，
   添加方法
    play,//播放
    stop,//停止
    setSpeed,//间隔
    setEffect//效果
   重写方法:
    goto
    init

*/
function FocusSlider(options){
    this._focusItems=options.focusItems;
    this.autoPlay=options.autoPlay||true;
    this._speed=options.speed||3000;
    this._root=options.root;
    this.width=500;
    this.height=200;
    this._interval=null;
    this._isMoved=false;//添加一个动画播放时的锁定
    Focus.call(this,this._focusItems,options.callBackFn,options.effectFn);
    this.init();
    this.play();
}
extend(FocusSlider,Focus);

FocusSlider.prototype.init=function(){
    for(var i=0,len=this.size();i<len;i++){
        this._focusItems[i].style.position="absolute";
        this._focusItems[i].style.left=1000+"px";
        this._focusItems[i].style.width=this.width+"px";
        this._focusItems[i].style.height=this.height+"px";
    }    
    this._root.style.position="relative";
    this._root.style.overflow="hidden";
    this._root.style.display="block";
    this._root.style.width=this.width+"px";
    this._root.style.height=this.height+"px";
    
    this._focusItems[0].style.left="0";
}
FocusSlider.prototype.setEffect=function(fun){
    this._effectFn=fun;
}

FocusSlider.prototype.setSpeed=function(speed){
    this._speed=speed;
}

FocusSlider.prototype.play=function(){
    var that=this;
    that._interval=setInterval(function(){that.next();},that._speed)
}
FocusSlider.prototype.stop=function(){
    this._interval&&clearInterval(this._interval)    
}
FocusSlider.prototype.goto=function(num){
    if(this._isMoved)return;
    this.setIndex(num);
    this._effectFn&&this._effectFn.call(this,this._currentIndex,this._focusItems);
    
}

var getItselfNot=(function(){//取自身反，用单例模式来实现
    var states=1;
    return function(){
        return states=!states;    
    }
})()

function playSlider(index,arr){
    for(var i=0,len=arr.length;i<len;i++){
        arr[i].style.zIndex="0";
        arr[i].style.display="none";
    }
    arr[(index==0?arr.length:index)-1].style.display="";    
    arr[index].style.zIndex="5";
    arr[index].style.display="";
    arr[index].style.left=this.width+"px";
    this._isMoved=true;    
    var that=this;
    var start=new Date();
    var time=800;
    var orignalVal=(getItselfNot()?-1:1)*this.width;
    var targetVal=0;
    var diffVal=targetVal-orignalVal;
    (function step(){
        var past=(new Date())-start;
        var rate=past/time;
        arr[index].style.left=orignalVal+rate*diffVal+"px";
        if(rate<1){
            setTimeout(function(){    step();},Math.min(20,time-past));
        }else{
            arr[index].style.left=targetVal+"px";
            that._isMoved=false;
        }    
    })()
}




//以下为测试代码

var prev=document.getElementById("focus_prev");
var next=document.getElementById("focus_next");

var focusView=document.getElementById("focus_view");
var focusItems=focusView.getElementsByTagName("td");

//声明
var fos=new FocusSlider({'focusItems':focusItems,"root":focusView});
//设置切换效果
fos.setEffect(playSlider);

//后一项
next.onclick=function(){
    fos.next();    
}
//前一项
prev.onclick=function(){
    fos.prev();    
}

//停止
focusView.onmouseover=function(){
    fos.stop();    
}
//播放
focusView.onmouseout=function(){
    fos.play();    
}


</script>

效果：

分析：

能过写上面的代码，发现和焦点（二）的代码里有的方法是重复的，

变化的部分是effectFn,init,方法。

重构思路：

对变化部分的处理，effectFn，init等方法单独处理。

对不变部分play,stop,prev,next,goto等方法提取。

把Effect提取出来成为一个效果集合，

通过getEffect：获取对应效果对象

通过setEffect：添加新的效果对象。参数包括效果名，效果对象

Effect对象里包括方法init,exec