第八課Ext對底層DOM元素的封裝

1、第八課 ext對底層dom元素的封裝本課目標(biāo)熟悉ext對底層dom封裝的整體架構(gòu)理解ext是如何保證效率的簡述1、對底層操作的封裝是每一種js框架都會做的事情；2、封裝的大目的有三個：簡化編碼、保證效率、屏蔽瀏覽器差異；3、一般的js框架會封裝這些內(nèi)容：dom、css、event，只要把這三大對象封裝好，ui界面就沒有問題。至于ajax等等其它內(nèi)容，屬于數(shù)據(jù)傳輸這一層面的內(nèi)容。ext用哪些類封裝底層？對底層的封裝是由這些類完成的：1、ext.element2、ext.domhelper3、ext.util.css4、ext.domquery5、ext.template6、ext.xtempla

2、teext.element/get/fly!1、ext.element類的主要作用;2、關(guān)于糾結(jié)的ext.get和ext.fly源碼分析;3、關(guān)于特效;ext.element的構(gòu)造方法1、el對象的兩個核心屬性id和dom；2、核心的工具方法是對css和事件的支撐； 這一節(jié)我們重點關(guān)注css 事件機制是后面一個專題get()和fly()為什么fly()獲得的元素會比get()更輕量？ext.domhelper1、ext.domhelper類的核心設(shè)計目的有三個： 第一個是提升效率； 第二個是提供了五種插入節(jié)點方法； 第三個是提供了對模板的支撐；2、 ext.domhelper類的基本用法；3、

3、關(guān)于性能，為什么usedom=true會降低性能？核心問題：用document.createelement()和用innerhtml兩種方式創(chuàng)建節(jié)點的效率是不同的，尤其在ie中，使用innerhtml的方式效率提升有60%到70%。 function test1()var parentdiv=document.getelementbyid(mydiv1)var div=null;var t1=new date().gettime();for(var i=0;i10000;i+)div=document.createelement(div);parentdiv.appendchild(div);

4、var t2=new date().gettime();alert(t2-t1);function test2()var parentdiv=document.getelementbyid(mydiv2)var str=;var t1=new date().gettime();for(var i=0;i10000;i+)str+=parentdiv.innerhtml=str;var t2=new date().gettime();alert(t2-t1);ext.domhelperext.util.css1、ext.util.css類的設(shè)計目的； 動態(tài)地在document中創(chuàng)建、刪除、操作link標(biāo)簽2、ext.util.css類源碼實例：swapstylesheet : function(id, url) this.removestylesheet(id); var ss = doc.createelement(link); ss.setattribute(rel, stylesheet); ss.setattribute(type, text/css); ss.setattribute(id, id); ss.setattribute(href, url); doc.getelementsbytagna