网络编程
位置:首页>> 网络编程>> JavaScript>> Ext.js源码研读总结

Ext.js源码研读总结

作者:yemoo 来源:yemoo博客 发布时间:2009-03-04 12:06:00 

标签:Extjs,Ext,前端,UI,源码

今天把Ext.js源码又读了一遍,不过这次比较认真。看完代码,有了不少收获也遇到不少问题。

主要总结如下:
1、document.execCommand("BackgroundImageCache", false, true);

该代码主要是为了防止在IE6中背景图片闪烁的问题。详细请看本文:终结IE6下背景图片闪烁问题

2、namespace方法:

namespace : function(){ 
    var a=arguments, o=null, i, j, d, rt; 
    for (i=0; i<a.length; ++i) { 
        d=a[i].split("."); 
        rt = d[0]; 
        eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';'); 
        for (j=1; j<d.length; ++j) { 
            o[d[j]]=o[d[j]] || {}; 
            o=o[d[j]]; 
        } 
    } 
},


从函数的实现可以知道,创建一个复杂的命名空间如"com.soft.module1"可以直接Ext.namespace('com.soft.module1');而不必如示例所示逐级创建:Ext.namespace('com','com.soft','com.soft.module1');

3、num方法

num : function(v, defaultValue){ 
    if(typeof v != 'number' || isNaN(v)){ 
        return defaultValue; 
    } 
    return v; 
},


要判断是否是有效数字,不能只通过typeof v!='number'来判断,因为有时通过parseInt等方法来将一些无效数字进行转换时,得到的结果是NaN,其typeof的结果是number但不是有效数字,因此要通过typeof v != 'number' || isNaN(v)来判断有效数字。

4、有关leftPad

leftpad : function (val, size, ch) { 
        var result = new String(val); 
     //省略其它代码 
}


此处将val通过new String显式转换,我想不仅仅是将各类变量转为string,还有一个很重要的原因:防止内存泄露! 对于直接量,当调用它的方法时,JS会自动将其转换为对应的对象,这个过程会出现内存泄露!为了避免这个问题,一般建议将操作直接量改为操作对象。


需要总结的大概也就这些,相比学习到东西来说,让我产生的疑问要更多一些。
无论如何,都列举到这里,一定要慢慢弄清楚,如果那位朋友明白,请给予指教,先谢过了!


1、override方法

override : function(origclass, overrides){ 
    if(overrides){ 
        var p = origclass.prototype; 
        for(var method in overrides){ 
            p[method] = overrides[method]; 
        } 
        if(Ext.isIE && overrides.toString != origclass.toString){ 
            p.toString = overrides.toString; 
        } 
    } 
},


问题:既然判断的时候使用overrides.toString != origclass.toString,但是最后重写toString确实重写p,这如何解释?

2、combine方法

该方法中有一个写法Array.prototype.slice.call(a, 0)用于将类数组的对象转为数组类型,但是发现一个问题:在IE中,dom中的nodeList对象不能通过该方法转换为数组,这是怎么回事?

3、getBody方法

getBody : function(){ 
    return Ext.get(document.body || document.documentElement); 
},


问题:getBody方法的调用一般是在页面加载完成后才会调用,而且此函数的意义应该是根据浏览器解析模式来获取到根元素,但是document.body || document.documentElement的写法有什么意义,经我测试,当页面dom完成后,无论是在何种浏览器上,这个表达式返回的都是document.body,也就是不论是标准模式或者怪异模式,document.body都是存在的。这种写法还有什么意义?

4、removeNode方法

removeNode : isIE ? function(){ 
    var d; 
    return function(n){ 
        if(n && n.tagName != 'BODY'){ 
            d = d || document.createElement('div'); 
            d.appendChild(n); 
            d.innerHTML = ''; 
        } 
    } 
}() : function(n){ 
    if(n && n.parentNode && n.tagName != 'BODY'){ 
        n.parentNode.removeChild(n); 
    } 
},


问题:在IE中,也是可以通过n.parentNode.removeChild(n);的方法来删除节点的,但这里为什么要对IE做特殊的删除操作?

5、type方法

