Flyingis

Fusion Center Lab.

Dojo 之 面向对象

    作者:Flyingis

    面向对象三大特性:封装、继承、多态。在熟悉了Java/C#/C++这些高级面向对象语言的语法结构后,我们或多或少会对javascript脚本语言的面向对象感到一些不适,function、prototype、call、apply……

    如果真不了解javascript或这几个关键字,先看几篇简文:

1.
JavaScript 基本组成
2.ECMAScript 基础
3.JavaScript 中的对象
4.JavaScript 中的继承

    为了消除这种对javascript面向对象语法的不适,众多js库都构建了更符合传统OO编程思想的代码框架,如prototype、mootools等等,引用mootools文档中创建对象的例子
var Animal = new Class({
    initialize: function(age)
{
    
this.age =
 age;
    }

}
); 
var Cat 
= Animal.extend(
{
    initialize: function(name, age)
{
    
this.parent(age);     //将调用Animal的initialize方法;

    this.name = name;
    }

}
);
var myCat 
= new Cat('Micia'20
);
alert(myCat.name);     
//显示 'Micia'

alert(myCat.age);     //显示 20

    Dojo作为一个强大的javascript工具箱,有它自己面向对象的开发方式,用declare解决了对象的创建和继承的问题,文档中的例子:
dojo.declare("my.classes.bar", my.classes.foo, {
    
// properties to be added to the class prototype

    someValue: 2,
    
// initialization function

    constructor: function(){
        
this.myComplicatedObject = new
 ReallyComplicatedObject();
    }
,
    
// other functions

    someMethod: function(){
        doStuff();
    }

);

    declare的第一个参数是对象名称,最后一个参数指定在这个对象里要添加的内容,包括函数和属性,写个例子
dojo.declare("Apple"null{
        price: 
5,
        constructor: 
function(weight) {
            
this.total = weight * this.price;
        }
,
        print: 
function() {
            alert(
"The total price is " + this.total);
        }

    }

);
var myapple = new Apple(10);
myapple.print();    
//输出结果:"The total price is 50"

    上例通过declare创建了一个Apple对象,javascript本身没有类的概念,可以使用对象本身来创建新的对象myapple,通过构造函数的参数值计算苹果的总价,print函数输出结果,非常形象的构建了一个Apple“类”,非常容易理解。要注意的是,这里如果声明默认构造函数,"new Apple(10)"将直接执行默认构造函数,带参数的构造函数就被忽略了,并非C++中顺序执行。

    注意dojo.declare第二个参数,如果创建一个独立的新对象,可以设为null,当需要从其他一个或多个对象继承时,则为对象名称,这样就方便的实现了对象继承。多个对象继承,declare第二个参数为一数组,第一个元素为原型父对象,其他的为mixin对象,通过代码来理解。
<script>
    dojo.declare(
"Apple"null{
        price : 
5,
        constructor : function(weight) 
{
            
this.total = weight * this.price;
        }
,
//            constructor : function() {
//                alert("Create Apple !");
//            },
        print : function() {
            alert(
"The total price is " + this.total);
        }

    }
);
    dojo.declare(
"AppleTree"null{
        constructor : function() 
{
            alert(
"Create AppleTree !");
        }
,
        print : function() 
{
            alert(
"This is an apple tree");
        }
,
        additional : function() 
{
            alert(
"This is a mixin class");
        }

    }
);
    
    dojo.declare(
"GreenApple", [Apple, AppleTree], {
        constructor : function() 
{
            alert(
"Getting a green apple");
        }

    }
);
</script>

    创建一个GreenApple对象,测试alert执行顺序!mixin对象的方法将覆盖之前对象中的同名函数,除非子对象也声明了同名函数print。
//输出
//"The height of the tree is #ff0000"
//"Getting a green apple"
var gapple = new GreenApple();
//输出,覆盖了Apple对象的print
//"This is an apple tree"
gapple.print();
//"This is a mixin class"
gapple.additional();

    dojo/_base/_loader/bootstrap.js有专门的mixin函数,用于对象的拷贝,将一个创建好的对象拷贝到新的对象中
var copy = dojo.mixin({}new Apple(2));
copy.print();

    print输出结果是"The total price is 10",mixin参数一定是创建好的对象实例,否则出错!dojo.extend则可以将一个或多个对象的属性、方法拷贝到一个原型上,通过prototype实现继承,这是继承的另外一种方式。

    通过declare、mixin、extend,dojo给我们提供了一种方便的对象创建与扩展机制,一般情况下够用了,感觉还是比较方便,使用时也存在一些限制,翻翻源代码就能理解。这里主要是要知道dojo是如何面向对象的,方便我们更好的理解dojo基础功能,及dijit和dojox,dojo最为强大还是它的widgets。本文涉及的js源码:
mixin:dojo/_base/_loader/bootstrap.js
extend:dojo/_base/lang.js
declare:dojo/_base/declare.js

Flyingis @ China
email: dev.vip#gmail.com
blog: http://flyingis.cnblogs.com/

标签: dojo

posted on 2008-04-15 23:55 Flyingis 阅读(3363) 评论(14) 编辑 收藏

Feedback

#1楼 2008-04-16 00:01 狼Robot      

这么晚了还发文,先顶了再看.  回复 引用 查看   

#2楼 2008-04-16 00:05 狼Robot      

我用js时,一般够用了就行了,还没写到这么恐怖的.  回复 引用 查看   

#3楼 2008-04-16 00:06 xm[未注册用户]

这么晚了,楼主辛苦了  回复 引用   

#4楼 2008-04-16 06:54 生鱼片      

楼主辛苦,支持  回复 引用 查看   

#5楼 2008-04-16 08:29 李战      

今天我学了很多,由衷感谢楼主。  回复 引用 查看   

#6楼[楼主] 2008-04-16 08:38 Flyingis      

@李战
看了你的《悟透JavaScript》,很经典!我也学了很多:)

