Prototype 1.5新特性(翻译笔记)

最新推荐文章于 2024-01-22 16:12:02 发布

qij2256

最新推荐文章于 2024-01-22 16:12:02 发布

阅读量611

点赞数

分类专栏： JavaScript 文章标签： prototype tutorials function encoding parameters iterator

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

原作者:Scott Raymond
翻译笔记:rubyoo

原文:http://www.xml.com/pub/a/2007/01/24/whats-new-in-prototype-15.html
来源:http://www.rubyoo.com/

伴随着世界上最伟大的web开发框架rails 1.2的正式发布，世界上最流行的javascript开发框架
prototype 1.5也发布了。

prototype 1.4从发布到现在已经过去了一年时间，相比1.4，prototype 1.5有不少激动人心的新特性。

对Ajax的支持
prototype 1.5在prototype 1.4的基础上，增加了强大的表现功能，如下：

1.查询参数可以用对象字面量来表达，例如:


1	// Requests /search?q=ajax%20tutorials
2	new Ajax.Request('/search', { parameters:{ q:'ajax tutorials' } });
	view plain \| print \| copy to clipboard \| ?

2.和查询参数类似，发送请求也可以直接通过对象字面量，例如:


1	new Ajax.Request('/search', { requestHeaders:{ X-Custom-Header:'value1' } });
	view plain \| print \| copy to clipboard \| ?

