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 #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