prototype.js開発ノートzz

118338 ワード
JAVAベース
prototype.js開発ノート
カバーバージョン1.3.1
1. Prottypeは何ですか
まだ使ったことがないかもしれませんが、prototype.jsはSam Stephhensonによって書かれたJavaScriptです.このアイデアの奇妙な作成は、標準的な互換性のあるセグメントのコードは、肥満のクライアントを作成するために、高インタラクティブなWEBアプリケーションの責任を負うことになります.簡単にWeb 2.0の特性を追加します.
最近このパッケージを体験したら、ドキュメントはその強みの一つではないことが分かります.私の前の開発者のように、プロトタイプ.jsのソースコードにいきなり刺さり、その中のすべての部分をテストするしかないです.彼を勉強する時はメモを書いて他の人にシェアするのがいいと思います.
私も一緒にこのカバンの対象、種類、方法と拡張の非公式参考を提供しました.
2. 一般的な方法
このパッケージには多くの事前定義の対象と汎用性の方法が含まれています.これらの方法を編纂する明白な目的は、あなたの大量の反復符号化と慣用法を減らすことです.
2.1. メソッドを使う
ドル()の方法は、DOMで頻繁すぎるドキュメンタ.getElemenntById()の方法を使用する便利な簡略化であり、このDOM法のように、パラメータが流入したidの要素をこの方法で返す.
DOMの中の方法より、これのほうが優れています.複数のIDをパラメータとして導入して、()を返します.すべての要求要素を持つArayオブジェクトを返します.これらを以下の例で説明します.


 Test Page 


<br>    function test1()<br>    {<br>        var d = $('myDiv');<br>        alert(d.innerHTML);<br>    }<br><br>    function test2()<br>    {<br>        var divs = $('myDiv','myOtherDiv');<br>        for(i=0; i<divs.length; i++)<br>        {<br>            alert(divs[i].innerHTML);<br>        }<br>    }<br>



    

        
This is a paragraph

    

    

        
This is another paragraph



この方法のもう一つの利点は、ID文字列または要素オブジェクト自体に入ることができ、どのような形式のパラメータも入る方法を作成するときに、非常に有用になることです.
2.2. $F()の使い方
$F()の方法はとても人気のある簡単な書き方です.テキストボックスやドロップダウンボックスなどの入力フォームコントロールの値を返します.この方法は元素のidまたは元素自身に伝わることができる.
<br>    function test3()<br>    {<br>        alert(  <span class="bold"><strong>$F('userName')</strong></span>  );<br>    }<br>

2.3. Try.these()を使う方法
Try.these()方法は、成功して正常になるまで、異なる方法を呼び出したい場合には、このような要求が非常に容易になり、一連の方法をパラメータとして実行し、これらの方法を一つの成功に実行するまで順次実行し、その方法の戻り値を返します.
以下の例では、xml Node.textはいくつかのブラウザで使いやすいですが、xml Node.textContectは他のブラウザで正常に動作します.Try.these()方法を使って正常に動作するその方法の戻り値を得ることができます.
<br>function getXmlNodeValue(xmlNode){<br>    return Try.these(<br>        function() {return xmlNode.text;},<br>        function() {return xmlNode.textContent;)<br>        );<br>}<br>
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応答を返します.


    
        
            
                1234
                1998-01
                $8,115.36
            
            
                1234
                1998-02
                $11,147.51
Ajax.Requestオブジェクトでサーバーと通信し、このXMLを得るのは非常に簡単です.次の例はどのようにして作られたかを示している.
<br>    function searchSales()<br>    {<br>        var empID = $F('lstEmployees');<br>        var y = $F('lstYears');<br>        var url = 'http://yoursever/app/get_sales';<br>        var pars = 'empID=' + empID + '&year=' + y;<span class="bold"><strong><br>       var myAjax = new Ajax.Request(<br>                    url,<br>                    {method: 'get', parameters: pars, onComplete: showResponse}<br>                    );</strong></span><br><br>    }<br><br>    function showResponse(originalRequest)<br>    {<br>        //put returned XML in the textarea<br>        $('result').value = originalRequest.responseText;<br>    }<br>




typescript入門から現在までのまとめ1