3.发送请求部分可以用Accept，默认值为(text/javascript, text/html, application/xml, text/xml, */*) .例如:


1	new Ajax.Request('/data', { requestHeaders:{ Accept:'text/plain' } });
	view plain \| print \| copy to clipboard \| ?

4.contentType选项用于指定contentType，默认值为application/x-www-form-urlencoded;encoding用于指定编码，默认为UTF-8。例如:


1	var myXML = "<?xml version='1.0' encoding='utf-8'?>/n<rss version='2.0'>...</rss>"
2	new Ajax.Request('/feeds', { postBody:myXML, contentType:'application/rss+xml', encoding:'UTF-8' });
	view plain \| print \| copy to clipboard \| ?

5.如果与rails1.2的Restful通信，可以指定除开GET和POST以外的两个方法:PUT and DELETE.例如:


1	// Creates a POST request to /feeds/1.rss?_method=PUT
2	new Ajax.Request('/feeds/1.rss', { method:'put', postBody:myXML, contentType:'application/rss+xml' });
	view plain \| print \| copy to clipboard \| ?

当然，这需要服务器的支持。如果你用的是rails1.2，那么这可以非常容易。

对字符串的扩展

prototype 1.5对字符串的扩展，让我们对字符串的操作变得非常的方便而友好。

1.strip()移除字符串两头的换行符，空格等空白字符，例如:


1	" foo ".strip(); // => "foo"
	view plain \| print \| copy to clipboard \| ?

2.gsub(pattern, replacement)执行字符串的全局替换，例如:


1	"In all things will I obey".gsub("all", "ALL"); // => "In ALL things will I obey"
2	"In all things will I obey".gsub(/[aeiou]/i, "_"); // => "_n _ll th_ngs w_ll _ _b_y"
3	"In all things will I obey".gsub(/[aeiou]/i, function(x){ return x[0].toUpperCase(); }); // => "In All thIngs wIll I ObEy"
4	'Sam Stephenson'.gsub(/(/w+) (/w+)/, '#{2}, #{1}'); // => "Stephenson, Sam"
	view plain \| print \| copy to clipboard \| ?

3.sub(pattern, replacement[, count])类似于gsub函数，只不过不是全局替换。


1	"In all things will I obey".sub(/[aeiou]/i, "_"); // => "_n all things will I obey"
2	"In all things will I obey".gsub(/[aeiou]/i, "_", 3); // => "_n _ll th_ngs will I obey"
3	'Sam Stephenson'.sub(/(/w+) (/w+)/, '#{2}, #{1}'); // => "Stephenson, Sam"
	view plain \| print \| copy to clipboard \| ?

4.scan(pattern, iterator)按照pattern模式扫描，每个匹配的部分都用iterator处理，例如:


1	// Logs each vowel to the console
2	"Prototype".scan(/[aeiou]/, function(match){ console.log(match); })
	view plain \| print \| copy to clipboard \| ?

5.truncate([length[, truncation]])截取部分字符串，默认长度为30.例如:


1	"Four score and seven years ago our fathers brought".truncate(); // => "Four score and seven years ..."
2	"Four score and seven years ago our fathers brought".truncate(20); // => "Four score and se..."
3	"Four score and seven years ago our fathers brought".truncate(30, ' (read more)'); // => "Four score and sev (read more)"
	view plain \| print \| copy to clipboard \| ?

6.capitalize() 实现首写字母大写。例如:


1	"prototype".capitalize(); // => "Prototype"
	view plain \| print \| copy to clipboard \| ?

7.dasherize()把下划线转化为中划线,例如:


1	"hello_world".dasherize(); // => "hello-world"
2	"Hello_World".dasherize(); // => "Hello-World"
	view plain \| print \| copy to clipboard \| ?

8.underscore()把"::"转化为"/",把骆驼表示法转化为下划线的表达,把中划线转化为下划线，最后全部转化为小写.
例如:


1	"Foo::Bar".underscore(); // => "foo/bar"
2	"borderBottomWidth".underscore(); // => "border_bottom_width"
	view plain \| print \| copy to clipboard \| ?

9.succ() 返回下一个字符。例如:


1	"abcd".succ(); // => "abce"
2	$R('a','d').map(function(char){ return char; }); // => ['a','b','c','d']
	view plain \| print \| copy to clipboard \| ?

prototype 1.5增加了一个名叫 Template(模板)的类，使用方法如下:


1	var row = new Template('<tr><td>#{name}</td><td>#{age}</td></tr>');
	view plain \| print \| copy to clipboard \| ?

执行用evaluate方法，例如:


1	var person = { name: 'Sam', age: 21 };
2	row.evaluate(person); // => '<tr><td>Sam</td><td>21</td></tr>'
3	row.evaluate({})); // => '<tr><td></td><td></td></tr>'
	view plain \| print \| copy to clipboard \| ?

默认的模板语法是Ruby样式的，例如#{age},如果你要使用另外的模板语法样式，可以重新指定，例如:
// 使用PHP的语法


1	Template.PhpPattern = /(^\|.\|/r\|/n)(</?=/s/$(.?)/s*/?>)/;
2	var row = new Template('<tr><td><?= $name ?></td><td><?= $age ?></td></tr>', Template.PhpPattern);
3	row.evaluate({ name: 'Sam', age: 21 }); // "<tr><td>Sam</td><td>21</td></tr>"
	view plain \| print \| copy to clipboard \| ?

模板有助与往DOM里插入新内容，例如:


1	// <table id="people" border="1"></table>
2	var row = new Template('<tr><td>#{name}</td><td>#{age}</td></tr>');
3	var people = [{name: 'Sam', age: 21}, {name: 'Marcel', age: 27}];
4	people.each(function(person){
5	new Insertion.Bottom('people', row.evaluate(person));
6	});
	view plain \| print \| copy to clipboard \| ?

数组与枚举扩展

1.size()返回数组元素的个数，例如:


1	[1,2,3].size(); //=>3
	view plain \| print \| copy to clipboard \| ?

2.clone()返回一个数组的拷贝。例如:


1	var a = [1, 2, 3];
2	var b = a;
3	b.reverse();
4	a; // => [3, 2, 1]
5	var a = [1, 2, 3];
6	var b = a.clone();
7	b.reverse();
8	a; // => [1, 2, 3]
	view plain \| print \| copy to clipboard \| ?