【prototype】メモ2
15940 ワード
1.$R()メソッドは、new ObjectRange(lowerBound,upperBound,excludeBounds)の簡単で迅速な使用方法です.
ObjectRangeクラスのドキュメントには完全な解釈があります.同時に,each法による遍歴の用法を示す簡単な例を見てみよう.その方法のより多くの解釈はEnumerable対像ドキュメントにある.
2. Try.these()メソッドは、その中の1つが正常に正常になるまで異なるメソッドを呼び出したい場合に実現を容易にし、一連のメソッドをパラメータとし、これらのメソッドを順番に1つずつ実行し、そのうちの1つが正常に実行されるまで、正常に実行されたメソッドの戻り値に戻す.
次の例ではxmlNode.textはいくつかのブラウザで使いやすいですが、xmlNode.textContentは他のブラウザで正常に動作しています.Tryを使うthese()メソッド正常に動作するメソッドの戻り値を得ることができます
3.AJAX応用
4.最上位要素
5.配列
6. Element
<転入:http://www.cnblogs.com/me-sa/archive/2007/04/24/724660.html>
ObjectRangeクラスのドキュメントには完全な解釈があります.同時に,each法による遍歴の用法を示す簡単な例を見てみよう.その方法のより多くの解釈はEnumerable対像ドキュメントにある.
<html>
<head>
<title>$R</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script>
// 1，2，3，4
function test_R1(){
var range = $R(1, 5, true);
range.each(function(value, index){
alert(value);
});
}
// 1，2，3，4，5
function test_R2(){
var range = $R(1, 5, false);
range.each(function(value, index){
alert(value);
});
}
</script>
</head>
<body>
<form>
<input type="button" value="click (exclusive = true)"
onclick="test_R1()" />
<input type="button" value="click (exclusive = false)"
onclick="test_R2()" />
</form>
</body>
</html>
2. Try.these()メソッドは、その中の1つが正常に正常になるまで異なるメソッドを呼び出したい場合に実現を容易にし、一連のメソッドをパラメータとし、これらのメソッドを順番に1つずつ実行し、そのうちの1つが正常に実行されるまで、正常に実行されたメソッドの戻り値に戻す.
次の例ではxmlNode.textはいくつかのブラウザで使いやすいですが、xmlNode.textContentは他のブラウザで正常に動作しています.Tryを使うthese()メソッド正常に動作するメソッドの戻り値を得ることができます
<script>
function getXmlNodeValue(xmlNode){
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;)
);
}
</script>
3.AJAX応用
<html>
<head>
<title>Ajax</title>
<script type="text/javascript" language="javascript"
src="prototype.js" ></script>
<script type="text/javascript" language="javascript">
function test() {
var myAjax = new Ajax.Request(
'http://www.iteye.com',
{
method: 'get',
onComplete: showResponse
}
);
}
function showResponse(response) {
$('divResult').innerHTML = response.responseText;
}
var handle = {
onCreate: function() {
Element.show('loading');
},
onComplete: function() {
if (Ajax.activeRequestCount == 0) {
Element.hide('loading');
}
}
};
Ajax.Responders.register(handle);// handle Ajax.Responders，Ajax.Responders Ajax
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="divResult" ></div>
<div id='loading' style="display:none">
<img src="loading2.gif">Loading
</div>
</body>
</html>4.最上位要素
<html>
<head>
<title> </title>
<script src="prototype.js"></script>
<script>
var Person=Class.create();
Person.prototype={
initialize:function(){},
name:'',
birthday:'',
age:'',
Show:function(){alert("This is "+this.name);}
};
function TestPerson()
{
var p=new Person();
p.name="Tom";
p.age=4;
p.birthday="1997-7-1";
p.Show();
};
var User=Class.create();
User.prototype={
initialize:function(){},
userid:'',
Report:function()
{
alert("UserID:"+this.userid+" Name:"+this.name+" Age:"+this.age+" Birthday:"+this.birthday);
}
};
Object.extend(User.prototype,Person.prototype);
function TestUser()
{
var user=new User();
user.name="Chou Fat";
user.age=4;
user.userid=2396
user.birthday="1997-7-1";
user.Show();
user.Report();
}
function ShowPrototypeInfo()
{alert(Prototype.Version+" "+Prototype.ScriptFragment);
}
function TestInspect()
{var s="wanfangsoftcenter";
alert(Object.inspect(s));
}
//-------------------------------------------------------
function testFunctionBind()
{
var person=new Person();
person.name="Jerry";
person.age=4;
person.birthday="1997-7-1";
var user=new User();
user.name="Tom";
user.age=5;
user.userid=2396
user.birthday="1999-12-20";
var handler=user.Report.bind(person);
handler();
}
var Listener=new Class.create();
Listener.prototype={
initialize:function(btn,message)
{
$(btn).onclick=this.showMessage.bindAsEventListener(message);
},
showMessage:function(message){
alert(message);
}
};
var listener=new Listener("testEventListener"," ！");
</script>
<body>
<input type=button value="ShowPrototypeInfo" onclick='return ShowPrototypeInfo();' /> Prototype <br><hr>
<input type=button value="TestPerson" onclick='return TestPerson();' /> Person p <br>
<input type=button value="TestUser" onclick='return TestUser();' />User Person ， User <br>
<input type=button value="TestInspect" onclick='return TestInspect();' /> Object Inspect <br>
<input type=button value="testFunctionBind" onclick='return testFunctionBind();' /> Object FunctionBind <br>
<input type=button value="testEventListener" id="testEventListener" />testEventListener<br>
<script>
var Listener=new Class.create();
Listener.prototype={
initialize:function(btn,message)
{
this.message=message;
$(btn).onclick=this.showMessage.bindAsEventListener(this);
},
showMessage:function(){
alert(this.message);
}
};
var listener=new Listener("testEventListener"," ！");
</script>
<hr>
<script>
function TimeExe()
{
var timerExe=new PeriodicalExecuter(showTime,1);
}
function showTime()
{
var time =new Date();
var d = $('myDiv');
d.innerHTML=time;
}
</script>
<div id="myDiv">
<p>This is a paragraph</p>
<input type="button" value= onclick="TimeExe();"><br></div>
<hr>
<script>
function TestNumber()
{
var n=50;
var b=3;
alert(n.toColorPart());
alert(n.succ());
alert(b.toPaddedString());
//b.times(alert());
}
</script>
<input type="button" value='Number ' onclick="return TestNumber();"/><br>
</body>
</html>5.配列
<script src="prototype.js"></script>
<script>
/**//*var arr = [1,2,3,4,8,5,4,3];
// 1,2,3,4,5,4,3
arr.each(
function (item, index) {
if (item < 6) {
alert(item);
} else {
throw $continue;
}
}
);
// 1,2,3,4
arr.each(
function (item, index) {
if (item < 6) {
alert(item);
} else {
throw $break;
}
}
);*/
/**//*
var arr = [1,2,3,4,5];
// arr = [1,2,3,4,5]
arr.reverse(false);
alert(arr.inspect());
// arr = [5,4,3,2,1]
arr.reverse();
alert(arr.inspect());
var arr = [1,2,3,4,5];
arr.reverse();
// 2 arr ：1
var index = arr.indexOf(2);
alert(index)
var arr = [1,2,3,4,5];
// 2 4， [1,3,5]
var newArr = arr.without(2,4);
alert(newArr.inspect());
var arr = [1,2,3,4,5];
arr.clear();
alert(arr[2]);
var arr = [1,2,3,4,5];
var arr2 = [2,4,6,8,10];
//[ [1,2],[2,4],[3,6],[4,8],[5,10]]
var newArr = arr.zip(arr2);
// [[1,4],[4,16],[9,36],[16,64],[25,100]]
var newArr2 = arr.zip(
arr2,
function (item) {
var newItem = item.collect(
function (item, index) {
return item * item;
}
);
return newItem;
}
);
alert(newArr.inspect());
alert(newArr2.inspect());
var arr = [5,2,3,1,4];
// arr
var arr = arr.sortBy(
function (item, index) {
return item;
}
);
arr.each(
function (item, index) {
alert(item);
}
);
var arr = [
{root: 1, square: 1},
{root: 2, square: 4},
{root: 3, square: 9},
{root: 4, square: 16},
{root: 5, square: 25}
];
var newArr = arr.pluck("square");
alert(newArr[4]);
var arr = [1,2,3,4,5];
var ptArr = arr.partition(
function (item, index) {
return item%2 == 1;
}
);
var oddArr = ptArr[0];
var evenArr = ptArr[1];
oddArr.each(
function (item) {
alert(item);
}
);
evenArr.each(
function (item) {
alert(item);
}
);
var arr = [1,2,3,4,5];
//
var max = -arr.min(
function (item, index) {
return -item;
}
);
//
var min = arr.min();
alert(max);
alert(min);
var arr = [1,2,3,4,5];
//
var max = arr.max();
//
var min = -arr.max(
function (item, index) {
return -item;
}
);
alert(max);
alert(min);
//
Number.prototype.square = function () {
return this * this;
}
var arr = [1,2,3,4,5];
var newArr = arr.invoke("square");
alert(newArr[4]);
// arr
var factorial = arr.inject(
1,
function (accumulator, item, index) {
return accumulator * item;
}
);
alert(factorial)
// ”2“
var inc = arr.include(2);
alert(inc);
var arr = ["12345", "abc2", "cde", "fgh", "132ba"];
var newArray = arr.grep(
/2/,
function (item, index) {
return item + " contains 2";
}
)
newArray.each(
function (item) {
alert(item);
}
);
var arr = [1,2,3,4,5];
//
var oddArr = arr.findAll(
function (item, index) {
return item%2 == 1;
}
);
alert(oddArr[2]);
// 3
var ele = arr.find(
function (item, index) {
return (item > 3);
}
);
alert(ele);
var newArr = arr.collect(
function (item, index) {
return item * (index + 1);
}
);
var hasNegative = arr.any(
function (item, index) {
return (item < 0);
}
);
// 0
var allPositive = arr.all(
function(item, index) {
return (item > 0);
}
)
alert(allPositive);
arr.each(
function (item, index) {
alert("arr[" + index + "] = " + item);
}
);*/
</script>6. Element
<html><head><script src="prototype.js"></script>
<script>
function testRemove()
{
Element.remove("mydiv3");
}
function testReplace()
{
Element.replace("myDiv2",'<img src="200607061129268fc45.jpg">');
}
</script>
</head>
<body>
<div id="myDiv"> 2002 </div>
<div id="myDiv1"> 2003 </div>
<div id="myDiv2"> 2004 </div>
<div id="myDiv3"> </div>
<div id="myDiv4"> 2006 </div>
<div id="myDiv5"> 2007 </div>
<div id="myDiv6"> 2008 </div>
<hr>
<input type="button" value='removeTest' onclick="return testRemove();"/><br>
<input type="button" value='testReplace' onclick="return testReplace();"/><br>
</body>
</html>
<転入:http://www.cnblogs.com/me-sa/archive/2007/04/24/724660.html>