第八课Ext对底层DOM元素的封装

1、第八课 ext对底层dom元素的封装本课目标熟悉ext对底层dom封装的整体架构理解ext是如何保证效率的简述1、对底层操作的封装是每一种js框架都会做的事情；2、封装的大目的有三个：简化编码、保证效率、屏蔽浏览器差异；3、一般的js框架会封装这些内容：dom、css、event，只要把这三大对象封装好，ui界面就没有问题。至于ajax等等其它内容，属于数据传输这一层面的内容。ext用哪些类封装底层？对底层的封装是由这些类完成的：1、ext.element2、ext.domhelper3、ext.util.css4、ext.domquery5、ext.template6、ext.xtempla

2、teext.element/get/fly!1、ext.element类的主要作用;2、关于纠结的ext.get和ext.fly源码分析;3、关于特效;ext.element的构造方法1、el对象的两个核心属性id和dom；2、核心的工具方法是对css和事件的支撑； 这一节我们重点关注css 事件机制是后面一个专题get()和fly()为什么fly()获得的元素会比get()更轻量？ext.domhelper1、ext.domhelper类的核心设计目的有三个： 第一个是提升效率； 第二个是提供了五种插入节点方法； 第三个是提供了对模板的支撑；2、 ext.domhelper类的基本用法；3、

3、关于性能，为什么usedom=true会降低性能？核心问题：用document.createelement()和用innerhtml两种方式创建节点的效率是不同的，尤其在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类的设计目的； 动态地在document中创建、删除、操作link标签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