现在javascript框架、控件库有很多，JQuery、Ext、prototype、MooTools、DOJO，
这些都是在Google上搜索“javascript+framework”列在第一页的。

这其中，除了MooTools，其它的都有所了解，但只在项目中用过Ext和DOJO。
但一直不太喜欢Ext，性能有问题，新的版本还收费了，
特别讨厌这种打着开源旗号赚钱的，像JGraph，JEP，被忽悠进来套住你就开始收费，

另外，Ext官方提供的例子都是用JS来创建和初始化控件，一个JS配套一个HTML来用，
这样管理起来很混乱。我认为官方例子应该是Best Practice，所以不太接受这种模式。


DOJO在我眼里是一个缺点和优点都很突出的家伙，
缺点：
1、文档非常之差
2、CodeBase非常之大（优点乎，缺点乎?）
3、版本演进快，且每次版本演进，都有大量的API发生变化，还不够成熟

优点：
1、是一个很优秀的控件开发框架
2、完全体现了javascript面向对象的一面


EXT和DOJO比起来，我觉得EXT是一个控件库，而DOJO是一个框架，
我06年第一次接触DOJO，当时版本0.3.X，今天项目中又有需求想用DOJO，版本是1.3.1，
对比0.3和1.3，发现核心的思路并没有太大变化，但出厂提供的控件却有翻天覆地的变化，
不过已经先入为主的对它的控件有成见，导致现在也没有兴趣再去研究，
还是讲讲如何拿DOJO做自定义的控件吧。

---

DOJO很复杂，但我们可以简单的认为它分三层：
1、最底层的是核心API
核心API提供的方法简化了DOM、字符串、CSS、事件等相关的操作。
核心API还实现了类似于Java的package概念和import机制，方便了代码组织和依赖管理。

2、基于核心API，创造了“控件生命周期”概念
这是DOJO的亮点，允许第三方以规范的方式开发控件。
基于DOJO开发的控件具有很强的内聚性和面向对象的特性。

3、基于2所开发的各类控件
DOJO自己提供的控件也比较全了，只是由于历史原因，没有深入研究过。

---

DOJO的控件统称DIJIT，要写出DOJO版的Hello World控件，你需要了解的知识并不太多：
1、一个控件就是一个JS类
2、所有的控件都继承自_Widget或其子类，_Widget类提供了控件的生命周期管理函数
3、可以同时继承_Templated，继承该类，可以为控件绑定模板来描述控件的展示


关于_Widget基类的介绍
1、生命周期方法
_Widget提供了一系列方法称为“生命周期方法”，DOJO框架在初始化一个控件的时候，会依次调用它们，
我们的自定义控件，可以重写特定的方法来加入自己的初始化逻辑，方法调用顺序及说明：

JScript code

     
     

      
      <



Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/



>
      
      preamble(
      
      /*
      
      Object
      
      */
      
       params,
      
      DOMNode
      
      */
      
      node)
 
      
      //
      
      这是一个通常不会用到的方法，这个方法的返回值，作为constructor的输入参数param
      
      

      
      constructor(
      
       这个方法相当于java类的构造函数
      
      

      
       
      
       在这个类中执行初始化动作 
      
      

      
      postscript(
      
      实际的控件创建过程，依次调用如下方法（都可以被重写）
      
      

      
       _Widget.create(
      
      */
      
      params,0)">*/
      
      node)
 _Widget.postMixInProperties( )
 _Widget.buildRendering( )
 _Widget.postCreate( )
 
      
      我用得最多的是postCreate方法，这个方法中，控件已经初始化完毕，界面上也已经显示出来了，
      
      通常在这个方法中启动业务相关的处理
     
     

2、该类的几个重要属性（控件可以通过this访问）
id: 控件被授予的唯一编号，如果用户不指定，则DOJO随机创建一个
domNode: 该控件在HTML中对应的DOM节点



最基本的自定义控件示例：
js文件：./hello/world.js（以下涉及到文件名，都用相对路径，其中./代表和"dojo,dijit,dojox"同级目录）

JScript code

     
     

      
      <



Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/



>
      
      声明自己输出的类名
      
      

      
      dojo.provide(
      
      "
      
      hello.world
      
      "
      
      );

      
      声明自己依赖的类名
      
      

      
      dojo.require(
      
      "
      
      dijit._Widget
      
      "
      
      );
dojo.require(
      
      "
      
      dijit._Templated
      
      "
      
      );


      
      dojo.declare定义控件类，第一个参数：类名，第二个参数：父类数组，第三个参数：类的prototype
      
      

      
      dojo.declare(
      
      "
      
      hello.world
      
      "
      
      ,[dijit._Widget,dijit._Templated],
{
 postCreate:
      
      function
      
      (){
 
      
      this
      
      .domNode.innerHTML
      
      =
      
      "
      
      hellow world
      
      "
      
      ;
 } 
}
);
     
     

该控件的行为极其简单，在postCreate方法中，将自己在HTML页面中对应的DOM节点的内容设置为 hellow world

html文件：./helloworld.htm

HTML code

<
      
      html
      
      >
      
      

      
      head
      
      title
      
      >
      
      Hello World
      
      </
      
      <!--
      
       首先引入dojo.js，modulePaths用来定义包含控件的js目录，类似于jsp的自定义tag引入的机制
      
      -->
      
      

      
      script 
      
      type
      
      ="text/javascript"
      
       src
      
      ="./dojo/dojo.js"
      
       djConfig
      
      ="parSEOnLoad:true,modulePaths:{hello:'../hello'}"
      
      >
      
      

      
      script
      
      >
      
      


      
      ="text/javascript"
      
      
 dojo.require(
      
      "
      
      dojo.parser
      
      );
 dojo.require(
      
      hello.world
      
      ); 
      
      //
      
      引入自定义控件
      
      

      
      body
      
      >
      
      
 
      
      div 
      
      dojoType
      
      ="hello.world"
      
      ></
      
      div
      
      >