1. 资料
2. 选型
- 因为widgets框架如Ext 和 Dojo Dijit始终不够好用,决定还是忍一忍,等一等到RIA时代。
- Prototype.js,JQuery, Dojo Base这类Javascript库,有助于跨浏览器的Javascript,并简化对象选择、DOM操作、Ajax操作。
- JQuery比Prototype.js的发展似乎好一点,起码Plugin是在官方网站管理的,同时JQuery UI也在向着好的方向发展。
- 如果自己写的JavaScript很多,则推荐用Dojo,因为它的javascript文件Package管理和Javascript最弱的面向对象继承机制是做的最好的。
3. JQuery in SpringSide3
在Showcase的Ajax示例中演示了jquery的ajax标准功能和基于JSONP的跨域访问。
3.1 基本功能
JQuery的最基本功能包括是选择DOM对象,设置其内容、属性、CSS及一些常用操作,如:
$("#loginName").val("calvin");
其中#loginName 是CSS语法,获得页面id为loginName的元素。一般按ID获取对象已足够,想使用更高级的CSS+XPath的获取方法,参考JQuery的Selector文档。
注意JQuery1.3后,按属性查询对象的语法已取消@,下面语句为name为"gender"的radio,checked值为"male"的box。
$('input:radio[name=gender]').val(['male']);
3.2 Ajax
在showcase使用了ajax的几种常用法,包括:
- 将Form中的内容序列化成字符串动态提交。
- 动态获取文本内容,更新本页内容。
- 动态获取JSON内容,更新本页内容。
- 基于JSONP,跨域获取html内容,更新本页内容。
注意要避免缓存,要不服务端返回时输出no-cache参数,要不使用JQuery中最麻烦的用法$.ajax()方法来设定非缓存参数,详见JQuery官方文档。
因为Ajax时,会在URL中传输中文字符,需要设置URI-Encoding="UTF-8"(如Tomcat在server.xml中设置),否则会出现乱码。
跨域访问的细节可见IBM DW的文章《Cross-domain communications with JSONP》
3.3 Valiation plugin
Validation 是著名的客户端输入校验plugin,可进行非空、数字等常规校验,也可以远程ajax判断用户名是否唯一,详见 JQuery Plugin资料。
min-web中用它代替了Struts2的validate框架,详见的user-input.jsp(正式风格)、login.jsp(轻量风格)。
4. DOJO Base in SpringSide3
在showcase的Ajax示例中演示了DOJO Base的面向对象和Package管理。
Dojo Base的基本功能没什么出彩的地方,不过不失,但它的面向对象继承与JavaScript Package管理就做得很不错,如果项目需要写大量的Javascript,可采用Dojo Base来加强管理。
4.1 面向对象定义
下面这段容易理解的面向对象父类子类定义,在JavaScript世界是很难得的。
//父对象, 拥有_color属性与getColor()函数
dojo.declare("Shape", null, {
_color : "",
constructor : function(color) {
this._color = color;
},
getColor : function() {
return this._color;
}
});
//子对象, 拥有半径属性与计算范围的函数, 同时继承父对象属性与函数.
dojo.declare("Circle", Shape, {
_radius : 0,
constructor : function(color, radius) {
this._radius = radius;
},
getArea : function() {
return Math.PI * this._radius * this._radius;
},
generateContent : function() {
return "Shape is a circle with " + this.getColor() + " color," + this.getArea() + " area.";
}
});
4.2 Package管理
在dojo js文件的父目录,放入需要管理的目录与原文件,如dojo.js路径为js/dojo/dojo.js, 放入新的js/showcase/shape.js,并在shape.js中声明dojo.provide("showcase.shape");
则可在任意地方以以下语句载入该文件。
dojo.require("showcase.shape");