Ext core概述.pptVIP

Ext-core 张正华 2012-01-31 概述 Ext Core是一款具有多项功能的轻型JavaScript库，基于MIT许可为大家服务。在Ext Core中有许多激赏的功能，在倡导快速Web开发的同时也本着高质量、可伸缩性的代码的指导思想进行着。 Core库对DOM操作、Ajax、事件、动画、模板、00机制等的任务都有相应的支持。Core库基于MIT方式发布，无论是一般的动态页面和简单的应用程序都可选择使用。 结构图 跨浏览器/原生JS扩展 Ext Core以定义良好的面向对象知识体系来划分其自身与其他JavaScript库的关系，让你的代码达至一种清晰、便于复用的效果。Ext Core提供了跨浏览器的抽象层面： 操控遍历DOM CSS管理 事件的处理 Ajax与JSON 动画 除了以上DOM层面的内容，Ext Core还包括了Ext JS原来一些有用的功能： 基于类的继承方案 观察者类 产生HTML标签与模板 时控代码 URL编码与解码 核心文件Ext.js Ext.js文件是extjs的整个代码的基础，是最核心最重要的部分，extjs的许多高级语法和api及element组件都是基于ext.js文件里面定义的基础类和基本方法。 分析： （1）声明全局对象Ext （2）兼容旧版本 （3）浏览器兼容性 （4）一些核心方法 核心功能 extjs最底层架构的核心功能包含 事件处理， 模板功能， 基础特征， 原生对象扩展等。 使ext组件有良好的扩展性，易用性及代码复用性,ext即是命名空间，又是静态类，提供统一的入口，该路口实现了继承，浏览器兼容性等。 事件机制，模板机制是extjs组件架构中重要的机制： 通过事件的方法去扩展定制组件； 通过模板化内容来实现组件重用。 另外extjs核心功能还对function，date，string,array及任务等原生方法进行扩展 元素（Element） 一份HTML文档通常由大量的装饰元素（markup）所组成。每当浏览器加载当前的html文档，html文档其中的每一个标签都被翻译为HTMLElement以构建装饰树的文件对象模型。 元素 Ext Core实现了Ext.Element类来封装各浏览器不同HTMLElement的对象。 Ext.Element方法分类: CSS与样式（如setStyle、addClass） 。 DOM查询或遍历（如query、select、findParent）。 DOM操控（如createChild、remove） 。 元素的方位、尺寸（如getHeight、getWidth）。 可以使用Ext.get方法创建Ext.Element的实例，达到封装普通的HTMLElement之目的。 享元模式 是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。 Ext在启动的时候就创建了一个全局的Ext.Element对象专为Flyweight的设计服务。这个全局的Flyweight实例可以为Dom里面任何一个节点保存引用。要访问这种Flyweight的对象使用Ext.fly方法即可。 Dom游历/操作 已知某个位置，我们要其附近位置的dom树中游历，是一件经常性的任务。Ext Core里面就有这样跨浏览器的方法，允许我们在dom之中穿梭自如。（is，findParent，findParentNode，up等） DHTML常见的一项任务就是DOM元素的增、删、改、查。鉴于不同浏览器的差别很大，搞起来会很麻烦，ExtCore就设计了一个抽离不同浏览器之间差异的API，并考虑了执行速度方面的优化。我们可以轻松地围绕DOM树做增、删、改、查的任务。（appendChild，appendTo，insertBefore，replace等） DomHelper配置项 DomHelper这个类对普通的DOM或HTML片段封装了一些常用的方法。 .insertFirst({ tag: span class=stringp/span, html: span class=stringHi I am the new first child/span }); 参数就是要创建的装饰元素在DomHelper中是怎么表示的，也就是DomHelper的配置选项，其配置项支持很多的属性，html片断也行，至于html属性就可以是Dom节点的很多属性了（css class、url、src、id等）（Ext.DomHelper:createChild，wrap） Html片断 Html片断，顾名思义，是html装饰中的某一部分。Ext Core就是以html片断的形式修改控制dom，换言之，我们关心装饰片断即可修改该部分的d