小而强大是我们在系统开发的时候所追求的,用少量代码解决复杂问题这是优秀代码的灵魂;
而我们平常使用的架构、框架正是这种思想的实例化;
术语:RIA(RIA是Rich Internet Applications的缩写,翻译成中文为富因特网应用程序)技术
随着浏览器厂商对产品的标准化和Web2.0技术的成熟程度我们会经常在开发中使用AJAX这种看似简单但功能强大的技术,关于AJAX技术的介绍在此省略大家可以到网上查找相关
资料;在使用AJAX开发的过程中重点还是怎么提交表单、根据数据操作DOM,随后大量的JS框架、工具应声而起,像:prototype.js、jQuery.js、Ext.js以及单独用于Java语言的Dojo框架,
当然还有公司自己写的一些工具(操作DOM,获得XMHttpRequest对象、发送AJAX请求等等),因对于AJAX技术的兴趣所以就在项目中初体验了一把:
下面简单介绍这几个框架的特点:
一、prototype.js
1、程序代码使用面向对象的思想实现,封装、分类很好,功能强大;$('标签ID')返回的是原始的DOM对象
例如:
1)隐藏一个DIV标签就可以这样写:Element.hide('divname');
2)获得一个对象的value属性:$('loginName').value;
发送AJAX请求:
var url = 'login.do';
new Ajax.Request(
url,
{
method:'post',
onComplete:function(originalRequest) {
var result = originalRequest.responseText;
}
}
);
2、有完善的API文档,上手程度:容易,有一定DOM基础一周即可上手
二、DOJO
一款基于JAVA语言的AJAX开发框架,因为和JAVA代码有耦合关系所以不推荐
三、Ext.js
1、一款完全使用BS模拟CS的框架,功能相当强大、界面也很美观,堪称目前最完美的框架,代码封装很好易于调用,好像代码写法类似于prototype.js,
这个没有怎么研究不发表意见,但通过看了一些DEMO和代码想熟练应用需要一段时间学习
2、有完善的API文档,但功能强大的背后需要你花大量时间学习,公司讲究的是效率,而且Ext.js源文件相当庞大(大概1M左右)
上手程度:难
四、jQuery.js
它具有如下一些特点:
- 代码简练、语义易懂、学习快速、文档丰富。
- jQuery是一个轻量级的脚本,其代码非常小巧,最新版的JavaScript包只有20K左右。
- jQuery支持CSS1-CSS3,以及基本的xPath。
- jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
- 可以很容易的为jQuery扩展其他功能。
- 能将JS代码和HTML代码完全分离,便于代码和维护和修改。
- 插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。
jQuery的设计会改变你写JavaScript代码的方式,降低你学习使用JS操作网页的复杂度,提高网页JS开发效率,无论对于js初学者还是资深专家,jQuery都将是您的首选。
jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不同的Web应用程序中。
1、是继prototype.js发布以来又一款优秀JS框架,jQuery.js最新的版本只有30k大小,和Ext.js比较一下吧……
2、强大的$()选择器:
1)根据ID属性选择对象:$('#idname')返回一个 jQuery对象,当然可以通过.get(num)来获得原始的DOM对象
2)根据class属性选择:$('.lock'),选择class为lock的对象
3)根据DOM层级关系选择:$('div p'),选择div下面的所有p对象
4)根据XPath选择:$('a[@title]'),选择所以带title属性的链接对象
所以的选择操作都是使用$()这个不起眼的方法,这里就不在一一列举了,大家可以下载一个JS包然后根据API文档体验一把
3、AJAX请求:
$.ajax({
url : url,
data : {
id : detailId
},
dataType : "json",//返回数据类型(json|xml|文本)
success : function(json){//成功时调用函数
//循环设置文本框的值
for (key in json) {
$('#' + key).val(json[key]);
}
},
error : function() {
$_form_common.dialog('加载信息失败,请重试!','error');
}
});
动态加载javascript文件:
$.getScript('../../loadx.js');
动态加载文件内容到页面:
$('#edit').load('editForm.html', function(){alert('加载完成');});
…………
4、动画功能:
我们在开发一个系统的时候做一个动作可能会显得生硬,恰巧jQuery提供了动画功能,例如:$('#infoDiv').fadeIn()做出淡入的效果也可以使用:
$('#infoDiv').fadeOut()产生淡出的效果,当然也可以自定义动画效果给用户另一种体验
5、另外一个惊喜是基于jQuery框架有几百种开发RIA应用的插件(包括:用户界面、DOM操作、表单、ajax工具、对话框、列表、翻页、动画插件和辅助工具等等)
6、插件继承方便:因为插件都继承与jQuery框架,所以在使用插件的时候只要引入jQuery.js和插件的javascript文件就可以了
7、使用jQuery开发系统我们完全有能力用BS实现CS架构的系统
五:一些关于jQuery的资料:
目前最新版本为:1.2.6
1、官方网站:http://jquery.com/,
插件下载地址:http://plugins.jquery.com/(包含所有RIA开发时使用的插件,想到的插件基本上都有)
240个插件:http://www.ntsky.com/tech/web/javascript/2008-04-15/1ede7250b1626bbe.html(中文网站)
中文网站:http://wiki.jquery.org.cn/doku.php,BBS:http://bbs.jquery.org.cn/
另外国内一个RIA技术网站:http://www.cssrain.cn/,里面有很多关于 jQuery插件及技术帖子
2、在eclise中编写javascript插件spket,可以和编写java代码一样提示输入等,插件地址:http://spket.com/(安装方法就不用介绍了吧)
3、另外也有图书出版:《Learning jQuery》,为一个纯javascript框架出书还不叫少见……
小而强大jQuery做到了,相信他会为我们节省不少的时间,而且会更好的提升用户体验
因为jQuery小巧且功能强大,目前微软和诺基亚准备在不改变源码的情况下集成到自己的开发包中,这样的话以后的市场可想而知。
说点题外话:前段时间在jQuery官网下载一个对话框插件的时候遇到了点问题就找作者询问,竟然是一个软件园的(世界真小)
附:jQuery资料.rar
1)jquery.js的源码(原始版本、最小版本、压缩版本)
2)API文档
3)一些学习资料
4)DEMO演示(动画演示和一个表单验证插件)
资料下载、交流请加群: 23497508 (JAVA+AJAX精英联盟) (请注明来自CSDN)