• 2668阅读
  • 1回复

prototype.js 开发笔记 [复制链接]

上一主题 下一主题
 
只看楼主 倒序阅读 0楼 发表于: 2006-05-11
sergio_pereira/文 sunfmin/译
1. Prototype 是什么?
或许你还没有用过它, prototype.js 是一个由Sam Stephenson 写的JavaScript 包。这个构思
奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端, 高交互性WEB 应用程序的重担。轻松加
入Web 2.0 特性。
如果你最近体验了这个程序包,你很可能会发现文档并不是它的强项之一。像所有在我之前的开发者一样,
我只能一头扎进prototype.js 的源代码中并且试验其中的每一个部分。 我想当我学习他的时候记写
笔记然后分享给其他人将会很不错。
我也一起提供了这个包的对象,类,方法和扩展的 非官方参考 。
2. 通用性方法
这个程序包里面包含了许多预定义的对象和通用性方法。编写这些方法的明显的目的就是为了减少你大量
的重复编码和惯用法。
2.1. 使用 $()方法
$() 方法是在DOM 中使用过于频繁的 document.getElementById() 方法的一个便利的简写,就像
这个DOM 方法一样,这个方法返回参数传入的id 的那个元素。
比起DOM 中的方法,这个更胜一筹。你可以传入多个id 作为参数然后 $() 返回一个带有所有要求的元
素的一个 Array 对象。下面的例子会向你描述这些。

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.3.1.js"></script>
<script>
function test1()
{
var d = $('myDiv');
alert(d.innerHTML);
}
function test2()
{
var divs = $('myDiv','myOtherDiv');
for(i=0; i<divs.length; i++)
{
alert(divs.innerHTML);
}
}
</script>
</HEAD>
<BODY>
<div id="myDiv">
<p>This is a paragraph</p>
</div>
<div id="myOtherDiv">
<p>This is another paragraph</p>
</div>
<input type="button" value=Test1 onclick="test1();"><br>
<input type="button" value=Test2 onclick="test2();"><br>
</BODY>
</HTML>


这个方法的另一个好处就是你可以传入id 字符串或者元素对象自己,这使得在创建可以传入任何形式参
数的方法的时候, 它变得非常有用。
2.2. 使用$F()方法
$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值,如文本框或下拉框。 这个方
法可以传入元素的id 或者元素自己。


<script>
function test3()
{
alert( $F('userName') );
}
</script>
<input type="text" id="userName" value="Joe Doe"><br>
<input type="button" value=Test3 onclick="test3();"><br>



2.3. 使用Try.these()方法
Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容
易, 他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行,返回
成功执行的那个方法的返回值。

在下面的例子中, xmlNode.text 在一些浏览器中好用,但是xmlNode.textContent 在另一些浏览
器中正常工作。 使用Try.these()方法我们可以得到正常工作的那个方法的返回值。


<script>
function getXmlNodeValue(xmlNode){
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;)
);
}
</script>

Security Checker
只看该作者 1楼 发表于: 2006-05-11
3. Ajax 对象
上面提到的共通方法非常好,但是面对它吧,它们不是最高级的那类东西。它们是吗?你很可能自己编写
了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。
我很肯定你对prototype.js 感兴趣的原因很可能是由于它的AJAX 能力。所以让我们解释当你需要完
成AJAX 逻辑的时候,这个包如何让它更容易。
Ajax 对象是一个预定义对象,由这个包创建,为了封装和简化编写AJAX 功能涉及的狡猾的代码。 这
个对象包含一系列的封装AJAX 逻辑的类。我们来看看它们的一些。
3.1. 使用 Ajax.Request 类
如果你不使用任何的帮助程序包,你很可能编写了整个大量的代码来创建XMLHttpRequest 对象并且异
步的跟踪它的进程, 然后解析出响应 然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非
常的幸运。
为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。
假如你有一个应用程序可以通过url
http://yoursever/app/get_sales?empID=1234&year=1998 与服务器通信。它返回下面这样的
XML 响应。

<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
<response type="object" id="productDetails">
<monthly-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-01</year-month>
<sales>$8,115.36</sales>
</employee-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-02</year-month>
<sales>$11,147.51</sales>
</employee-sales>
</monthly-sales>
</response>
</ajax-response>


用 Ajax.Request 对象和服务器通信并且得到这段XML 是非常简单的。下面的例子演示了它是如何完
成的。


