`
zhouyrt
  • 浏览: 1162211 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

读Ext之一(实用方法)

阅读更多

第一句

window.undefined = window.undefined;

 

兼容IE6以下的浏览器,有人 解释过了。

 

定义Ext全局变量

Ext = {
    version : '3.1.0'
};
  

注意这里没有使用var,不使用var声明变量被认为是不好的编程习惯,尤其是函数内声明变量不写var更被称为是无穷无尽的Bug根源。这里则不会,因为变量Ext是该库唯一的全局变量(命名空间)。其它Ext源码中的变量声明都加上了var。

 

给Ext添加静态apply方法,该方法是核心方法之一,会用其扩展Ext。

Ext.apply = function(o, c, defaults){
    // no "this" reference for friendly out of scope calls
    if(defaults){
        Ext.apply(o, defaults);
    }
    if(o && c && typeof c == 'object'){
        for(var p in c){
            o[p] = c[p];
        }
    }
    return o;
};

 

该方法有两种执行方式:

其一,只传o,c时直接将c上的所有属性/方法拷贝给o后返回;

其二,defaults也传时,会将defaults,c上的所有属性/方法都拷贝给o。这里实现的很巧妙,同时有点绕人。

三个参数都传,会执行Ext.apply(o, defaults),即自身实现中调用自身。defaults为c,即当传两个参数时会直接进行对象拷贝。举个例子一目了然,在Ext.apply中加上一个输出语句

Ext.apply = function(o, c, defaults){
    // no "this" reference for friendly out of scope calls
    if(defaults){
        Ext.apply(o, defaults);
    }
    if(o && c && typeof c == 'object'){
        for(var p in c){
        	alert(p); // 此处是添加的输出语句
            o[p] = c[p];
        }
    }
    return o;
};
var obj = {}, obj1 = {name:'jack'}, obj2 = {age:33};
Ext.apply(obj,obj1,obj2);

 

会发现先弹出age,再是name。即先拷贝defaults,再是c。

 

接下来是个自执行的匿名函数,执行完后给Ext上扩充许多实用属性或方法。先定义了一些局部变量idSeed,浏览器判断之类。idSeed在做Dom缓存时用到。接下来,

if(isIE6){
    try{
        DOC.execCommand("BackgroundImageCache", false, true);
    }catch(e){}
}
  

这段代码用来解决IE6下css背景图不缓存bug,也 有人 解释过了。

 

接下就是一个Ext.apply(Ext,{...}),给Ext对象扩展许多实用属性及方法。

 

注意 Ext.isStrict 并非判断html文档模式为严格模式,而是指标准模式,如<!DOCTYPE HTML>声明会返回true。关于文档模式猛击:http://hsivonen.iki.fi/doctype ,国内的 秦歌 翻译了该篇文章。

 

Ext.isSecure 判断采用https或是其它。

 

Ext.applyIf 设计的很巧妙,它会把对象没有的属性和方法拷贝下来,已经有的则不拷贝。Ext.apply 则会覆盖已有的属性/方法。

ECMAScript 5已经发布半年多了,添加了一些新的API方法,如Array的indexOf,forEach等方法,部分新版本浏览器已经支持这些方法来,但我们想为老的浏览器扩展该方法。可能会这样写

var proto = Array.prototype;
if(!proto.indexOf){
	proto.indexOf = function(){
		// ...
	}
}
if(!proto.forEach){
	proto.forEach = function(){
		// ...
	}
}

即保证优先使用浏览器原生支持的API方法,不支持的使用自定义实现的。但这里每次都需要判断下Array原型上是否存在该方法。
google closure  实现方式类似使用了三元运算符,每次都要判断下,相对丑陋。网上有一些对google closure的 批评
,及一些效率低下的 具体分析  ,批评者甚至包括大牛:Dmitry Baranovskiy 。相对来说,Ext.applyif则使的API的扩展很优雅。
 

Ext.id方法会为HTMLElement元素随机生成一个id,默认以"ext-gen"开头。

 

接下来是Ext.extend方法,该方法也是核心方法之一,整个ext框架继承都是以该方法来扩展的。该方法实现依赖于Ext.override,先看override

override : function(origclass, overrides){
    if(overrides){
        var p = origclass.prototype;
        Ext.apply(p, overrides);
        if(Ext.isIE && overrides.hasOwnProperty('toString')){
            p.toString = overrides.toString;
        }
    }
}

 

将对象overrides的所有属性/方法拷贝到类origclass的原型上。需要注意的是后面的if判断,IE中for in不能遍历对象的Object的toSting等方法,因此需要特别处理一下。我测试IE9 beta重写对象的内置方法如toString后是可用for in遍历的,见 for in的缺陷  。IE9 beta刚刚发布,不知今后Ext团队是否会修改此处的判断。

 

Ext.extend是js继承最经典的实现方式了,我曾经模仿其(简化版)应用在 51ditu

extend : function(){
    // inline overrides
    var io = function(o){
        for(var m in o){
            this[m] = o[m];
        }
    };
    var oc = Object.prototype.constructor;
    return function(sb, sp, overrides){
        if(Ext.isObject(sp)){
            overrides = sp;
            sp = sb;
            sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};
        }
        var F = function(){},
            sbp,
            spp = sp.prototype;

        F.prototype = spp;
        sbp = sb.prototype = new F();
        sbp.constructor=sb;
        sb.superclass=spp;
        if(spp.constructor == oc){
            spp.constructor=sp;
        }
        sb.override = function(o){
            Ext.override(sb, o);
        };
        sbp.superclass = sbp.supr = (function(){
            return spp;
        });
        sbp.override = io;
        Ext.override(sb, overrides);
        sb.extend = function(o){return Ext.extend(sb, o);};
        return sb;
    };
}(),

 

整体浏览,可以看到 Ext.extend 的实现是通过一个匿名函数执行,执行后返回function,这个function才是真正的Ext.extend。

匿名函数中有两个私有函数io,oc。这种组织代码的方式非常简练,通过匿名函数自执行,在匿名函数中你可以做任何复杂的操作,最终的目的返回需要的接口函数或类。

 

有三个参数,sb、sp、overrides分别代表subClass(子类)、superClass(父类)及覆盖子类的配置参数。

 

以下分三种情况讨论,第一,二种情况Ext.extend的第二个参数都是对象类型

 

1, Ext.extend不光是用来实现类继承的,还可以用来写类,一年前 讨论 过 。 

 

2, 用来扩展Ext库自身类,这种情况是比较频繁的

MyGridPanel = Ext.extend(Ext.grid.GridPanel, {
    constructor: function(config) {
        MyGridPanel.superclass.constructor.apply(this, arguments);
    },
    yourMethod: function() {
        // etc.
    }
});

 

这里以Ext.grid.GridPanel为基础,生成了一个新类MyGridPanel

 

3, 真正意义类继承,即第一,二个参数都是类(function)。1年前也总结过js如何实现 继承工具函数

 

篇幅已经很长了,重点说下 Ext.apply, Ext.applyif, Ext.override, Ext.extend 的区别

 

Ext.apply, Ext.applyif, Ext.override 都是对对象 进行扩展的方法,Ext.extend则是对 操作的方法。

 

Ext.apply 扩展时对已经存在的属性/方法会被覆盖掉, 通常用它来扩展普通对象.

Ext.applyif 扩展时不会覆盖已经存在的属性/方法,通常用它来扩展核心js,如Array.prototype,String.prototype等。

Ext.override 扩展某一个类的原型,可以覆盖toString方法。

 

Ext.extend 用来写类或继承,或者说用来扩展类。

 

 

 

  • Ext.rar (9.3 KB)
  • 下载次数: 126
分享到:
评论
20 楼 jin_yun_guang 2012-09-17  
楼主87v5
19 楼 xzxw1115 2011-01-27  
好贴,楼主我关注你了.期待您更多这样的帖子
18 楼 kanwangzjm 2011-01-27  
我也在学习Ext,楼主的资料太好了!
17 楼 hunnuxiaobo 2011-01-21  
好文章!博主再接再厉!
16 楼 selvenfx2009 2010-09-29  
大家都在顶  那小弟也来顶你个。。。
15 楼 lixinlixin2008 2010-09-28  
学习学习~~~
14 楼 younggun 2010-09-27  
写得很不错,期待继续
13 楼 goldendays 2010-09-27  
顶,楼主努力。
12 楼 skyfen 2010-09-27  
顶就一个字,楼主努力。
11 楼 Javakeith 2010-09-26  
希望一直读下去!
10 楼 522656914 2010-09-26  
太喜欢这种文章了,楼主出本书吧《手把手教你Extjs》
9 楼 zhouyrt 2010-09-26  
谢谢鼓励,第二篇:http://snandy.iteye.com/blog/770487

有空我会继续读下去。
8 楼 beeke 2010-09-26  
很好的一篇源码分析贴,写了很多问题的来龙去脉
好多ib的,投了一堆新手帖
7 楼 atian25 2010-09-26  
写的不错,希望能看到续文.

ps:那些投新手的,不知道他们是否知道extjs是什么
6 楼 darwintest 2010-09-26  
讲的比较详细,好帖子
5 楼 wmj2003 2010-09-26  
讲的挺好,通俗易懂。鼓掌!
4 楼 雪中飞狐 2010-09-25  
楼主讲的挺细的。
3 楼 kuchaguangjie 2010-09-25  
不错,我也在学 ext 最近,还在研究 ext 超级庞大的 api,过段时间也研究研究 源码 ~~~
有了 jquery 和 ext 的源码后,我们可以多开开 js 的眼界了~~
2 楼 pfans 2010-09-25  
又是一篇读源码的文章,不知楼主能读到几篇?
1 楼 dreampuf01 2010-09-25  
....只有ext-core啊.....不过瘾..

相关推荐

    Windows读取Ext4分区的工具 Ext2Read

    Linux最常用的文件系统类型之一就是EXT系列,包括EXT2、EXT3和EXT4。然而,Windows操作系统默认并不支持直接读取这些格式的分区。这时,就需要借助第三方工具来实现这一目标,例如“Windows读取Ext4分区的工具”——...

    读Ext之六(延迟任务的执行)

    在JavaScript的世界里,异步编程是核心之一,而延迟任务的执行则是异步处理中的重要概念。本篇文章将深入探讨“延迟任务的执行”,通过分析`DelayedTask.js`这个文件,我们可以了解到如何在Ext框架中实现延迟任务。...

    在windows下使用Ext2Fsd访问EXT4分区

    但有一些第三方工具可以帮助我们解决这个问题,其中之一就是Ext2Fsd。Ext2Fsd是一个免费的开源软件,专门设计用于Windows系统上读/写Linux的EXT2、EXT3和EXT4文件系统。 **Ext2Fsd的主要功能:** 1. **读写支持**...

    ext4-exactor.zip

    EXT4,全称为第四代扩展文件系统(Fourth Extended File System),是Linux内核中最常见的日志文件系统之一。它继承了EXT3的特性,并引入了一些重要的改进,如更大的文件系统大小、更快的挂载和卸载速度、更高效的元...

    ext2.3 官方包 2.2中文手册

    EXT2.3是Linux操作系统中广泛使用的文件系统之一,它由Erich Boleyn和Hans Reiser在1992年开发,是EXT2(第二扩展文件系统)的改进版本,后续发展为EXT3(第三扩展文件系统)。EXT2.3官方包2.2中文手册提供了关于该...

    Ext3_2综合应用的例子

    **Ext3_2文件系统详解** Ext3_2是一种广泛使用的Linux文件系统,全称为“Extended File System version 3 second generation...尽管有更新的文件系统出现,但Ext3_2的稳定性和兼容性使其在许多场景下仍然具有实用性。

    EXT2.0 简明教程.rar

    EXT2.0在当时是Linux社区广泛使用的标准文件系统之一,尤其在早期的Linux发行版中。它在EXT1的基础上增加了许多增强功能,如更大的磁盘容量支持、更高效的文件管理以及日志记录功能的缺失。 EXT2.0 的主要特点: 1...

    ext2 项目完整的权限管理

    EXT2(Second Extended File System)是Linux操作系统中广泛使用的日志文件系统之一,由 Rémy Card 在1992年开发。这个文件系统为Linux提供了强大的权限管理和磁盘空间管理功能,是Linux系统的核心组件之一。 在...

    ext4分析工具C++代码

    ext4是Linux系统广泛使用的日志型文件系统之一,具有高容量、高效能的特点。本篇将深入探讨如何通过C++来分析ext4文件系统,以及涉及的相关知识点。 首先,`ext4.cpp`是一个C++源代码文件,很可能包含了实现读取和...

    Ext JS框架 经验之作2000页

    ### Ext JS框架 经验之作2000页 #### 概述 本文档旨在提供一个全面且深入的指南,帮助读者理解并掌握Ext JS框架的各个方面。Ext JS是一款非常强大的JavaScript库,用于构建交互式的Web应用程序。它以其丰富的组件库...

    base_ext2

    EXT2是Linux早期广泛使用的文件系统之一,由Rene Rebeau开发,并在1992年首次引入。它为Linux提供了基本的文件存储功能,尽管现在已经有许多更先进的文件系统(如EXT3、EXT4和XFS),但理解EXT2的原理对于学习Linux...

    json处理,ajax

    Douglas Crockford是JSON的推动者之一,他的这个库提供了一些JSON相关的工具函数,比如JSON.parse()和JSON.stringify(),它们分别用于解析JSON字符串和将JavaScript对象转换为JSON字符串。这些工具对于处理JSON数据...

    linux文件系统的权限王国(一)归纳.pdf

    在Linux操作系统中,文件系统的权限管理是其核心特性之一,对于理解系统操作和安全管理至关重要。在本文中,我们将深入探讨Linux文件系统、用户、用户组以及权限等方面的知识。 首先,我们要明白Linux系统的最高...

    mmc工具,调试EMMC有效手段

    其中,"csd寄存器"是mmc工具能查看的关键组件之一。CSD(Card Specific Data)寄存器包含了EMMC存储卡的一些关键参数,如存储容量、块大小、读写速度等信息。开发者可以通过mmc工具读取CSD寄存器的内容,来了解存储...

    Android中XUtils3框架使用方法详解(一)

    注解是XUtils3的核心特性之一,它极大地简化了代码编写,提高了开发效率。要启用注解,首先在`Application`的`onCreate`方法中调用`x.Ext.init(this)`进行初始化。接着,在每个`Activity`的`onCreate`方法中,使用`x...

    Linux学习笔记基础知识版 (2)

    - **SET位权限**:特殊权限位之一,允许执行文件时采用文件所有者的身份权限。 - **粘滞位权限(Sticky Bit)**:另一种特殊权限位,仅当文件是目录时有效,可以防止非所有者删除文件。 #### 文件查找、压缩及...

    数据恢复扫描版教程

    数据恢复是IT领域中一个非常重要的分支,它涉及到如何从损坏、误删除、格式化或不可读的存储介质中恢复丢失的数据。本教程——“数据恢复扫描版教程”...记住,对数据的保护和恢复能力是衡量你IT素养的重要标准之一。

    Linux一个经典PPT讲解

    Linux是世界上最广泛使用的开源操作系统之一,它为个人用户、企业乃至超级计算机提供了强大的计算平台。这份"Linux一个经典PPT讲解"无疑是初学者探索Linux世界的理想起点。它以简洁明了的方式介绍了Linux的基础知识...

    Linux Kernel核心中文手册

    在Linux内核中,进程管理是核心功能之一。它涉及进程的创建、调度、同步和通信等过程。手册可能会详细介绍`fork()`、`execve()`、`waitpid()`等系统调用,以及进程状态的转换,如运行(Runnable)、睡眠(Sleeping)...

    UNIX操作系统培训教材

    UNIX操作系统,自1969年诞生以来,已成为全球最广泛使用的操作系统之一,尤其在服务器和科学计算领域具有显著地位。它以其简洁、强大的命令行界面和丰富的开发工具著称,是许多现代操作系统设计的基石。 1.1 UNIX...

Global site tag (gtag.js) - Google Analytics