`
ihuashao
  • 浏览: 4705175 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

麻雀虽小,五脏俱全:用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
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ -->preamble(/*Object*/ params, /*DOMNode*/node) //这是一个通常不会用到的方法,这个方法的返回值,作为constructor的输入参数param constructor(/*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
<!-- 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
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --><html> <head> <title>Hello World</title> <!-- 首先引入dojo.js,modulePaths用来定义包含控件的js目录,类似于jsp的自定义tag引入的机制--> <script type="text/javascript" src="./dojo/dojo.js" djConfig/



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


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

HTML code
<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --><html> <head> <title>Hello World</title> <!-- 首先引入dojo.js,modulePaths用来定义包含控件的js目录,类似于jsp的自定义tag引入的机制--> <script type="text/javascript" src="./dojo/dojo.js" djConfig="parseOnLoad:true,modulePaths:{hello:'../hello'}"> </script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("hello.world"); </script> </head> <body> <div dojoType="hello.world" yourName="jinxfei"></div> </body> </html>



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

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("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
<!-- 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("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的结合等等。

分享到:
评论

相关推荐

    ajax最好的框架之一:dojo包

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,特别是在Ajax技术方面。作为Ajax的最佳框架之一,Dojo 提供了全面的解决方案,涵盖了从数据管理到用户界面构建的所有方面。 1. **Dojo核心...

    dojo控件的使用和入门心得

    Dojo是一个功能强大的JavaScript框架,专门设计用于简化富互联网应用(RIA)的开发。作为一种DHTML Toolkit,Dojo封装了大量的常用功能,旨在提高前端开发效率和用户体验。通过采用Ajax技术,Dojo能够实现客户端与...

    麻雀虽小五脏俱全 Dojo自定义控件应用

    在上述代码中,我们定义了一个名为`hello.world`的自定义控件,它继承了`dijit._Widget`和`dijit._Templated`,并使用了一个简单的HTML模板。`constructor`用于初始化,`postCreate`则用来处理控件创建后的业务逻辑...

    dojo所有jar包dojoroot

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括AJAX、DOM操作、动画效果、事件处理、数据存储等。在Java环境中,Dojo 也常被用于构建后端服务或者与Java应用进行集成。"dojo所有jar包...

    dojo官网的源码dojo官网的源码

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括AJAX、DOM操作、动画效果、国际化、事件处理等。这个压缩包包含的是Dojo框架的1.4.2版本的源码,这是一个较早的版本,但仍然包含了许多...

    dojo 一个小的例子

    在实践中,你可以通过创建一个简单的Dojo应用开始,比如一个动态更新的计数器,使用Dojo的事件处理和数据绑定功能。首先引入Dojo库,然后定义一个状态对象,将其绑定到HTML元素,每次点击按钮时更新计数器值。这样既...

    dojo完整包

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,涵盖了从DOM操作、事件处理到AJAX通信等多个方面。这个“dojo完整包”包含了解压后可以直接使用的所有Dojo资源,使得开发者无需从头构建...

    dojo dojo实例 dojo例子 dojo资料 dojo项目 dojo实战 dojo模块 dojo编程

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,涵盖了从DOM操作、事件处理到AJAX通信等多个方面。Dojo的核心在于它的模块化系统,这使得开发者可以按需加载代码,提高应用的性能和可维护...

    dojo 1.7 最新dojo包,内含最新的实例若干个。

    这个压缩包中的"dojo-release-1.7.1"代表的是Dojo框架的1.7.1版本,这是一个稳定且广泛使用的版本。在这个版本中,Dojo提供了许多关键功能和改进,使得它成为开发者构建复杂前端应用的理想选择。 1. **模块化系统**...

    dojo-release-1.0.2

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,尤其在构建复杂的、企业级的AJAX应用程序方面表现出色。"dojo-release-1.0.2"是Dojo框架的一个早期版本,发布于2008年,这个版本在当时包含...

    图书:Dojo入门

    Dojo是一个开源的JavaScript框架,旨在提供一站式的解决方案,包括UI组件、数据管理、动画效果、Ajax交互等功能。它使得Web开发更加高效,代码更加模块化。 在学习Dojo时,首先要理解其核心概念,如dojo.js主文件,...

    dojo源码

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括DOM操作、事件处理、动画效果、模块管理、数据存储等。在深入理解Dojo源码之前,我们首先需要对JavaScript库和模块化开发有一个基本的...

    这是一个dojo测试例子

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括AJAX、DOM操作、动画效果、事件处理、模块化等。在"dojo测试例子"中,我们很可能会涉及到以下Dojo的核心概念和技术: 1. **dojo加载器...

    Dojo构建Ajax应用程序源码(包括书中用到的dojo-release-1.1.2)

    Dojo 是一个强大的JavaScript工具库,专为构建复杂的Web应用程序而设计。这个压缩包包含了Dojo框架的一个早期版本——dojo-release-1.1.2,它对于了解Dojo的历史和学习Ajax应用程序的构建非常有价值。在JavaScript的...

    dojo开发文档

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,涵盖了从DOM操作、事件处理到AJAX通信、动画效果等各个方面。在"dojo开发文档"中,我们可以深入学习Dojo的核心特性和使用方法,提升我们的...

    用于dojo学习

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,尤其在构建复杂的、企业级的富互联网应用程序(Rich Internet Applications, RIA)时表现突出。本压缩包"dojostudy"显然是为了帮助用户学习...

    学习dojo

    Dojo是一个强大的JavaScript库,它提供了丰富的用户界面组件、模块化开发、数据管理以及动画效果等功能,广泛应用于Web应用开发。Dojo的全名是Dojo Toolkit,它是一个开源的JavaScript框架,旨在帮助开发者创建高...

Global site tag (gtag.js) - Google Analytics