第06部分框架09運動

教學目復習面向?qū)ο蟛⑦\思路--教大學如何思考問題復習面向?qū)傩裕好Q格，描述。方法：加入到購物車。。。使用對象之前必須先實例通過點語法對象中的屬性和方什么是組組件就是封裝好的一個功能，比如前面使用的切換幻燈Tab欄切換今天講的運動框架對象版本--組件框架的作用--讓用戶使用起來方方便使用者快速開Jquery：易用性80%用戶體六脈神劍第一招：少則見--你好也--用戶體我們的框架如何讓用戶使用起來方便-- json={width:300px,height:300px,opacity:0.3}Animate(json,2000)VarAnimate用面向?qū)ο髮崿F(xiàn)動畫框架（組件插件思考--如何用使用者使用方便思考公有私實現(xiàn)每個方法（實現(xiàn)接口思路--提煉屬性和方-////定義一個動畫對functionAnimate()erval16;/*動畫對象this.obj={}}Atotype*運行*部門職責描述:根據(jù)添加進來的元素屬性創(chuàng)建動畫,并運行起*/*運行部/*部門職責：就是動起來/*動畫的本質(zhì)/*就是一個循環(huán)，循環(huán)做一些事情/*left：100110120130140.。。。。*/varthat=that.timer=*添加 *部門職責描述:將用戶傳遞的參數(shù)轉(zhuǎn)換成我們需要的格*/*添加部/*職責：將用戶傳遞的參數(shù)轉(zhuǎn)換成我們需要的格式/*這里：就是用一個對象去保存一切我們需要的數(shù)據(jù)傳/*復習前面：定義一個起始時間過的時間tweenidduration*后勤*部門職責描述: ，比如：代碼優(yōu)化壓縮安全內(nèi)存回*/*后勤部/*職責： ，比如：代碼優(yōu)化壓縮安全內(nèi)存回收}varanimate=new//復習什么是回調(diào)函數(shù)，以及使用場//如下表示對id等于id的元素做動畫，持續(xù)時間2秒，動畫方式：分別對物體的lefttop做動畫，使其在2秒內(nèi)分別從0變到300和思考公有私公有其他全是私 我們一般在私有方法名稱前面加個下劃線，來標示這是一個私有的方functionAnimate()erval16;/*動畫對象this._obj={}}Atotype--*運行行起

*部門職責描述:根據(jù)添加進來的元素屬性創(chuàng)建動畫,并*---

