麻雀虽小，五脏俱全：用DOJO写一个最简略的控件

麻雀虽小，五脏俱全：用DOJO写一个最简单的控件
现在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

preamble(/*Object*/ params, /*DOMNode*/node)    //这是一个通常不会用到的方法，这个方法的返回值，作为constructor的输入参数paramconstructor(/*Object*/ params, /*DOMNode*/node)    // 这个方法相当于java类的构造函数    // 在这个类中执行初始化动作    postscript(/*Object*/ params, /*DOMNode*/node)    //实际的控件创建过程，依次调用如下方法（都可以被重写）    _Widget.create(/*Object*/params, /*DOMNode*/node)    _Widget.postMixInProperties( )    _Widget.buildRendering( )    _Widget.postCreate( )    //我用得最多的是postCreate方法，这个方法中，控件已经初始化完毕，界面上也已经显示出来了，    //通常在这个方法中启动业务相关的处理

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

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

JScript code

//声明自己输出的类名dojo.provide("hello.world");//声明自己依赖的类名dojo.require("dijit._Widget");dojo.require("dijit._Templated");//dojo.declare定义控件类，第一个参数：类名，第二个参数：父类数组，第三个参数：类的prototypedojo.declare("hello.world",[dijit._Widget,dijit._Templated],{    postCreate:function(){        this.domNode.innerHTML="hellow world";    } });

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

html文件：./helloworld.htm

HTML code

 &lt;html&gt; 
  &lt;head&gt; 
  &lt;title&gt;Hello World &lt;/title&gt; 
  &lt;!-- 首先引入dojo.js，modulePaths用来定义包含控件的js目录，类似于jsp的自定义tag引入的机制--&gt; 
  &lt;script type="text/javascript" src="./dojo/dojo.js" djConfig="parseOnLoad:true,modulePaths:{hello:&#39;../hello&#39;}"&gt; 
  &lt;/script&gt; 
  
  &lt;script type="text/javascript"&gt; 
     dojo.require("dojo.parser"); 
     dojo.require("hello.world"); //引入自定义控件 
  &lt;/script&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
      &lt;div dojoType="hello.world"&gt; &lt;/div&gt; 
  &lt;/body&gt; 
  &lt;/html&gt;

modulePaths的具体作用和用法，请google即可。

接下来，我们将控件参数化，
我们可以在写标签的时候，将名字作为参数传进去，然后控件显示HELLO XXX，
首先将html文件改成：

HTML code

&lt;html&gt;&lt;head&gt;&lt;title&gt;Hello World&lt;/title&gt;&lt;!-- 首先引入dojo.js，modulePaths用来定义包含控件的js目录，类似于jsp的自定义tag引入的机制--&gt;&lt;script type="text/javascript" src="./dojo/dojo.js" djConfig="parseOnLoad:true,modulePaths:{hello:'../hello'}"&gt;&lt;/script&gt;&lt;script type="text/javascript"&gt;    dojo.require("dojo.parser");        dojo.require("hello.world");&lt;/script&gt;&lt;/head&gt;&lt;body&gt;        &lt;div dojoType="hello.world" yourName="jinxfei"&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

大家注意到，我们在标签上增加了“yourName”属性，在控件中如何使用该属性呢？
可以在construtctor方法中接收此属性的值，将值赋给控件类自身的变量，然后在postCreate中使用，
js代码如下：

JScript code

dojo.provide("hello.world");dojo.require("dijit._Widget");dojo.require("dijit._Templated");dojo.declare("hello.world",[dijit._Widget,dijit._Templated],{    yourName:'world',    constructor:function(params,node){        this.yourName=params.yourName;            },    postCreate:function(){        this.domNode.innerHTML="hellow "+this.yourName;    } });

接下来，我们将进一步增加控件进的复杂性，
增加一个输入框，在这个输入框中输入文本的同时，动态更新hello XXX，
这就要用到dojo的事件绑定机制，最常用的模式为：
dojo.connect(node,event,obj,method);
表示将obj的method方法作为domNode的event事件处理函数，
例如：
dojo.connect(inputText,"onkey",this,"updateHello");

这次先改控件，在postCreate的时候，动态增加一个输入框，并为输入框动态绑定事件：

JScript code

dojo.provide("hello.world");dojo.require("dijit._Widget");dojo.require("dijit._Templated");dojo.declare("hello.world",[dijit._Widget,dijit._Templated],{    yourName:'world',    typeIn:null,    echoDiv:null,    constructor:function(params,node){        this.yourName=params.yourName;            },    postCreate:function(){                this.typeIn=document.createElement("input");                this.typeIn.type="text";                this.domNode.appendChild(this.typeIn);                this.echoDiv=document.createElement("div");        this.domNode.appendChild(this.echoDiv);        dojo.connect(this.typeIn,"onkeyup",this,"updateHello");//动态绑定事件                this.updateHello();//调用方法初始化一下，先显示一个空的hello    } ,    updateHello:function(){        this.echoDiv.innerHTML="hello "+this.typeIn.value;    }});

而HTML文件中对控件的引用，不用做任何改变(严格来讲，你需要删除yourName="jinxfei"这个属性）。

从这个稍微有一点点复杂的控件，我们已经可以看出DOJO的优势：
真正的面向对象！
控件管理范畴内的DOM元素，都可以放在类中作为属性来使用（直接用this.xxx引用)，
这样，避免了document.getElementByID()满天飞，控件是内聚的。
响应事件的方法也是类的方法，免得在页面中声明大量的离散function，不好管理。

我先歇歇，接下来整理一下DOJO的模板机制，用模板做复杂控件更容易一些，
还有与DWR的结合等等。

[解决办法]
个人认为,如果要在一个项目开始时引入一个JS框架来节省开发时间也好,增强页面效果也好,如果时间不是很充裕的话,我会选择用JQUERY,个人认为有以下几个好处

1.没有牵扯大量面向对象理论,写出来的代码可以很过程式,易维护
2.简单易学,一天就上手
3.插件多

然后EXT收费之后我对其除了鄙视还是鄙视
[解决办法]

探讨
引用:
个人认为,如果要在一个项目开始时引入一个JS框架来节省开发时间也好,增强页面效果也好,如果时间不是很充裕的话,我会选择用JQUERY,个人认为有以下几个好处

1.没有牵扯大量面向对象理论,写出来的代码可以很过程式,易维护
2.简单易学,一天就上手
3.插件多

然后EXT收费之后我对其除了鄙视还是鄙视

呵呵，先共同鄙视以下EXT！

JQUERY确实很好，设计思想很独到，
JQUERY让我想…

[解决办法]
jquery比较好使，他的连缀，隐式迭代，大量的开源控件。。。不使用，不行啊。

[解决办法]
项目正在用dojo，感觉这几个框架中，这个还是比较复杂的。jquery个人比较喜欢
[解决办法]
dojo主要的优点体现在他的数据绑定,在js中实现了组件的mvc.
至于所说的jquery的过程式编程优点,dojo提供了dojo.query()方法予以支持.当初设计时不用$也是考虑到命名空间的问题.
[解决办法]
dojo的学习曲线是最大的，比MFC还费劲。。。

麻雀虽小五脏俱全：用DOJO写一个最简

热点推荐