JqueryINspringside

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

将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");