- 浏览: 1163832 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhizhen23:
LZ 提供的链接地址失效了
重写的isPlainObject方法 -
LovingBaby:
LovingBaby 写道function fun() {}f ...
读jq之二(两种扩展) -
LovingBaby:
说的很清楚!jQuery作者为了实现简洁调用的苦心!高超的编程 ...
读jq之一(jq对象的组成) -
hard_ly:
...
将伪数组转换成数组 -
zlxzlxzlxzlxzlx:
这不能算是任意进制之间的转换,例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制
终于越来越接近Ext的核心了。这篇开始Ext.Element,这里说的Ext元素指的是Ext.Element类的实例。
任何前端库都会涉及到对HTMLElement的操作,JQuery更是以其为中心,一个$()函数调用后将DOM元素以索引方式存在 JQuery对象 中。
Ext则使用了一个称为 Ext.Element 的类,如 Ext.get/Ext.fly 返回的都是该类的实例对象。许多操作如样式,添加事件等都封装到该类里。
Ext.Element的定义大概框架如下
Ext.Element = function(element, forceNew){ var dom = typeof element == "string" ? DOC.getElementById(element) : element, id; if(!dom) return null; id = dom.id; if(!forceNew && id && Ext.elCache[id]){ // element object already exists return Ext.elCache[id].el; } this.dom = dom; this.id = id || Ext.id(dom); }; var D = Ext.lib.Dom, DH = Ext.DomHelper, E = Ext.lib.Event, A = Ext.lib.Anim, El = Ext.Element, EC = Ext.elCache; El.prototype = { ... }
可以看到,采用了的是很传统的JS写类方式:构造器+原型 方式。构造器内执行大概如下
1,如果参数element是字符串则使用document.getElementById获取,否则直接返回element(通常是HTMLElement)。
2,给变量 id赋值,来自dom.id
3,forceNew不传或传false情况下,优先从缓存中取。
4,给this挂上dom和id属性。
3处有点绕人,
return Ext.elCache[id].el;
我们知道这是在定义一个类,使用new操作符。如
var ele = new Ext.Element('head');
既然是new,里面怎么又return了呢?一般是函数调用(),里面有return。构造器里一般都是定义一些字段。其实当构造器中return的是对象类型时是允许的,如果return的是基本类型,又使用new调用函数则会出现非预期的效果。对于这点感兴趣的详见:具名函数的四种调用方式 系列 。
构造器内其实很少代码,比较简单。随后是定义了一些变量如D,DH,这些多数是之前篇幅中提到的。Ext采用这种简单的设计模式:组合。Bruce Eckel在《Think in Java》中所言,避免滥用继承,多数情况下组合已足以。
接着看挂在prototype上的第一个方法 set
set : function(o, useSet){ var el = this.dom, attr, val, useSet = (useSet !== false) && !!el.setAttribute; for(attr in o){ if (o.hasOwnProperty(attr)) { val = o[attr]; if (attr == 'style') { DH.applyStyles(el, val); } else if (attr == 'cls') { el.className = val; } else if (useSet) { el.setAttribute(attr, val); } else { el[attr] = val; } } } return this; },
该方法用来设置HTMLElement(如div)的属性如id、style、class等。第一个参数是个对象(Hash)如{id:'uname'},第二个参数布尔类型,顾名思义useSet为true即使用setAttribute来设置属性。
至于什么使用setAttribute,什么时候使用点操作符(.)给元素设置属性。这里 给出了详尽的解释。
该方法内部使用for in来遍历对象,我们知道默认情况下 for in 不会去遍历原形链的属性 的。
对象的hasOwnProperty方法对继承于原形链的属性是 检测不到 的,即返回false。因此这里hasOwnProperty(attr) 这个判断完全是多余的。
接着看,又是多个if分支
style,调用DH.applyStyles。但DH.applyStyles方法有bug 。
cls,设置类名(class)
useSet为true,使用setAttribute设置
最后使用中括号操作符(等价于点操作符)
看下一个方法 is
is : function(simpleSelector){ return Ext.DomQuery.is(this.dom, simpleSelector); },
该方法用来检测dom元素是否具有给定的css选择器。
如对于<div id="d1" class="container"></div>,Ext.get('d1').is('.container')返回的是true。注意字符串container前得有个点。因为是css类选择器。
该方法内部调用Ext.DomQuery.is,暂不提。
接下来是 focus 方法,
focus : function(defer, /* private */ dom) { var me = this, dom = dom || me.dom; try{ if(Number(defer)){ me.focus.defer(defer, null, [null, dom]); }else{ dom.focus(); } }catch(e){} return me; },
focus方法用来获取焦点,defer为数字,即延迟函数调用的时间,单位是毫秒。
参数dom对于使用Ext库的客户端程序员来说是用不到的,仅提供给库内部使用,即递归调用。
me.focus.defer(defer, null, [null, dom]);
这句较难理解,即递归调用。me是this,this是Ext.Element对象自身。在focus内部又调用自己。
me.focus.defer 中的 defer哪来的? 还记得 第三篇 原型扩展中提到的为Function.prototype扩展的defer方法吗?没错,就是它。
如果没有传defer,那么直接调用dom.focus。这里使用了try catch,是因为某些情况下会出异常。
接下来是 blur 方法,很简单就不说了。往下看 getValue 方法
getValue : function(asNumber){ var val = this.dom.value; return asNumber ? parseInt(val, 10) : val; },
获取元素的value,一般是form内元素如input,select,textarea等。这里很巧妙,如果asNumber为true则偷偷的将其 转换为数字类型 了。
接下来是 addListener / removeListener / removeAllListeners / purgeAllListeners ,它们内部使用的是Ext.EventManager。第九篇 提到了,不说了。
往下是 addUnits 方法,该方法是内部用的。暂不提。
接下来是 load 方法
load : function(url, params, cb){ Ext.Ajax.request(Ext.apply({ params: params, url: url.url || url, callback: cb, el: this.dom, indicatorText: url.indicatorText || '' }, Ext.isObject(url) ? url : {})); return this; },
该方法把请求返回的html片段作为该元素的innerHTML填充。内部调用的是Ext.Ajax.request。
接着是isBorderBox 方法
isBorderBox : function(){ return noBoxAdjust[(this.dom.tagName || "").toLowerCase()] || Ext.isBorderBox; },
标准模式中对于具有border的元素如select会返回1,怪异模式中对于input,select,textarea元素返回1。如果不是这些元素会直接返回Ext.isBorderBox。
isBorderBox = isIE && !isStrict,
接下来是 remove 方法,
remove : function(){ var me = this, dom = me.dom; if (dom) { delete me.dom; Ext.removeNode(dom); } },
该方法会删除该dom元素,包括dom文档中的,ext缓存中的,及dom元素上的事件handler。
往下是 hover 方法,
hover : function(overFn, outFn, scope, options){ var me = this; me.on('mouseenter', overFn, scope || me.dom, options); me.on('mouseleave', outFn, scope || me.dom, options); return me; },
意义及用法就不提了,内部使用me.on,on是addListener的简写。mouseenter和mouseleave 的实现在 第四篇 提到 了。
接着是 contains 方法,
contains : function(el){ return !el ? false : Ext.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el); },
判断是否包含el元素,内部实现也在 第四篇 中提到。
再看 getAttribute 方法,
getAttribute : Ext.isIE ? function(name, ns){ var d = this.dom, type = typeof d[ns + ":" + name]; if(['undefined', 'unknown'].indexOf(type) == -1){ return d[ns + ":" + name]; } return d[name]; } : function(name, ns){ var d = this.dom; return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name]; },
该方法用来获取元素的属性值。可以看到对于IE和非IE有两个版本,IE中对undefined,unknow类型做了处理。其它浏览器则是标准的实现。
最后一个是 update 方法,
update : function(html) { if (this.dom) { this.dom.innerHTML = html; } return this; }
该方法使用innerHTML来更新元素内容。
- Element.rar (8.6 KB)
- 下载次数: 9
发表评论
-
读Ext之十五(操作批量元素)
2011-02-07 09:14 2183前两篇读了Ext.Element,这篇介绍的Ext.Compo ... -
读Ext之十四(Ext元素)
2011-01-18 14:57 2163上篇读了Ext.Element的部分方法,这篇继续。El.ad ... -
读Ext之十二(在各个位置插入元素)
2011-01-13 13:17 7765IE 除了发明 innerHTML这个快捷创建DOM元素(及其 ... -
Ext core 3.1.0的一个大Bug
2011-01-12 19:28 6504Ext core 3.1.0(下载地址 )中Ext.DomH ... -
读Ext之十一(通过innerHTML创建元素)
2011-01-09 22:19 2049innerHTML 这个由 IE 引入的属性成了事实标准, ... -
读Ext之十(解析JSON)
2011-01-03 11:36 4519首先,回到第一篇 。 ... -
读Ext之九(事件管理)
2010-12-08 08:39 2955Ext的事件管理非常强大。主要定义在Ext.EventMana ... -
读Ext之八(原生事件对象的修复及扩充)
2010-11-27 18:51 2271Ext库也对浏览器原生的事件对象做了包装,以保证兼容所有浏览器 ... -
读Ext之七(多任务定时管理)
2010-11-25 17:24 2767Ext.util.TaskRunner 用来管理多任务定时管理 ... -
读Ext之六(延迟任务的执行)
2010-11-24 17:36 3925Ext.util.DelayedTask类从名字上就可以看出它 ... -
读Ext之五(Dom的低级封装)
2010-11-14 12:08 2514上篇看了ext-base-event.js(E ... -
读Ext之四(事件的低级封装)
2010-11-11 17:10 3452十一前读了Ext core的Ext.js,这篇开始读ext-b ... -
读Ext之三(原型扩展)
2010-09-30 09:51 3142续上篇, Ext.ns = Ext.name ... -
读Ext之二(实用方法)
2010-09-24 16:37 4942上篇看到Ext.extend,接着往下看。 Ext.n ... -
读Ext之一(实用方法)
2010-09-24 10:19 4034第一句 window.undefined = window. ...
相关推荐
"读Ext之十五(操作批量元素)"这篇博客文章可能详细讲解了如何在ExtJS中对多个DOM元素进行批量操作,这对于提高代码效率和减少重复工作至关重要。在ExtJS中,处理一组元素时,我们通常会使用CompositeElementLite类...
本文将深入探讨“读Ext之十二(在各个位置插入元素)”这一主题,主要关注如何利用ExtJS中的DomHelper工具来高效地在DOM树中插入元素。 首先,DomHelper是ExtJS中用于操作DOM的一个重要工具类,它的主要职责是创建...
在IT行业中,前端开发是至关重要的一环,而优秀的用户界面设计是提升用户体验的关键因素之一。"收集的一些常用的ext图标"这个资源包显然聚焦于前端开发中的图标应用,特别是与EXT框架相关的图标。EXT是一个强大的...
1. **Ext组件库**:Ext的核心是其组件系统,包括各种UI组件如表格、树形视图、面板、窗口、表单元素等。每个组件都有自己的属性、方法和事件,通过这些组件可以构建出复杂的用户界面。 2. **数据绑定**:Ext的数据...
##### 步骤三:从XML元素构建树节点 ```javascript function treeNodeFromXml(XmlEl) { var t = ((XmlEl.nodeType == 3) ? XmlEl.nodeValue : XmlEl.tagName); if (t.replace(/\s/g, '').length == 0) { return ...
2. **语法高亮**:不同类型的代码元素有不同的颜色显示,使代码更易读。 3. **代码格式化**:自动整理代码格式,保持代码整洁。 4. **错误检查**:在编写过程中检查代码错误,及时发现问题。 5. **调试工具**:支持...
总的来说,"Ext IDE"通过与Eclipse的集成,为EXT开发提供了一站式的解决方案,提升了开发者的生产力和代码质量,是EXT开发者不可或缺的工具之一。安装并熟练使用这个插件,将使EXT项目的开发变得更加得心应手。
EXT是一个强大的JavaScript库,主要用于构建富客户端应用程序,它提供了丰富的组件和用户界面元素。jQuery则是一个轻量级的JavaScript库,简化了DOM操作、事件处理和动画效果。 1. **EXT开发技术准备**: - EXT的...
2. **语法高亮**:在编辑器中,Spket会根据Ext JS的语法规则进行颜色标记,使代码更易读,便于快速定位问题。 3. **错误检查**:在编码过程中,Spket能实时检测代码中的语法错误和潜在问题,有助于早期发现并修复...
1. **图形化界面**:EXT的组件库提供了各种预定义的UI元素,如按钮、表单、面板等,可以用来构建流程设计的交互界面。jGraphX则负责绘制流程图,使得用户可以通过拖拽节点、连接线来直观地创建和修改流程。 2. **...
### Ext JS框架 经验之作2000页 #### 概述 本文档旨在提供一个全面且深入的指南,帮助读者理解并掌握Ext JS框架的各个方面。Ext JS是一款非常强大的JavaScript库,用于构建交互式的Web应用程序。它以其丰富的组件库...
在设计领域,字体是传达信息和创造视觉效果的重要元素。今天我们要探讨的是名为"Worstveld_sling_ext"的独特字体,它以其独特的风格和特性,在众多字体中独树一帜。这款字体的设计灵感可能源于荷兰设计师Gerrit ...
在Ext2文件系统中,具体文件系统管理的是一个逻辑空间,这个逻辑空间就像一个大的数组,数组的每个元素就是文件系统操作的基本单位——逻辑块,逻辑块是从0开始编号的,而且,逻辑块是连续的。与逻辑块相对的是物理...
【标题】"ext-2.2.zip"是一个压缩文件,其中包含了"ext-2.2"这个特定版本的EXTJS库。EXTJS是一个基于JavaScript的前端框架,它提供了丰富的用户界面组件和强大的数据管理功能,常用于开发交互式Web应用程序。 ...
在给定的描述中提到,XCodeBuilder是一个这样的工具,它不仅能够生成.NET三层架构的代码,还能生成处理层代码以及EXT脚本。这有助于开发人员快速构建用户界面,提高开发效率。 在EXTJS中,一个典型的网格(grid)...
理解CSS有助于创建响应式、易读且美观的网页。 2. **DOM(文档对象模型)**: DOM是HTML和XML文档的结构化表示,提供了通过编程方式操作网页内容的接口。学习DOM能帮助开发者动态地添加、修改或删除网页元素,实现...
同时,也可以通过改变界面元素(如图标、数字标签)来显示未读消息的数量。 8. **样式定制**:ExtJS允许通过CSS或SASS进行样式定制,以达到与QQ类似的视觉效果。使用`Ext.util.CSS`和`Ext.dom.Element`可以方便地...
12. `.x-date-middle, .x-date-left, .x-date-right`:日期选择器相关元素的字体大小,确保日期选择的易读性。 13. `.x-date-mp td, .x-date-mp-btns button`:日期选择对话框的字体大小,便于选择日期。 14. `.x-...