麻雀虽小五脏俱全 Dojo自定义控件应用
现在Javascript框架、控件库有很多，jQuery、Ext、prototype、MooTools、Dojo等等，这些都是在Google上搜索“javascript+framework”列在第一页的。其中，除了MooTools，其它的都有所了解，但只在项目中用过Ext和Dojo。但一直不太喜欢Ext，性能有问题，新的版本还收费了。
另外，Ext官方提供的例子都是用JavaScript来创建和初始化控件，一个JavaScript配套一个HTML来用，这样管理起来很混乱。而且官方例子是Best Practice，所以不太接受这种模式。Dojo在本人眼里是一个缺点和优点都很突出的家伙：
缺点：
1、文档非常之差；
2、CodeBase非常之大（优点乎，缺点乎?）；
3、版本演进快，且每次版本演进，都有大量的API发生变化，还不够成熟。
优点：
1、是一个很优秀的控件开发框架；
2、完全体现了javascript面向对象的一面。
EXT和Dojo比起来，本人觉得EXT是一个控件库，而Dojo是一个框架。第一次接触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控件，你需要了解的知识并不太多：
◆一个控件就是一个JS类；
◆所有的控件都继承自_Widget或其子类，_Widget类提供了控件的生命周期管理函数；
◆可以同时继承_Templated，继承该类，可以为控件绑定模板来描述控件的展示。
关于_Widget基类的介绍
1、生命周期方法
_Widget提供了一系列方法称为“生命周期方法”，Dojo框架在初始化一个控件的时候，会依次调用它们，我们的自定义控件，可以重写特定的方法来加入自己的初始化逻辑，方法调用顺序及说明：
代码如下:
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"同级目录）。
代码如下:
//声明自己输出的类名
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>
<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">
</div>
</body>
</html>
modulePaths的具体作用和用法，请google即可。接下来，我们将控件参数化，我们可以在写标签的时候，将名字作为参数传进去，然后控件显示HELLO XXX，首先将html文件改成：
代码如下:
<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中使用，JavaScript代码如下：
代码如下:
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的时候，动态增加一个输入框，并为输入框动态绑定事件：
代码如下:
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，不好管理。
相关推荐
-
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
所以Javascript已经成为了web开发最最基本的要求之一了. 而在现实的敏捷开发中,我们通常会选择一个JS框架来取代繁琐的Native Javascript的编写.你会发现这样会节省很多的时间,写的代码也很清晰便捷.(当然在学生时代的是有也质疑过,用框架会对原生态的 Javascript理解不深入,其实这是多虑了的.在对框架的深入的同时,对原生的js也会理解的更透彻一些.成为一个精明的开发者,两者是相依相偎的.而最好的状态就是想Qzone前端一样,完全按照自己的需求开发出一套JS,CSS框
-
Dojo 学习要点
由于要学习 ArcGIS Server JavaScript API,在此 API 中 ESRI 采用的是 JavaScript 开源框架 Dojo,于是先学习了点 Dojo 的知识,算是为以后的工作做准备吧. 其实开源 JavaScript 框架很多,比如最早的 prototype,很实用的 jQuery,Yahoo 的 Yui,超炫的 ExtJS 等,至于为什么 ESRI 采用 Dojo,我们也不必去猜测,肯定有人家的道理滴,好好学习 Dojo 才是硬道理. 学习 Dojo 之前,务必要掌握
-
dojo 之基础篇(三)之向服务器发送数据
向服务器发送数据有get和post两种. 首先,要将body中的html代码替换为 <button dojoType="Button" widgetId="helloButton">Hello World!</button> <br> 请输入名称: <input type="text" id="name">不输入数据,怎么提交数据呢. get我们只要将基础篇(二)中的: func
-
Dojo获取下拉框的文本和值实例代码
Dojo Dojo是一个用javascript语言实现的开源DHTML工具包.它是在几个项目捐助基础上建立起来的(nWidgets,Burstlib,f(m)),这也是为什么叫它a"unified"toolkit的原因.Dojo的目标是解决开发DHTML应用程序遇到的那些,长期存在.历史问题(historical problems with DHTML).跨浏览器问题. 1.问题背景 这里有一个下拉框,其中选项为一年四季,选中后打印下拉框的值和文本 2.实现源码 <!DOCTYP
-
dojo学习第二天 ajax异步请求之绑定列表
用户不喜欢滚动条,于是我们做成了选项卡切换,用户不喜欢刷新页面,于是我们就要使用ajax了,前些年,几乎每个web端开发人员,都以懂得一点点ajax而自豪,但知道使用ajax是远远不够的,因为技术是为人而服务的,不能滥用技术,你总不能为了验证一个文本框textbox而去异步请求一次.我还遇到过有人,更新用户信息的时候,使用ajax更新,用户信息中的图片,又使用回发来更新,一个更新中,先ajax卡在那,然后再回发,你说这是多么2的行为?这种人还不少,我还遇到过有人用ajax更新后再location
-
dojo随手记 gird组件引用
我建了一个文件里面代码是网上下的<精通dojo>的代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- ! Excerpted from "Mastering Dojo", ! published by The Pragmati
-
dojo 之基础篇(二)之从服务器读取数据
本例子沿用 "dojo 之基础篇" 中的内容首先,我们在HelloWorld.html的同一级目录,新建一个文件,名为response.txt,内容为: Welcome to the Dojo Hello World Tutorial 将section 2的代码替换 为以下代码 <!-- SECTION 3 --> <script type="text/javascript"> dojo.require("dojo.io.*&quo
-
dojo学习第一天 Tab选项卡 实现
其实不然,用<精通Dojo>里的话来说就是"Dojo不只是一个程序库,而是一个工具包",它比其他所有的JS库的插件更全面更广阔.它包含大约40个用户界面控件.1个图形框架.cometd支持.1个打包系统,还有其他的一些东西. 从dojo官方网站 上下载最新版1.6,解压下来,它有三个文件夹分别是: 1. dojo: 是Dojo基础,你要做的其它事情都是在它的基础上,类似于jquery.js文件,但比它更丰富了一些其他功能; 2. dijit : Dojo的小部件框架及内建的
-
麻雀虽小五脏俱全 Dojo自定义控件应用
现在Javascript框架.控件库有很多,jQuery.Ext.prototype.MooTools.Dojo等等,这些都是在Google上搜索"javascript+framework"列在第一页的.其中,除了MooTools,其它的都有所了解,但只在项目中用过Ext和Dojo.但一直不太喜欢Ext,性能有问题,新的版本还收费了. 另外,Ext官方提供的例子都是用JavaScript来创建和初始化控件,一个JavaScript配套一个HTML来用,这样管理起来很混乱.而且官方例子是
-
基于Vue.js的表格分页组件
一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-
-
浅谈Vue.js
vue.js的总体评价"简单却不失优雅,小巧而不乏大匠" Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJs,下面我会将Vue与Angular(Angular 1.0+版本)做一些简单的比较. Vue的主要特点就和它官网(http://cn.vuejs.org/)所介绍的那样: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (
-
初识简单却不失优雅的Vue.js
作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是"简单却不失优雅,小巧而不乏大匠",下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的兴趣. Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJs,下面我会将Vue与Angular(Angular 1.0+版本)做一些简单的比
-
javascript结合Canvas 实现简易的圆形时钟
之前学习了下html5中的canvas元素,为了练练手就实现了一个简易的时钟.时钟本身并不复杂,也没有使用图片进行美化,不过麻雀虽小五脏俱全,下面就与大家分享一下: 演示效果: html代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
AngularJs bootstrap搭载前台框架——准备工作
1.关于什么是AngularJs以及什么是bootstrap我就不多说了,简单说下,AngularJs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包,可以迅速搭建web前台,可以去官网看看(AngularJs:http://angularjs.org/ ,bootstrap:http://twitter.github.io/bootstrap/). 2.github上有一个比较好的纯净AngularJs app的种子,可以去github下载,地
-
支持断点下载的VBS代码
之前我就介绍过VBScript语言的强大.今天再给出一个支持断点下载的VBS代码. 并附上VBS代码的解析,不懂的朋友可以配合微软的SCRIPT56.CHM文档自学.很简单, VBS的好处就是代码易于理解.基本上每行代码执行功能都用英文表示出来了. 这个代码也是对我以前介绍的VBS下载功能的补充. 老规矩,复制保存为dl.vbe. 不过这个VBS的代码的不同之处不是双击运行,而是在CMD命令行下执行. 下载功能执行的格式是: cscript.exe dl.vbs (目标文件地址) [以下载Met
-
深入挖掘Windows脚本技术第1/2页
深入挖掘Windows脚本技术 文章作者:zzzEVAzzz <zzzevazzz@126.com> 为使文中涉及的代码整洁,将使用论坛的PHP标签处理.(没有VBS标签,code标签不好用,郁闷) 如果转载本文,请注意做相应调整. [目录] 1,前言 2,回顾WSH对象 3,WMI服务 4,脚本也有GUI 5,反查杀 6,来做个后门 7,结语 8,参考资料 [前言] 本文讲述一些Windows脚本编程的知识和技巧.这里的Windows脚本是指"Windows Script Host
-
PHP中的递归正则表达式用法分享
什么时候会用到递归正则表达式呢? 当然是待匹配的字串中递归地出现某种模式时(貌似废话). 最经典的例子, 就是递归正则处理嵌套括号的问题了. 例子如下. 假设你的文本中包含了正确配对的嵌套括号. 括号的深度可以是无限层. 你想捕获这样的括号组. 复制代码 代码如下: <?php $string = "some text (a(b(c)d)e) more text"; if(preg_match("/\(([^()]+|(?R))*\)/",$string,$m
-
PHP中的递归正则使用说明
之前一篇文章翻译了Perl语言中的递归正则表达式. 其实不少语言中的正则都是支持递归的, 例如本文要介绍的PHP正则递归. 虽然, 工作中最常用的正则表达式都很"正则", 只用最基本的语法就能解决85%以上的问题, 而且合理有效地使用普通正则来解决复杂问题也是一门技巧与学问; 但是高级一点的语法的确有它存的价值, 有时不用它还真办不了事儿; 况且学习正则的乐趣也在于尝试各种各样的可能性, 满足自己无穷无尽的好奇心. 本文内容, 整理自网文Finer points of PHP regu