/*運行部/*部門職責：就是動起來/*動畫的本質(zhì)/*就是一個循環(huán)，循環(huán)做一些事情/*left：100110120130140.。。。。varthat=that.timersetInterval(that._move(that._obj),/*每次循環(huán)要做的事情--

*添加 *部門職責描述:將用戶傳遞的參數(shù)轉(zhuǎn)換成我們需要的格*---

/*添加部/*職責：將用戶傳遞的參數(shù)轉(zhuǎn)換成我們需要的格式/*這里：就是用一個對象去保存一切我們需要的數(shù)據(jù)//接收用戶傳遞參/*復習前面：定義一個起始時間過的時間tweenidduration--存回

*后勤*部門職責描述: ，比如：代碼優(yōu)化壓縮安全*---

/*后勤部/*職責： ，比如：代碼優(yōu)化壓縮安全內(nèi)存回收/*專門做內(nèi)存回收}varanimate=new//////idid2秒，動畫方lefttop20實現(xiàn)每個部--添加*添加*部門職責描述:將用戶傳遞的參數(shù)轉(zhuǎn)換成我們需要的格*/*添加部/*職責：將用戶傳遞的參數(shù)轉(zhuǎn)換成我們需要的格式/*這里：就是用一個對象去保存一切我們需要的數(shù)據(jù)傳/*復習前面：定義一個起始時間過的時間tweeniddurationthis._obj.id=this._obj.dom=this._obj.duration=this._obj.tween=this._obj.pass=+newthis._obj.now=+newvarfor(variteminvar//元素屬性的起始位置比如目標元素目left100px，希望運動到500px，那么100就是起始位json.start=json.juli=parseFloat(source[item])perty=}return//適配器--單一職責原則adpaterOldfunction(id,source){//用戶傳遞過來的是...而我們希望的是。。。//為什么jquery框架能流行，為什么蘋 能這么火--用戶驗至上，這就是面向用戶編//面向用戶編程的原則//通過注釋使得代碼通俗易懂//source:vartarget=[];for(variteminvar//元素屬性的起始位置比如目標元素目前l(fā)eft100px，500px100json.start=parseFloat($$.css(id,item))json.juli=parseFloat(source[item])-perty=item}return實現(xiàn)部--運行*運行*部門職責描述:根據(jù)添加進來的元素屬性創(chuàng)建動畫,并運行起*/*運行部/*部門職責：就是動起來/*動畫的本質(zhì)/*就是一個循環(huán)，循環(huán)做一些事情/*left：100110120130140.。。。。varthat=that.timersetInterval(function(){that._move(that._obj);},/*每次循環(huán)要做的事情varid=varstyles=varthat=varpass=+newvartweenif(tween>=1)}else}/*停止動畫_stop:function/*單個屬性運 _oneProperty:functionif(name=='opacity')$$.css(id,name,}else$$.css(id,name,}varthat=for(vari=0,len=styles.length;i<len;i++)//step起始值+距離x動畫時間進}////_getTween:function(now,pass,duration,ease){vareases={//linear:function(t,b,c,d){return(c-b)*(t/varyongshi=pass-//方return多物體運動框架概單物物體概復習封裝的過--用戶體驗我們的框架不光是給自己使用的，是給別人使用的比如Jquery，Ext，angularJS，React，實現(xiàn)每個方封裝多物體和封裝單物體是一樣使用面向?qū)ο蠓庋b組件（插件）的過程也是和這個思路是一樣下面我們開始封裝多物體多屬性運動框1.11.1--用戶體varvaranimate=new//如果我新增一個物體思考實現(xiàn)方式并提煉對象的屬性和方思考單物體_obj多物體 arr運行單物體：基于_obj運動For(var和單物體一樣的代}發(fā)現(xiàn)queen屬/*/*this._obj=/*_obj多個物體其實就是多個_obj*/this.queen=[]發(fā)現(xiàn)_loop方法varthat=this;for(vari=0,len=this.queen.length;i<len;i++){var_obj=this.queen[i]}}單物體Add--轉(zhuǎn)換一個多個物體：其實就是制造queen的過程添加部：就是生成queen的過程思考公有私和單物體一樣，只有add是公實現(xiàn)添加var_obj=this._adapterOne(id,json,duration)實現(xiàn)運行varthat =this;that.timer=setInterval(function(){that._loop();},//varthat=this;for(vari=0,len=this.queen.length;i<len;i++){var_obj=this.queen[i]}完善一下代-了零參數(shù)編程////addOld:function(id,json,duration,callback)//我們先宏觀規(guī)劃add函數(shù)的接口--注釋法add:function()//我們先宏觀規(guī)劃add函數(shù)的接口--注釋法varoptions=argumentsvarid=options[0]varjson=options[1]varduration=options[2]varcallback=有意義的文animate.add('#box8',{top:200,left:100,width:'100',opacity:0.2},'慢switchswitch(duration){case'slow':case慢duration=8000;case'normal'case'普通':duration=4000;case'fast'case'快':duration=2000;默認第一種：就是檢測某個值是否為undefined，如果為undefined，則賦值可if(!duration)}第二種我們可以定義一個對象保存默認同時我們允許用戶對這些默認值進行更一般再編寫框架的時候都會定義一個配置對象保存控制動畫的一些值，允許用戶自定義}varthat=this;Try//add方法做兩件事情：適配器，運行動畫，只要用戶調(diào)用add方法，整個動畫夠運行//我們先宏觀規(guī)劃add函數(shù)的接口--注釋varoptions=argumentsvarid=options[0]varjson=options[1]varduration=opti2ons[2]varcallback=options[3]if(!duration)}elseswitch(duration){case'slow'case'慢':duration=8000;case'normal'case'普通':duration=4000;case'fast'case'快':duration=2000;}}}}alert('代碼出錯,系統(tǒng)出錯提示：'+'\n'+e.message+'\n'+}總也是封裝組件的方使用