Dojo 之 面向对象

    面向对象三大特性：封装、继承、多态。在熟悉了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 undefined"
//"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

评论

6 楼 鹤惊昆仑 2008-08-28  

静态成员变量这个问题确实很恼人

5 楼 web20 2008-04-18  

在dojo的面向对象的声明中，很重要也是和Java的class声明很不一样的一点是你不能将Array和Object声明在类的成员变量里，否则这些Array和Object将成为这个类的静态成员变量。需要在class的constructor中对这些变量进行初始化才可以。

dojo.declare("my.classes.bar", my.classes.foo, {
        someData: [1, 2, 3, 4], // doesn't do what I want: ends up being static
        numItem : 5, // one per bar
        strItem : "string", // one per bar
         constructor: function() {
                this.someData = [ ]; // better, each bar has it's own array
                this.expensiveResource = new expensiveResource(); // one per bar
        }
});

Arrays and Objects as Member Variables

4 楼 xml 2008-04-18  

shatuo 写道

  现在在进行基于dojo 1.0.0版本的封装，基本上dijit内的和dojox的Tree、Grid都替换成自己实现的，样式吗，是模仿Ext的样式。1.1的Grid功能有了些提升，不过不能令人满意。dojotoolkit.org上的roadMap还是0.9-1.0，最近好像看到过一次到2.0的roadmap，2.0比起1.1跟令人期待。

看来EXT现在确实很热！样式都按照它的来做，快成为实事标准了

有机会把你自定义的Tree、Grid贴上来瞧瞧吧

3 楼 shatuo 2008-04-16  

xml 写道

shatuo 写道

dojo的core（dojo）不错，不过dijit中的很多组件有问题，也没有精心打造样式，很多时候需要自己打造widget（dojo的扩展机制很适合自己动手）。

看过大家对dojo widget的一些讨论，褒少贬多，不过都是针对过去0.x版的，最新1.1的评论还没有看到，希望1.1能够有所改进！看到dojo这么丰富的组件库，除了它的易用性外，还关心它的性能，javaeye对dojo讨论不多，大家都在用EXT了

  现在在进行基于dojo 1.0.0版本的封装，基本上dijit内的和dojox的Tree、Grid都替换成自己实现的，样式吗，是模仿Ext的样式。1.1的Grid功能有了些提升，不过不能令人满意。dojotoolkit.org上的roadMap还是0.9-1.0，最近好像看到过一次到2.0的roadmap，2.0比起1.1跟令人期待。

2 楼 xml 2008-04-16  

shatuo 写道

dojo的core（dojo）不错，不过dijit中的很多组件有问题，也没有精心打造样式，很多时候需要自己打造widget（dojo的扩展机制很适合自己动手）。

看过大家对dojo widget的一些讨论，褒少贬多，不过都是针对过去0.x版的，最新1.1的评论还没有看到，希望1.1能够有所改进！看到dojo这么丰富的组件库，除了它的易用性外，还关心它的性能，javaeye对dojo讨论不多，大家都在用EXT了

1 楼 shatuo 2008-04-16  

dojo的core（dojo）不错，不过dijit中的很多组件有问题，也没有精心打造样式，很多时候需要自己打造widget（dojo的扩展机制很适合自己动手）。