Prototype扩充Array，document，String，Function，Number _Web前端

Prototype扩展Array，document，String，Function，Number

Array的扩展

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>扩展Array</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			//定义第一个一维数组
			var a = [ 'Java', 'Java EE' ];
			//定义第二个一维数组
			var b = [ 'wawa', 'anno' ];
			//将两个一维数组组成一个二维数组
			var c = [ a, b ];
			c.each(function(ele, index) {
				document.writeln("第" + index + "个元素是：" + ele + "<br />");
			});
			//以一个二维数组和一个普通值形成三维数组
			var d = [ c, 'china' ]
			//输出三维数组的长度
			document.writeln("d数组的长度是：" + d.length + "<br />");
			//将三维数组"压扁"成一维数组。
			var e = d.flatten();
			//输出一维数组后的长度（看到5）和数组元素
			document.writeln(e.size() + e);
		</script>
	</body>
</html>

?document扩展：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>扩展document</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<script type="text/javascript">
		//为document的loaded事件绑定事件监听器
		document.observe("dom:loaded" , function(event)
		{
			$("show").innerHTML += ("页面装载完成 <br />");
		});
		//为document的a:b事件绑定事件监听器
		document.observe("a:b" , function(event)
		{
			$("show").innerHTML += ("myEvent被触发了 <br />");
			//访问event.memo.book属性
			$("show").innerHTML += ("event.memo.book属性值为：" 
				+ event.memo.book);
		});
		</script>
		<!-- 单击该按钮时触发document上的a:b事件 -->
		<input type="button" value="单击我"
			onclick='document.fire("a:b" , {book:"Ajax"});' />
		<div id="show"></div>
	</body>
</html>

?String扩展：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>扩展document</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
				<script type="text/javascript">
			//用于示范删除XML和HTML标记
			var str1 = '<a>dfd</a>';
			//输出结果为dfd
			alert("'<a>dfd</a>'.stripTags()的结果为：" + str1.stripTags());
			//用于示范删除脚本
			var str2 = '<script>dfd<\/script>';
			//删除脚本后字符串为空字符串
			alert("'<script>dfd<\/script>'.stripScripts()的结果为：" + str2.stripScripts());
			//示范将HTML标记转义
			var str3 = '<a>dfd</a>';
			//输出结果为&lt;a&gt;dfd&lt;/a&gt;
			alert("'<a>dfd</a>'.escapeHTML()的结果为：" + str3.unescapeHTML());
			//示范反转义HTML标记
			var str4 = '&lt;a&gt;dfd&lt;/a&gt;';
			//输出结果为<a>dfd</a>
			alert("'&lt;a&gt;dfd&lt;/a&gt;'.unescapeHTML()的结果为：" + str4.unescapeHTML());
			//示范执行字符串中的脚本
			var str5 = '<script>alert("====");<\/script>';
			//弹出警告对话框
			str5.evalScripts();
			//示范取得字符串中的脚本
			var str6 = '<script>alert("====");<\/script>' + '<script>alert("xxxx");<\/script>';
			//输出一个长度为2的字符串数组。
			alert(str6.extractScripts());
			var str7 = 'abc-xyz-ghi';
			var str8 = str7.camelize();
			alert("'abc-xyz-ghi'.camelize()的值为：" + str8);
			var str9 = str8.underscore().dasherize();
			//再次恢复'abc-xyz-ghi';
			alert(str9);
			var book = 'Java EE';
			alert("'Java EE'.truncate(8 , '...')的值："
					+ book.truncate(10, '...'));
			var str10 = 'java struts hibernate';
			//用逗号（,）替换空白，将输出java,struts,hibernate
			alert(str10.gsub('\\s+', ','));
			//使用自定义替换，将所有单词首字母大写，并在单词后添加逗号（,）
			//将输出Java, Struts, Hibernate
			alert(str10.gsub('\\w+', function(match) {
				return match[0].capitalize() + ",";
			}));
			//将依次输出java,struts,hibernate
			str10.scan("\\w+", function(match) {
				alert(match);
			});
		</script>
	</body>
</html>

?Function扩展：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>扩展Function</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			//定义一个JavaScript对象
			var person = {
				name : 'lbx',
				//虽然info()函数定义在person对象里，它依然是一个独立的函数
				info : function() {
					alert(this.name);
				}
			};
			//看到输出'yeeku'
			person.info();
			//再定义一个runFn函数，该函数专门用于运行指定函数
			function runFn(f) {
				f();
			}
			window.name = 'Java';
			//该函数所在范围是window,所以this.name为'Java讲义'
			runFn(person.info);
			//下面代码先将person.info函数绑定给person。
			//这样无论以何种方式执行该函数，person.info函数的this总是引用person。
			runFn(person.info.bind(person));
			function test(name, age) {
				alert("此人名为：" + name + "\n" + "年龄为：" + age);
			}
			//将test()函数包转成newTest函数，test()函数的第一个参数已经有值
			var newTest = test.curry('lbx');
			//将输出"此人名为：lbx\n 年龄为：31
			newTest(31);
			//定义一个函数，函数targe
			var fn1 = function(target, name) {
				target.name = name;
			};
			//执行fn1.methodize();产生一个新函数
			var fn2 = fn1.methodize();
			//程序将this（代表window）传入fn1。
			fn2("XML");
			//输出"XML"
			alert(name);
		</script>
	</body>
</html>

?Number扩展：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>扩展Number</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			//下面输出4。
			alert((-4).abs());
			//下面输出-2。
			alert((-2.3).ceil());
			//下面输出-2。
			alert((-1.4).floor());
			//下面输出4。
			alert((4.4).round());
			//下面输出2.2。
			alert((1.2).succ());
			//下面将依次输出0、1、2
			(3).times(function(num) {
				alert(num);
			});
			//下面将输出'13'
			alert((19).toColorPart());
			//下面将输出'000022'
			alert((12).toPaddedString(6, 5));
		</script>
	</body>
</html>