Ext core概述

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,Ext-core,2012-01-31,1,概述,Ext Core是一款具有多项功能的轻型JavaScript库，基于MIT许可为大家服务。在Ext Core中有许多激赏的功能，在倡导快速Web开发的同时也本着高质量、可伸缩性的代码的指导思想进行着。,Core库对DOM操作、Ajax、事件、动画、模板、00机制等的任务都有相应的支持。Core库基于MIT方式发布，无论是一般的动态页面和简单的应用程序都可选择使用。,2,结构图,UI组件,元素扩展,数据处理,核心功能,服务器,3,跨浏览器/原生JS扩展,Ext Core以定义良好的面向对象知识体系来划分其自身与其他JavaScript库的关系，让你的代码达至一种清晰、便于复用的效果。Ext Core提供了跨浏览器的抽象层面：,操控&遍历DOM,CSS管理,事件的处理,Ajax与JSON,动画,除了以上DOM层面的内容，Ext Core还包括了Ext JS原来一些有用的功能：,基于类的继承方案,观察者类,产生HTML标签与模板,时控代码,URL编码与解码,4,核心文件Ext.js,Ext.js文件是extjs的整个代码的基础，是最核心最重要的部分，extjs的许多高级语法和api及element组件都是基于ext.js文件里面定义的基础类和基本方法。,分析：,（1）声明全局对象Ext,（2）兼容旧版本,（3）浏览器兼容性,（4）一些核心方法,5,核心功能,extjs最底层架构的核心功能包含,事件处理，,模板功能，,基础特征，,原生对象扩展等。,使ext组件有良好的扩展性，易用性及代码复用性,ext即是命名空间，又是静态类，提供统一的入口，该路口实现了继承，浏览器兼容性等。,事件机制，模板机制是extjs组件架构中重要的机制：,通过事件的方法去扩展定制组件；,通过模板化内容来实现组件重用。,另外extjs核心功能还对function，date，string,array及任务等原生方法进行扩展,6,元素（Element）,一份HTML文档通常由大量的装饰元素（markup）所组成。每当浏览器加载当前的html文档，html文档其中的每一个标签都被翻译为HTMLElement以构建装饰树的文件对象模型,。,7,元素,Ext Core实现了Ext.Element类来封装各浏览器不同HTMLElement的对象。,Ext.Element,方法分类:,CSS与样式（如setStyle、addClass）,。,DOM查询或遍历（如query、select、findParent）,。,DOM操控（如createChild、remove）,。,元素的方位、尺寸（如getHeight、getWidth）,。,可以使用Ext.get方法创建Ext.Element的实例，达到封装普通的HTMLElement之目的。,8,享元模式,是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。 Ext在启动的时候就创建了一个全局的Ext.Element对象专为Flyweight的设计服务。这个全局的Flyweight实例可以为Dom里面任何一个节点保存引用。要访问这种Flyweight的对象使用Ext.fly方法即可。,9,Dom游历/操作,已知某个位置，我们要其附近位置的dom树中游历，是一件经常性的任务。Ext Core里面就有这样跨浏览器的方法，允许我们在dom之中穿梭自如。,（is，findParent，findParentNode，up等）,DHTML常见的一项任务就是DOM元素的增、删、改、查。鉴于不同浏览器的差别很大，搞起来会很麻烦，ExtCore就设计了一个抽离不同浏览器之间差异的API，并考虑了执行速度方面的优化。我们可以轻松地围绕DOM树做增、删、改、查的任务。,（appendChild，appendTo，insertBefore，replace等）,10,DomHelper配置项,DomHelper这个类对普通的DOM或HTML片段封装了一些常用的方法,。,.insertFirst(,tag: p,html: Hi I am the new first child,);,参数就是要创建的装饰元素在DomHelper中是怎么表示的，也就是DomHelper的配置选项，其配置项支持很多的属性，html片断也行，至于html属性就可以是Dom节点的很多属性了（css class、url、src、id等）,（Ext.,DomHelper,:createChild，wrap）,11,Html片断,Html片断，顾名思义，,是,html装饰中的某一部分。Ex,t,Core就是以html片断的形式修改控制dom，换言之，我们关心装饰片断即可修改该部分的dom，无须为浏览器的实现和性能而烦恼。Ext Core已经做足涵盖这方面的功夫，,我们,所做的只是提供好相关装饰元素,:,Ext.fly(elId).insertHtml(beforeBegin, Hi),12,事件控制,事件控制为解决跨浏览器的工作带来便利。,正如Ext.Element封装了原生的Dom类型节点，Ext.EventObject也是封装了浏览器的原生事件对象。Ext.EventObject的实例解决了各浏览器之间的差异。例如鼠标按钮被点击了、有按键被按下了、或者要停止事件的推进等的任务都有相应的方法参与。,Ext.fly(myEl).on(click, function(e, t) ,/ myEl有点击的动作,/ e是这次产生的事件对象，Ext.EventObject,/ t是HTMLElement目标,);,要将事件处理器和页面中的元素绑定在一起可以使用Ext.Element的on方法。它是addListener方法的简写形式。第一个参数是要订阅的事件类型和第二个参数是准备触发的事件函数。,（addListener/on，removeListener/un，Ext.EventObject）,13,高级事件功能,事件委托、事件缓冲、事件延迟等的这些功能都是属于高级事件的控制内容，Ext Core在此方面提供了一系列的配置选项。,委托delegation,委托化delegate,翻转hover,移除事件句柄removeAllListeners,是否一次性触发single,缓冲buffer,延时delay,目标target,14,尺寸&大小,&定位,某个元素在页面上，我们就想获得到其尺寸大小或改变它的尺寸大小。毫无意外下，Ext Core也把这些任务抽象为清晰的API供大家使用。这些都是setter的方法，可传入动画的配置参数，或即就是以个布尔型的true，表示这是默认的动画。,（getHeight，setHeight，getBorderWidth，getPadding，clip，等）。,通过Ext Core定义的API能快速地采集元素位置的各方面数据，归纳为get的或set的方法，全部浏览器都可通用。类似于上一节的尺寸大小的API，多数的setter方法支持动画效果。可在第二参数中传入动画的配置参数（object-literal configuration object），或即就是以个布尔型的true，表示这是默认的动画。,（getX，getY，getOffsetsTo，getLeft，setLocation等）,15,动画,Ext Core已经齐备了若干的动画的插件，附加在Ext.Element的身上，让你进一步地发挥这一组组预配置的动画，作出更“酷”的东东来。,动画支持八方位的定向，所以你可以选择八个不同的定位点来启动您的动画效果。,（slideIn/slideOut，puff等）,16,CompositeElement元素,什么是CompositeElement？,CompositeElement能够把一组元素视作一个元素来处理，这组元素的数量可以零个到多个。,CompositeElement采用与Ext.Element相同的接口，以简化程序员的工作，也可以减少处理集合上的那些一般内核检查（指要写“循环”的代码）。,通常CompositeElement由执行静态方法来获取得到。Ext.select()基于DomQuery来搜索整个文档，匹配符合特定选择符（Selecetor）的元素。,17,Ext.Ajax,Ext.Ajax对象继承自Ext.data.Connection，定义为单例提供了一个既统一又高度灵活的Ajax通迅服务。利用这个单例对象，就可以处理全体Ajax请求，并执行相关的方法、事件和参数。,Ext.Ajax的事件,每次请求都触发事件，这是全局规定的。,beforerequest (conn, opts) 任何Ajax请求发送之前触发。,requestcomplete (conn, response, opts) 任何Ajax成功请求后触发。,requestexception (conn, response, opts) 服务端返回一个错误的HTTP状态码时触发。,Ext.Ajax的属性,method：用于请求的默认方法，注意这里大小写有关系的，应为是全部大写（默认为undefined，如不设置参数就是POST，否则是GET）。,extraParams：收集各属性的对象，每次发起请求就会把该对象身上的各属性作为参数发送出去（默认为undefined）需要与Session信息和其它数据交互就要在这里设置。,url： 请求目标的服务器地址（默认为undefined），如果服务端都用一个url来接收请求，那么在这里设置过一次就足够了。,defaultHeaders：对请求头部设置的对象（默认为undefined）,18,Ext.Ajax主要方法,Ext.Ajax.request,：,就是发送与接收服务端函数的函数。,Ext.Updater,：,Ajax另外一个常见用法是动态更新页面中的原素不需要刷新页面。response方法暴露了el配置项，在请求之后根据内容设置到元素的innerHTML。,表单的Ajax式提交,：,用Ext.Ajax.request 的配置项提交表单:,19,DomQuery,什么是DomQuery？,DomQuery的作用在于提供选择符（Selector）、XPath的快速元素定位，对HTML与XML的文档都有效。,1,多选择符,：,你可以输入多个查询条件，然后在一个对象上面返回,2,根节点使用选择符,：,它可以支持一个根节点的概念。根节点的意思是如果有指定选择符的根节点表示从该节点上开始进行搜索。这样可以助于提升性能，因为若不存在根节点表示从document body开始进行搜索，速度自然比较慢。,3,查询链,：,对于构成复杂的查询情况，可以由多个查询条件组成查询链。依次按顺序进行属性链的查询。,元素选择符,，属性选择符，伪类选择符，CSS 值选择符等。,4元素选择符，5 属性选择符，6 伪类选择符，7 CSS 值选择符,20,输出装饰,DomHelper（下简称DH）是专用于动态生成装饰元素的实用工具，已解决大多数浏览器之间差别的问题，避免了原始操作DOM脚本的麻烦。对于HTML片断与innerHTML的操作，DH经充分考虑并在性能上有足够的优化。,注：Ext.DomHelper是一个单例，因此无须实例化即可调用其静态方法。,DomHelper配置项：DomHelper是根据DomHelper 配置项未决定生成在页面上的HTML，这DomHelper配置可视作任何HTML元素的等价物。,模板：Tpl模板、格式化函数，from的静态方法（对textarea有用）。,模板成员方法：添加和执行成员格式化函数。,21,关于JS的加强语法,当同时使用多个JavaScript库时，他们可能有各自的实现，但如果同名的方法、属性就犯大忌了，这种重叠将引入库与库之间的冲突基于这种状况，Ext谨慎处理加入到基础对象的方法数量。,函数：createCallback，createDelegate,数组：indexOf，remove,字符串：format，,22,辅助函数,Ext提供了增强Javascript与JSON若干方面的函数，功能上各自不一样但目的都是为了更方便地程序员使用好前端设施,：,apply与applyIf,，Url Encoding/Decoding。数组：each，toArray。,JSON：encode，decode。,览器与OS的判定：,Internet Explorer - Ext.isIE, Ext.isIE6, Ext.isIE7, Ext.isIE8,Firefox - Ext.isGecko, Ext.isGecko2, Ext.isGecko3,Opera - Ext.isOpera,Chrome - Ext.isChrome,Safari - Ext.isSafari, Ext.isSafari2, Ext.isSafari3,WebKit - Ext.isWebKit,Operating Systems - Ext.isLinux, Ext.isWindows, Ext.isMac,CSS,：CSS也有类似的判定，不同的样式会根据不同的操作环境适当添加到根元素和body上。,类型判定,：isEmpty，isArray，isObject，isFunction。,23,时控代码,Task Runner,：,是一个以特定时间为间隔然后执行函数的类。这对进行“拉”的操作是比较有用的，例如每30秒的间隔刷新内容,。,TaskMgr对象是TaslRunner的单例，这样使用起这个Task Runner便很快了。,DelayedTask,：,就是提供一个快捷的方式达到“缓冲”某个函数执行的目的。调用它之后，那个函数就会等待某段时间过去以后才会被执行。在此等待的期间中，如果task方法再被调用，原来的调用计时就会被取消。因此每一周期内最好只调用task方法一次。,24,类编程,JavaScript本身是基于原型的，这与普通基于类的编程语言相比，在实现继承的机制上有较大的出入。JavaScript中创建一个新类那便是修改了某个对象原型（prototype）的结果。Ext提供了许多简化这方面工作的函数。,Ext支持以下类风格的编程行为：继承扩展（extend），重写（overrride）/直接覆盖。这意味着开发者可以根据需求加入自己的行为，创建自己的类，或者修改某些函数让其更加合适,。,25,谢谢,26,