利用免费javascript框架构建强大web接口界面

tznktg · 发表于 2007-10-6 10:45:42

现今，随着web应用方面提供了日益丰富的免费工具、代码等，构建web应用已经变得越来越流行。一些资源已经被开发出来，并经过测试，所以你可以用来快速地增加应用特性。一个典型的例子是script.aculo.us(或者scriptaculous)网站，该网站提供了用于构建强大web应用的javascript库，重要的是这些资源都是免费的。本周，我们将带你对该网站和它提供的资源进行亲密接触。

它是什么？

Scriptaculous是一种用于构建动态web 2.0接口的框架。它使用了另外一个称为prototype的免费框架。Scriptaculous简化了输入和输出以实现基于AJAX的web接口，允许你轻松地添加新的或传统的数据控件和工具用来和DOM及javaScript一起工作。

为什么使用它？

AJAX是一个重要的技术，但是构建基于AJAX的应用是件令人迷惑和费时的事情。Scriptsculous框架使得在应用中添加基于AJAX的特性更加容易可行，因为所有的开发和测试都已经完成，你可以将时间投入到更重要的任务中去。

开始使用

使用scriptaculous框架的第一步是下载和安装。下载的是一个压缩文件，该文件包含用于测试和演示的javascript文件和各种各样的HTML文件。Javascript源文件是最重要的，下面是各种源文件列表：

libprototype.js：用于原型javascript框架的源代码。

scrbulder.js：允许你轻松创建动态DOM对象。

srccontrols.js：包含和传统数据控件一起工作的核心组件。

srcdragdrop.js：提供使用传统数据控件实现拖放相关功能的代码。

srceffects.js：可视化效果库包含所有你需要添加到web应用的高价javascript新控件。 srcscriptaculous.js：实现sciptaculous框架的基代码库。

srcslider.js：提供实现滑动数据控件的代码。

前面的列表包含每个文件安装时的默认目录。你可以将这些javascript文件放到web服务器的任何位置，但是使用默认目录将会使得和示例一起工作更简单些。

你可能不理解为什么在一个web页头部包含这些文件。因为，全部库文件（列表中的所有文件）占用大约150KB空间，两个核心文件Prototype.js和scriptaculous.js总计达50KB，所有其它组合将会在50KB到150KB之间，这取决于你要使用的文件。

默认情况下，scriptaculous.js加载其它用于效果、拖放、滑动和所有其它scriptaculous特性的javascript文件。在加载scriptaculous 脚本文件时，你可以限制通过把脚本加入到逗号隔开的列表加载的其它脚本。

tznktg · 发表于 2007-10-6 10:45:54

使用它

一旦你已经下载并安装了框架，就可以在网页中轻松使用它。第一步是在网页的头部连接到javascript源文件，见列表A(第三页)。

可以通过HTML标记来访问框架提供的各种函数。查看安装在框架中的一个示例文件你可以获得更好的理解。作为一个示例，我选择默认安装时testfunctional目录下的slider.html文件来说明，该文件的完整内容太大，,所以不能全部在这里列出，但是我们可以查看在一个页面上加载一个滑动控件的一部分。标准水平滑动控件为：

<script type="text/javascript">

// <！[CDATA[

new Control.Slider('handle1','track1',{

sliderValue:0.5,

onSlide:function(v){$('debug1').innerHTML='slide: '+v},

onChange:function(v){$('debug1').innerHTML='changed! '+v}});

// ]]>

</script>

使用CDATA部分回避当在javascript中使用诸如<和>字符时面对的问题。代码用来创建一个新的滑动控件(通过控件类)并设置它的初始位置及添加滑动块句柄和改变事件。同时，框架函数可以通过单击事件轻松使用。

文档化

很多免费工具的一个缺陷是缺乏文档和示例。Scriptaculous框架通过它的wiki提供大量示例代码和简单文档。此外，一个快速Google搜索引擎域会更有帮助。一个很好的例子是各种各样的样式表可用来快速引用使用框架的表。

在test目录下的functional子目录中框架包含大量示例集，你可以更仔细地分析test文件，这样会对如何在web应用中使用框架函数有更好的理解。此外，scriptaculous网站的示例部分提供了大量的例子。

许可问题

使用免费或第三方工具的另一个问题是在商业产品中使用它们，这通常涉及到许可问题，但是使用这一工具不涉及此问题。简单说就是，你可以免费在任何地方使用scriptaculous框架，只要你的版权声明中没有删除javascript源代码文件。

谁使用它？

在网络中有大量的免费工具和库文件，你可以通过核查使用它们的用户和如何使用，以了解工具的可用性。Scriptaculous框架目前被各个网站以各种方式来使用，这些网站包括：Apple、The Globe and Mail newspaper、NBC News和Basecamp。

起点

当用户的期望增加时，项目开发时间继续在缩短，但是免费工具和框架使得添加新特性的应用变得更容易。Scriptaculous是一个使用框架的很好的例子，它允许简单的添加强大的基于AJAX用户接口特性到web 2.0应用中。在下周的文章中我会提供更多的使用示例。

tznktg · 发表于 2007-10-6 10:46:09

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

利用免费javascript框架构建强大web接口界面

相关帖子

浏览过的版块