type : function(o){ 
    if(o === undefined || o === null){ 
        return false; 
    } 
    if(o.htmlElement){ 
        return 'element'; 
    } 
    var t = typeof o; 
    if(t == 'object' && o.nodeName) { 
        switch(o.nodeType) { 
            case 1: return 'element'; 
            case 3: return (/\S/).test(o.nodeValue) ? 'textnode' : 'whitespace'; 
        } 
    } 
    if(t == 'object' || t == 'function') { 
        switch(o.constructor) { 
            case Array: return 'array'; 
            case RegExp: return 'regexp'; 
            case Date: return 'date'; 
        } 
        if(typeof o.length == 'number' && typeof o.item == 'function') { 
            return 'nodelist'; 
        } 
    } 
    return t; 
},


问题:这个方法我发现存在很多问题:(1)o.htmlElement,什么时候一个对象存在htmlElement。(2)通过typeof o.length == 'number' && typeof o.item == 'function'的方式判断nodeList并不准确,只能在非IE浏览器中获取正确结果,IE中o.item不是函数。(3)if(t == 'object' || t == 'function') 这句话中t=='function'完全多余,这个if语句中根本没有对function类型做处理,此外采用o.constructor的方法判断具体的对象类型有问题,提倡的一种方式是通过Object.prototype.toString.call(o)来判断,后面的isDate和isArray方法通过属性来判断类型同样存在问题。总之这个函数一定是有漏洞的。

6、useShims 至今我仍不清楚这个属性是做什么用的。
一个ext.js就让我发现了这么多疑问,看来JS还需要大大加强啊。

0
投稿

猜你喜欢

  • 这个代码不是很完善,能实现基本的功能;另外有个问题,就是divOpenWin层的定位问题:发现如果其属性设置成display:none,那么
  • 本文介绍的圆角方法很特别,有创意。昨天群里大家讨论到一个豆瓣上的按钮,下面这个。在这里用到了不同宽度的按钮,但是只是用到了一个图片。&nbs
  • 看了网站LOGO设计规范的思考的第一部分关于logo设计基础,现在接着来谈谈网络LOGO的设计。四、网络LOGO的设计 古代皇家的纹章,有条
  • 前不久听到这样一个面试的故事:面试官:你准备在我们公司做些什么事情?(大致这个意思)面试人:我准备在公司做网站重构,把原来是table的页面
  • 从MySQL 5.0.2开始,通过mysql_stmt_attr_set() C API函数实现了服务器端光标。服务器端光标允许在服务器端生
  • asp中fso怎样判断一个盘上是否有文件,实例代码,需要的朋友可以试试:<% dim objfolder dim 
  • 不知道用ASP写代码的朋友是不是和我有一样的感受,ASP中最头疼的就是调试程序的时候不方便,我想可能很多朋友都会用这样的方法&ldq
  • 使用 IE8 时发现其原生的 JSON 解析器存在 Bug,让我们先用 IE8 打开 DEMO 页面体验下。http://lab.grace
  • 1. position:static所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该
  • 快照复制是在数据库之间对数据以及数据库对象进行复制并进行同步,以确保多个数据库之间一致性的一个法宝。简单的说,快照复制就是实现把一个数据库服
  • 有时候想为我们的网页提供多语言支持,如果一种语言用一张网页来做实在太麻烦了,幸好Google提供了语言工具功能,下面介绍如何利用它来实现网页
  • 你的设计为什么平平无奇,为什么吸引不到别人的眼球,这里先来说说什么是焦点(也可以称兴趣中心或者视觉中心),我认为用焦点更能简单准确的阐述。有
  • 具体特征如下: 1、通过模板实现俄文正常。 2、通过后台数据库生成的静态俄文信息,后台显示正常, 前台乱码。 3、英文正常。 和该主题相关的
  • 阅读上一篇:FrontPage2002简明教程四:网页超级链接 一、三种添加CSS的方式 在FrontPage 2002里可以通过三种方式给
  • 语法结构: 1. Cast 语法结构:CAST ( expression AS data_type [ ( length ) ] ) 2.
  • 本讲的内容是使用ASP的ActiveX Server Components(组件),说实话下面的内置组件我们用的很少。一、 Browser
  • “网页设计三剑客”可能很多新同学都没听说过,因为缔造神话的公司已经快销声匿迹。“网页设计三剑客”是Macromedia公司旗下Dreamwe
  • 1、选取最适用的字段属性MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快。因此,在创建表
  • Macromedia StandardMacromedia Dreamweaver MXMenu Commandsphotoshop快捷键大
  • ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写 的,主要用于创建前端用户界面,是一个与后台技术无关的
手机版 网络编程 asp之家 www.aspxhome.com