感谢大家支持!
 回复 引用 查看   

#7楼 2008-04-16 09:16 gguowang      

楼主真的是很用心啊 向你致敬!  回复 引用 查看   

#8楼 2008-04-16 09:29 早班火车      

学习了~不过还没用过dojo,prototype用的多些,小型项目一般够了.  回复 引用 查看   

#9楼 2008-04-16 09:42 Clark Zheng      

目录里列的几篇对我很有用,哈,谢谢博主  回复 引用 查看   

#10楼[楼主] 2008-04-17 08:52 Flyingis      

@Clark Zheng
还有几篇,找时间一起整理放上来
 回复 引用 查看   

#11楼 2008-04-20 21:11 MS的明天      

很高兴看到有人发布关于Dojo方面的Blog,我使用这个差不多1年了,现在的项目中一直在使用,希望以后多与博主交流  回复 引用 查看   

#12楼[楼主] 2008-04-20 22:02 Flyingis      

@MS的明天
你用的是哪个版本,我想了解dojo在实际项目中的效果,如性能、易用性、扩展性,多向你学习:)
 回复 引用 查看   

#13楼 2008-12-03 20:51 lzlynn      

如果是做项目,EXT可能比dojo更高效,同时adobe也一直对EXTJS有很多支持。
http://extjs.com/ 这是他的主页。
EXT做出了几乎所有的WEB控件,这点是别的框架不能比拟的。
http://extjs.com/playpen/ext-2.0/examples/window/desktop.html
以上是EXt做得DESKTOP。
 回复 引用 查看   

#14楼[楼主] 2008-12-03 22:04 Flyingis      

@lzlynn EXT确实不错,和openlayer一起很方便。  回复 引用 查看   

导航

统计信息

News

搜索

 

我的标签

随笔分类

随笔档案

文章分类

文章档案

个人博客

我关心的技术

友情链接

最新评论

阅读排行榜

评论排行榜