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

核心提示： 前面的列表包含每个文件安装时的默认目录，你可以将这些javascript文件放到web服务器的任何位置，利用免费JS框架构建强大web接口界面(2)，但是使用默认目录将会使得和示例一起工作更简单些，你可能不理解为什么在一个web页头部包含这些文件，Scriptaculous是一个使用框架的

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

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

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

使用它

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

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

以下是引用片段：
<scripttype="text/javascript">
//<！[CDATA[
newControl.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应用中。在下周的文章中我会提供更多的使用示例。