`

[ExtJS3.2源码每天一小时](2)ext-base.jsExt的继承与覆盖不再神秘

阅读更多
1.extend继承,继承的原理相对来说比较复杂,从根本来说就是引用之间的变更,原型链的应用,稍不注意就可能绕晕了,所以看这块代码的时候头脑一定要清晰。
function extend(sb, sp, overrides) {
	
	//如果sp是对象,不是类,那么使用extend函数时,直接把覆盖项都放于sp中
	if (typeof sp == 'object') {
		overrides = sp;//如果sp是对象,那么overrides必为undefined,因为可以把覆盖项都放于sp中,于是将sp的内容作为overrides。
		sp = sb;//由于现在sb需要继承的属性来自overrides,那么丢弃sp的引用,令sb、sp持有相同的引用。
		//如果overrides的构造器不是默认的构造器,说明用户要覆盖构造器,那么子类使用overrides的构造器,否则指定为子类自己的构造器
		sb = overrides.constructor != oc ? overrides.constructor : sb.constructor;
	}
	//如果上面的if成立,那么sb=sp,下面的原型对象引用的变更将没有任何的意义。再if不成立的条件下,下面的代码才有意义。
	var F = function() {
	}, sbp, spp = sp.prototype;
	F.prototype = spp;
	sbp = sb.prototype = new F();
	//因为sb的原型对象被F的对象覆盖,那么原型对象的构造器目前是F的,必须要赋值回sb
	sbp.constructor = sb;
	//给sb的superclass属性赋值
	sb.superclass = spp;
	
	//为了下面给sbp的superclass属性复制后,能够通过父类的原型能够执行父类的构造器,把原型中的Object构造器换为Function构造器
	if (spp.constructor == oc) {
		spp.constructor = sp;
	}
	//给sb的原型的superclass属性赋值,sb的对象可以调用superclass()获得父类的原型
	sbp.superclass = sbp.supr = (function() {
		return spp;
	});
	//将overrides中的东西覆盖到sb中
	override(sb, overrides);
	
	//给sb添加自身的继承方法,可以直接调用sb.extend(o);
	sb.extend = function(o) {
		return ex(sb, o);
	};
	return sb;

2. override覆盖

       //origclass原始类,overrides包含各个覆盖项的对象

       override : function(origclass, overrides){
            if(overrides){
                var p = origclass.prototype;
                Ext.apply(p, overrides);//通过apply方法,将覆盖项覆盖到原始类的原型对象中。
                if(Ext.isIE && overrides.hasOwnProperty('toString')){ //既然有上面那句了,为什么还要写下面这三行呢,因为在ie中,for (var method in overrides) 循环中method拿不到toString属性,而恰恰Ext.applay就用的循环指定,所以toString必须单独指定
                    p.toString = overrides.toString;
                }
            }
        },
分享到:
评论

相关推荐

    extjs-basex.js

    `extjs-basex.js`文件很可能是ExtJS库的一个部分,特别是针对BaseX扩展的功能。BaseX是一个高性能、XML数据库系统,常用于处理XML数据。在JavaScript环境中,BaseX的JavaScript接口允许开发者在Web应用中直接与BaseX...

    Ext导出Excel源码

    5. `ext-all-debug.js`, `ext-all.js`, `ext-base.js`:这些是ExtJS库的文件,`ext-all-debug.js`是包含所有组件和功能的调试版本,`ext-all.js`是压缩和优化过的生产版本,`ext-base.js`是ExtJS的基础库。...

    Ext框架简介-Ext框架简介

    其中 ext-base.js 是框架基础库,ext-all.js 是 extjs 的核心库。 helloWord 示例程序是使用 ExtJS 创建的简单示例程序。首先需要在 HTML 文件中引入 ExtJS 的样式及 ExtJS 库文件,然后使用 Ext.onReady 函数来...

    界面框架extjs学习笔记

    - `extjs/adapter/ext/ext-base.js`:EXTJS的基础库,必须先于`ext-all.js`引入。 - `extjs/ext-all.js` 或 `extjs/ext-core.js`:根据需求选择引入完整库或仅核心库。 配置BLANK_IMAGE_URL是解决图像路径问题的一...

    extjs中文解决方案/Eclipse下的js和ext开发

    ### ExtJS中文解决方案与Eclipse下的JS和EXT开发 #### 一、ExtJS中文解决方案 在使用ExtJS进行Web应用程序开发时,对于中文环境的支持是非常重要的。为了实现ExtJS中文化,我们需要按照以下步骤来进行配置。 1. *...

    ext入门学习.pdf

    类的创建和继承则可以通过JavaScript的原型链实现,或者使用ExtJS提供的`Ext.extend`方法。此外,`Ext.apply`可以用于向对象动态添加属性和方法。 获取界面上的元素是ExtJS中的重要操作,这主要通过Ext.Element实现...

    很好的Extjs学习文档

    Ext JS 是一个强大的JavaScript开发框架,专用于构建富客户端Web应用程序。它以其丰富的用户界面组件和高效的Ajax交互闻名。在本文中,我们将深入探讨Ext JS的基础知识,包括框架简介、环境搭建、HelloWorld示例以及...

    Ext框架简介.ppt

    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"> <script type="text/javascript" src="extjs/ext-all.js"> ``` 然后,可以通过`Ext.onReady`函数在页面加载完成后执行特定的JavaScript代码...

    Ext教程_javakc

    2. **引入核心库**:通过 `<script>` 标签引入 `extjs/adapter/ext/ext-base.js` 和 `extjs/ext-all.js`。 3. **编写 JavaScript 代码**:使用 Ext 提供的方法编写业务逻辑。 例如,以下代码展示了如何在页面加载...

    Extjs简明总结(教程)

    2. `build` 目录:存放经过压缩的ExtJS源码,适用于生产环境。 3. `docs` 目录:提供了详细的API帮助文档,是学习和查阅ExtJS功能的重要资源。 4. `examples` 目录:包含了许多实际的应用示例,帮助你理解如何运用...

    ExtJs部署及使用方法

    #### 一、ExtJs部署与配置 ##### 1.1 ExtJs库的安装 为了正确地安装ExtJs库,首先需要将ExtJs的源码包放置到项目的WebRoot目录下,即项目的根目录。在安装过程中,需要创建以下文件夹结构: ``` -- WebRoot -- ...

    ext入门学习文档

    - `ext-all.js`是压缩后的源码,而`ext-all-debug.js`则是未压缩的版本,适用于调试。 - 开发时需要将`resources`包中的CSS和图像文件放到`common`目录下,并将`ext-all.js`和`adapter/ext/ext-base.js`放到`js`...

    EXTJS.docx

    - **ext-base.js**:包含EXT的核心代码,是框架的基础,负责处理DOM操作、事件管理等底层任务。 - **ext-core.js**:封装了EXT的核心组件,如面板、按钮、网格等,是构建用户界面的关键。 - **ext-core-debug.js**:...

    让我们开始EXTJS之旅

    <script type="text/JavaScript" src="ExtJS2/adapter/ext/ext-base.js"> <script type="text/JavaScript" src="ExtJS2/ext-all.js"> Ext.BLANK_IMAGE_URL = 'ExtJS2/resources/images/default/s.gif'; Ext....

    extjs实例教程附带源码

    <script type="text/javascript" src="./scripts/ext/adapter/ext/ext-base.js"> <script type="text/javascript" src="./scripts/ext/ext-all.js"> <script type="text/javascript" src="./scripts/ext/build/...

    EXT 2.2 的HELLO WORD 创建详程

    `Ext.MessageBox.alert`函数用于弹出一个消息框显示“Hello EXTJS.”,这是与用户交互的一种简单方式。 4. 开发方法学和资源获取: a. 从官方网站下载DEMO文件并查看源代码是学习Ext JS及其使用方法的一个有效手段...

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    <script type="text/javascript" src="ext-2.3.0/adapter/ext/ext-base.js"> <!-- ENDLIBS --> <script type="text/javascript" src="ext-2.3.0/ext-all.js"> <script type="text/javascript" src="js/...

    ext js教程PPT

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端(RIA)Web应用程序。它以其美观的用户界面组件和高效的Ajax交互而著称。本教程PPT将深入探讨ExtJS的核心概念和使用方法。 首先,让我们从ExtJS的简介开始。...

    ExtJS 学习专题(一) 如何应用ExtJS(附实例)

    - Ext-all.js:压缩后的全部ExtJS源码文件。 - ext-all-debug.js:未压缩的全部ExtJS源码文件,用于开发和调试。 - ext-core.js:压缩后的ExtJS核心组件文件。 - ext-core-debug.js:未压缩的ExtJS核心组件文件。 2...

Global site tag (gtag.js) - Google Analytics