Jquery IN springside

1. 资料

• JQuery资料(江南白衣博物馆)
• Dojo Base

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的几种常用法，包括：

1. 将Form中的内容序列化成字符串动态提交。
2. 动态获取文本内容，更新本页内容。
3. 动态获取JSON内容，更新本页内容。
4. 基于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");