麻雀虽小五脏俱全Dojo自定义控件应用
现在
另外,Ext官方提供的例子都是用JavaScript来创建和初始化控件,一个JavaScript配套一个HTML来用,这样管理起来很混乱。而且官方例子是BestPractice,所以不太接受这种模式。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版的HelloWorld控件,你需要了解的知识并不太多:
◆一个控件就是一个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="hellowworld";
}
}
);
该控件的行为极其简单,在postCreate方法中,将自己在HTML页面中对应的DOM节点的内容设置为hellowworld。
<html>
<head>
<title>HelloWorld</title>
<!--首先引入Dojo.js,modulePaths用来定义包含控件的js目录,类似于jsp的自定义tag引入的机制-->
<scripttype="text/javascript"src="./Dojo/Dojo.js"djConfig="parseOnLoad:true,modulePaths:{hello:"../hello"}"></script>
<scripttype="text/javascript">
Dojo.require("Dojo.parser");
Dojo.require("hello.world");//引入自定义控件
</script>
</head>
<body>
<divDojoType="hello.world">
</div>
</body>
</html>
modulePaths的具体作用和用法,请google即可。接下来,我们将控件参数化,我们可以在写标签的时候,将名字作为参数传进去,然后控件显示HELLOXXX,首先将html文件改成:
<html>
<head>
<title>HelloWorld</title>
<!--首先引入Dojo.js,modulePaths用来定义包含控件的js目录,类似于jsp的自定义tag引入的机制-->
<scripttype="text/javascript"src="./Dojo/Dojo.js"djConfig="parseOnLoad:true,modulePaths:{hello:"../hello"}">
</script><scripttype="text/javascript">
Dojo.require("Dojo.parser");
Dojo.require("hello.world");
</script></head><body>
<divDojoType="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;
}
}
);
接下来,我们将进一步增加控件进的复杂性,增加一个输入框,在这个输入框中输入文本的同时,动态更新helloXXX,这就要用到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,不好管理。
相关文章
- ELK数据管理工具ES-Head应用
- 7.Prometheus监控进阶之自定义监控业务应用
- JS_SDK实现网站应用QQ登录功能-QQ互联(源码版)
- 机器人ChatGPT应用:设计原则和模型能力
- 彻底搞懂监控系统,使用Prometheus监控Spring Boot应用,自定义应用监控指标!
- 【Android 应用开发】 自定义 圆形进度条 组件
- 关于 SAP UI5 应用 render2 实例异步创建的编码实现
- MySQL与PHP的基础与应用专题之增删改查
- 深入理解Android 自定义attr Style styleable以及其应用详解手机开发
- Linux应用:自由,易用,功能强大(linux应用是什么)
- 在选择屏幕的标准应用工具条上增加自定义按钮详解编程语言
- Linux应用新功能发布大会火热开幕(linux应用发布)
- 掌握Oracle触发器类型及其应用(oracle触发器类型)
- 大疆技术推出 Linux 专用应用(大疆linuxapp)
- KMP算法在Oracle环境中的应用实践(kmp oracle实现)
- 元素使用Redis队列追加元素,让你的应用更强大(redis队列追加)
- js有框架页面跳转(target)三种情况下的应用
- ThinkPHP模板替换与系统常量及应用实例教程