第八課Ext對(duì)底層DOM元素的封裝

1、第八課 ext對(duì)底層dom元素的封裝本課目標(biāo)熟悉ext對(duì)底層dom封裝的整體架構(gòu)理解ext是如何保證效率的簡述1、對(duì)底層操作的封裝是每一種js框架都會(huì)做的事情；2、封裝的大目的有三個(gè)：簡化編碼、保證效率、屏蔽瀏覽器差異；3、一般的js框架會(huì)封裝這些內(nèi)容：dom、css、event，只要把這三大對(duì)象封裝好，ui界面就沒有問題。至于ajax等等其它內(nèi)容，屬于數(shù)據(jù)傳輸這一層面的內(nèi)容。ext用哪些類封裝底層？對(duì)底層的封裝是由這些類完成的：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對(duì)象的兩個(gè)核心屬性id和dom；2、核心的工具方法是對(duì)css和事件的支撐； 這一節(jié)我們重點(diǎn)關(guān)注css 事件機(jī)制是后面一個(gè)專題get()和fly()為什么fly()獲得的元素會(huì)比get()更輕量？ext.domhelper1、ext.domhelper類的核心設(shè)計(jì)目的有三個(gè)： 第一個(gè)是提升效率； 第二個(gè)是提供了五種插入節(jié)點(diǎn)方法； 第三個(gè)是提供了對(duì)模板的支撐；2、 ext.domhelper類的基本用法；3、

3、關(guān)于性能，為什么usedom=true會(huì)降低性能？核心問題：用document.createelement()和用innerhtml兩種方式創(chuàng)建節(jié)點(diǎn)的效率是不同的，尤其在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è)計(jì)目的； 動(dòng)態(tài)地在document中創(chuàng)建、刪除、操作link標(biāo)簽2、ext.util.css類源碼實(shí)例：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