<script>
function searchSales()
{
var empID = $F('lstEmployees');
var y = $F('lstYears');
var url = 'http://yoursever/app/get_sales';
var pars = 'empID=' + empID + '&year=' + y;
var myAjax = new Ajax.Request(
url,
{method: 'get', parameters: pars, onComplete: showResponse}
);
}
function showResponse(originalRequest)
{
//put returned XML in the textarea
$('result').value = originalRequest.responseText;
}
</script>
<select id="lstEmployees" size="10" onchange="searchSales()">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
<option selected="selected" value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
<br><textarea id=result cols=60 rows=10 ></textarea>



你看到传入 Ajax.Request 构造方法的第二个对象了吗? 参数{method: 'get', parameters:
pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有
一个名为 method 值为 'get'的属性,另一个属性名为 parameters 包含HTTP 请求的查询字符串,
和一个onComplete 属性/方法包含函数showResponse。

还有一些其它的属性可以在这个对象里面定义和设置,如 asynchronous,可以为true 或 false 来
决定AJAX 对服务器的调用是否是异步的(默认值是 true)。
这个参数定义AJAX 调用的选项。在我们的例子中,在第一个参数通过HTTP GET 命令请求那个url,
传入了变量 pars 包含的查询字符串, Ajax.Request 对象在它完成接收响应的时候将调用
showResponse 方法。
也许你知道, XMLHttpRequest 在HTTP 请求期间将报告进度情况。这个进度被描述为四个不同阶段:
Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调
用自定义方法 ,Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的
名为 onXXXXX 属性/方法中提供自定义的方法对象。 就像我们例子中的 onComplete 。你传入的方
法将会被用一个参数调用,这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的
数据并且或许检查包含有在这次调用中的HTTP 结果代码的 status 属性。
还有另外两个有用的选项用来处理结果。我们可以在onSuccess 选项处传入一个方法,当AJAX 无误
的执行完后调用, 相反的,也可以在onFailure 选项处传入一个方法,当服务器端出现错误时调用。
正如onXXXXX 选项传入的方法一样,这两个在被调用的时候也传入一个带有AJAX 请求的
XMLHttpRequest 对象。
我们的例子没有用任何有趣的方式处理这个 XML 响应, 我们只是把这段XML 放进了一个文本域里面。
对这个响应的一个典型的应用很可能就是找到其中的想要的信息,然后更新页面中的某些元素, 或者甚
至可能做某些XSLT 转换而在页面中产生一些HTML。
更完全的解释,请参照 Ajax.Request 参考 和 Ajax 选项参考。
3.2. 使用 Ajax.Updater 类
如果你的服务器的另一端返回的信息已经是HTML 了,那么使用这个程序包中 Ajax.Updater 类将使
你的生活变得更加得容易。用它你只需提供哪一个元素需要被AJAX 请求返回的HTML 填充就可以了,例
子比我写说明的更清楚。


<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater('placeholder', url, {method: 'get',
parameters: pars});
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>



你可以看到,这段代码比前面的例子更加简洁,不包括 onComplete 方法,但是在构造方法中传入了一
个元素id。 我们来稍稍修改一下代码来描述如何在客户端处理服务器段错误成为可能。

我们将加入更多的选项, 指定处理错误的一个方法。这个是用 onFailure 选项来完成的。
我们也指定了一个 placeholder 只有在成功请求之后才会被填充。为了完成这个目的我们修改了第一
个参数从一个简单的元素id 到一个带有两个属性的对象, success (一切OK 的时候被用到) 和
failure (有地方出问题的时候被用到) 在下面的例子中没有用到failure 属性,而仅仅在
onFailure 处使用了 reportError 方法。



<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';
var myAjax = new Ajax.Updater(
{success: 'placeholder'},
url,
{method: 'get', parameters: pars, onFailure: reportError});
}
function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>


如果你的服务器逻辑是返回JavaScript 代码而不是单纯的 HTML 标记, Ajax.Updater 对象可以
执行那段JavaScript 代码。为了使这个对象对待响应为JavaScript,你只需在最后参数的对象构造
方法中简单加入evalScripts: true 属性。
更完全的解释,请参照 Ajax.Updater 参考 和 Ajax 选项参考 。
Security Checker
快速回复
限100 字节
 
上一个 下一个