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

第八课 Ext对底层DOM元素的封装,本课目标,熟悉Ext对底层DOM封装的整体架构 理解Ext是如何保证效率的,简述,1、对底层操作的封装是每一种JS框架都会做的事情； 2、封装的大目的有三个：简化编码、保证效率、屏蔽浏览器差异； 3、一般的JS框架会封装这些内容：DOM、CSS、Event，只要把这三大对象封装好，UI界面就没有问题。至于Ajax等等其它内容，属于数据传输这一层面的内容。,Ext用哪些类封装底层？,对底层的封装是由这些类完成的： 1、Ext.Element 2、Ext.DomHelper 3、Ext.util.CSS 4、Ext.DomQuery 5、Ext.Template 6、Ext.Xtemplate,Ext.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.DomHelper,1、Ext.DomHelper类的核心设计目的有三个： 第一个是提升效率； 第二个是提供了五种插入节点方法； 第三个是提供了对模板的支撑； 2、 Ext.DomHelper类的基本用法； 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;i parentDiv.innerHTML=str; var t2=new Date().getTime(); alert(t2-t1); ,Ext.DomHelper,Ext.util.CSS,1、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.getElementsByTagName(head)0.appendChild(ss); ,下一节，模板专题： Ext.Template Ext.XTemplate,谢谢！,休息10分钟后，开始讨论。,