`
coral0212
  • 浏览: 101508 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

Ext oop 基础

    博客分类:
  • UI
阅读更多
轻松搞定Extjs[连载]——第三章:Ext OOP基础
                         株洲北大青鸟   李赞红
 
第三章:Ext OOP基础
一、javascript类的定义
    在javascript中,通过创建一个构造函数来定义一个类,然后通过prototype来扩展类的功能。假设我们定义一个螃蟹类:
Crab = function(){
     this.legs = 10;
}
 
Crab.prototype = {
     say: function(){
            alert("我是一只螃蟹,我有" + this.legs + "只脚,横行霸道是我的天性");
     }
};
//测试
var crab = new Crab();
alert(crab.legs);
crab.say();
       prototype是javascript一个非常重要的功能,能动态的为对象添加任何新的方法。Extjs就是基于prototype实现的OOP机制。
 
二、Extjs命名空间的定义
    命名空间(namespace)类似于java中的包,用来对工程中的类进行有效管理。命名空间的层次结构使用“.”来划分。Ext通过namespace()方法创建命名空间。
    语法:Ext.namespace(“命名空间”)
    示例:Ext.namespace("com.aptech");
三、Extjs OOP
    在Extjs中创建类和javascript有些不同,我们会使用他封装好的东西,而不全是基于javascript语法。站在巨人的肩膀上,确实有些高处不胜寒。所以,深刻了解javascript基础对于日后的拓深十分必要,相信我吧。
 
    我们通常会基于命名空间创建新类,按照java的设计思想,会有封装、继承和多态。Extjs也不例外,而且Extjs为OOP做了很多基础工作,使用起来非常模式化。一个类至少应该有private和public成员,且可以派生出子类,并能重写父类的方法。那么,让我们来看看Extjs是如何做到的。
Ext.namespace("com.aptech");
 
com.aptech.First = function(){
     //私有成员
     var kiss = "中华人民共和国";
     //私有方法
 
     //公有方法
     return {
            //公有成员
            init: function(){
                   alert("init");
                   alert(kiss);
            },
            //公有成员
            method: function(){
                   alert("method");
            }
     };
};
   
    我们定义了一个类First,这实在是一个没有任何业务意义的类,只是为了说明方便。First位于com.aptech命名空间中,有一个私有成员 kiss,并且向外部暴露了两个方法init()和method()。其实,在function和return之间定义的成员全总是private,而在 ruturn内部定义的成员全部是public,如果大家的javascipt基础扎实的话,这段代码并不难理解,我们定义了一个匿名构造函数,函数中的变量是局部变量,外部无法访问,返回一个对象,对象是以json格式定义的,该对象中定义的方法自然可以访问了。
 
       javascipt本身不支持继承,但是我们可以模拟。继承说穿了就是子类将父类的成员据为已有,专业点就是“成员复制”,即可以复制成员变量,也可以复制成员方法。我们定义下面的方法完成此功能:
var extend = function(child, father){
     child.prototype = father.prototype;
}
    现在,我们定义一个螃蟹的子类——蟹将,螃蟹成精变成了人,由原来的10只脚变成2只脚,但狗改不了吃屎,行为不会改变,依旧横行霸道。
GenCrab = function(){this.legs = 2;};
extend(GenCrab, Crab);
var gc = new GenCrab();
gc.say();
    就这样,一个新类产生了。不过,在Extjs中有更加优雅的做法。
 
    我们定义一个类Second,继承自First,看看Extjs是如何做的。
//创建子类
com.aptech.Second = function(){
     com.aptech.Second.superclass.constructor.apply(this);//调用父类构造方法
}
//com.aptech.Second子类继承自父类com.aptech.First
Ext.extend(com.aptech.Second, com.aptech.First, {
     //新方法
     fun: function(i){
            return i * i * i;
     },
     //重写的方法
     method: function(){
            alert("Second::method")
     }
});
 
//测试
var second = new com.aptech.Second();
alert(second.fun(5));
second.method();
    哈哈,简直太优雅了,不仅可以添加新方法,还可以重写父类的方法(话外音:这不是多态的表现形式吗?)。这一切都是由Ext.extend()搞定的,这个方法有点复杂,但他的实现原理是相同的。
四、配置(config)选项
    在Extjs中,初始化对象时,大量使用了config这个参数。不要恐惧,只是一个json对象而已,不过,config为Extjs立下了不少汗马功劳。
   
    假设定义了一个学生类(Student),有姓名和性别两个属性,并且通过构造函数为属性初始化:
Student = function(name, sex){
     this.name = name;
     this.sex = sex;
}
 
//测试
var student = new Student("李赞红", "男");
alert("姓名:" + student.name + "\r\n性别:" + student.sex);
    这个一定看得懂,如果看不懂,我只能表示深深的遗憾了,您不适合地球,回你的老本营火星去吧。
   
    如果用json对象作为构造函数的参数呢?
Student = function(config){
     this.name = config.name;
     this.sex = config.sex;
}
 
//测试
var student = new Student({name: "李赞红", sex: "男"});
alert("姓名:" + student.name + "\r\n性别:" + student.sex);
    嘿,果然万变不离其宗啊。换汤不换药的把戏骗不了咱们。但是,等等,请等等,如果类的成员特别多,十个,二十个,一百个,赋值语句岂不是很多很繁琐?你能想到这一点实在太聪明了,不过,Jack更聪明,他早想到了,于是有了下面的代码:
Student = function(config){
     Ext.apply(this, config);
}  
 
//测试
var student = new Student({name: "李赞红", sex: "男"});
alert("姓名:" + student.name + "\r\n性别:" + student.sex);
       Ext定义了一个名叫apply()的方法,作用是将第二个参数的成员赋给第一个参数。现在,不管config中有多少个成员都没问题了。
五、Ext.apply()Ext.applyIf()
    前面我们知道了Ext.apply(obj, config)方法的作用,还有另一个方法applyIf(obj, config),从名字上看得出来,applyIf()需要满足某种条件,实在是太棒了,这么复杂的问题都没逃过你的法眼。
   
    事先预告一下这两个方法的区别,然后再通过例子来说明:apply会将config和obj参数的同名属性值覆盖,并且将config其他属性添加到 obj中;applyIf不会将config和obj参数的同名属性覆盖,只将config其他属性添加到obj中。也就是说,obj没有而config 中有的属性最终都会复制到obj中,不同的是相同属性值是否会被覆盖的问题。
    例子能说明一切问题。
Student = function(config){
     this.name = "张海军";
     this.sex = "男";
     Ext.apply(this, config);
}
 
//测试
var student = new Student({name: "李赞红", sex: "男", birthday: new Date()});
alert("姓名:" + student.name + "\r\n性别:" + student.sex + "\r\n生日:" + student.birthday);
    从下面结果看出,属性name和sex均被覆盖,且添加了新成员birthday。
姓名:李赞红
性别:男
生日:Fri May 01 2009 07:59:39 GMT+0800
   
Student = function(config){
     this.name = "张海军";
     this.sex = "男";
     Ext.applyIf(this, config);
}
 
//测试
var student = new Student({name: "李赞红", sex: "男", birthday: new Date()});
alert("姓名:" + student.name + "\r\n性别:" + student.sex + "\r\n生日:" + student.birthday);
    结果如下:
姓名:张海军
性别:男
生日:Fri May 01 2009 08:02:33 GMT+0800
    哈,“张海军”终于没被“李赞红”替换了。
六、小结
    讲了这么多,尽是些和Ext不沾边的事,是不是有点失望?
   
    但是,我用人格担保我是个不啰嗦的人,了解我的学生肯定知道。这一章的内容是Extjs的基础,是我们能看懂源代码的保证。不然,看到Jack的代码,你以为自己进入了迷宫,或者Jack故意要把我们打入冷宫。
 

    虽然是基础,却是相对的,因为就是这寥寥几行代码,蕴含了丰富的设计哲学,细细体会,才知其味。

分享到:
评论
1 楼 czpae86 2010-08-08  
哈哈,简直太优雅了!
嘻嘻,也很飘逸吧!?

相关推荐

    轻松搞定ExtJS(中文word文档版、可复制、经典)

    第01章:序 第02章:准备与资源 第03章:Ext OOP基础 第04章:消息框 第05章:页面与脚本完全分离 第06章:元素操作与模板 第07章:格式化 第08章:Extjs组件结构 第09章:按钮与日期选择器 第10章:数据与ComboBox ...

    轻松搞定ExtJS(高清,中文,可复制,语法+例子更易懂)

    第01章:序 第02章:准备与资源 第03章:Ext OOP基础 第04章:消息框 第05章:页面与脚本完全分离 第06章:元素操作与模板 第07章:格式化 第08章:Extjs组件结构 第09章:按钮与日期选择器 第10章:数据与ComboBox ...

    Python库 | oop-ext-0.3.2.tar.gz

    然而,"oop-ext"库旨在提供这些基础之外的增强和扩展,可能包括更高级的设计模式、元编程工具或者其他提高生产力的特性。 1. **设计模式**:设计模式是解决常见问题的最佳实践,比如工厂模式、单例模式、装饰器模式...

    使用OOP的方式扩展ExtJS UI组建 - 更新版

    首先,理解ExtJS的基础是至关重要的。ExtJS提供了一套完整的组件模型,包括窗口(Window)、面板(Panel)、表格(Grid)、表单(Form)等,这些组件都是基于OOP设计的。每个组件都是一个类,我们可以创建它们的实例...

    EXT架构学习文档

    EXT 架构的核心特点在于它的面向对象编程(OOP)理念,这使得它具有出色的扩展性和可维护性。开发者可以根据实际需求选择性地加载所需的类库,从而避免为 Web 应用程序引入不必要的负担。 EXT 主要包含以下模块: ...

    ext面向对象和继承

    在JavaScript的世界里,面向对象(Object-Oriented Programming, OOP)是一种常用的设计模式,它允许我们通过类和对象来组织代码,实现代码的复用和模块化。本篇文章将探讨EXTJS框架中的面向对象机制,特别是继承的...

    asp.net ext 中文手册

    掌握`DomQuery`的基础用法对于高效开发EXT应用至关重要。此外,扩展EXT组件也是开发中常见的需求,这可能涉及修改现有组件的行为或外观,甚至创建全新的组件。文档中详细介绍了从创建新文件到完成组件扩展的全过程,...

    轻松搞定ext

    本章节深入讲解了ExtJS中的面向对象编程(OOP)概念,包括JavaScript类的定义、ExtJS命名空间的使用、ExtJS OOP的特性等。理解并熟练应用这些基础,是构建可维护性和扩展性强的ExtJS应用的前提。 #### 第四章:消息...

    Ext中文文档

    ### Ext中文文档:北大青鸟老师入门教程精要 #### ExtJS:JavaScript的高级框架 ExtJS是一款基于JavaScript的开源框架,专为构建现代、响应式Web应用程序而设计。它提供了一套丰富的UI组件库,使得开发者能够快速...

    ext面向对象编程教程

    EXTJS 面向对象编程教程 EXTJS 是一个基于 JavaScript 的富客户端框架,它提供了强大的组件模型和...对于初学者来说,全面了解 AJAX 基础和掌握 OOP 思维是使用 EXTJS 的前提,这样才能避免走弯路,更好地利用其优势。

    Extjs2.0中文文档

    文档涵盖了Ext.js 2.0的基础到高级特性,包括但不限于以下关键点: 1. **ExtjsOOP基础**:Ext.js在2.0版本中加强了对面向对象编程的支持,文档中会介绍如何定义JavaScript类,以及如何使用Extjs命名空间和类的继承...

    Extjs4.0.7学习指南

    在EXTJS开发中,`Ext.application`和`Ext.onReady`是非常基础且重要的方法。`Ext.application`用于初始化整个应用程序,而`Ext.onReady`在DOM加载完成后自动调用,确保所有元素都能被脚本引用。例如,可以使用`Ext....

    开发技术方法

    - 基础篇介绍Ext Core、OOP基础、核心函数和模板使用。 - 进阶篇深入讲解布局、组件、面板、窗口、选项卡、对话框和Combox组件等。 - 数据篇涵盖数据存储单元Record和DataField、Store、DataProxy、DataReader...

    log4Net详解(共2讲)

    1.2、ExtJs基础篇(2):ExtJs OOP基础 1.3、ExtJs基础篇(3):ExtJs 核心函数简介 1.4、ExtJs基础篇(4):ExtJs中的模板详解(1) 1.5、ExtJs基础篇(5):ExtJs中的模板详解(2) 2、ExtJs进阶篇:Extjs进阶 2.1、...

Global site tag (gtag.js) - Google Analytics