プロトタイプ JavaScript フレームワーク

Prototype JavaScript Frameworkは、 Ruby on RailsのAjaxサポートの一環として、2005年2月にSam Stephensonによって作成されたJavaScript フレームワークです。これは、通常 という名前が付けられたJavaScriptコードの単一ファイルとして実装されています。Prototypeはスタンドアロンで配布されていますが、Ruby on Rails、script.aculo.us、Ricoなどの大規模プロジェクトの一部としても配布されています。2021年3月現在、w3techsによると、PrototypeはすべてのWebサイトの0.6%で使用されています。^[1]prototype.js^{[アップデート]}

Prototype は、JavaScript アプリケーションを開発するためのさまざまな機能を提供します。その機能は、プログラミングのショートカットからXMLHttpRequestを処理するための主要な機能まで多岐にわたります。

Prototypeは、クラスとクラスベースのオブジェクトをサポートするライブラリ関数も提供します。 ^[2] JavaScriptでは、オブジェクトの作成はプロトタイプベースで行われます。オブジェクト作成関数はprototypeプロパティを持つことができ、そのプロパティに割り当てられたオブジェクトは、その関数で作成されたオブジェクトのプロトタイプとして使用されます。Prototypeフレームワークをこの言語機能と混同しないでください。

ドル関数$() は、 getElementById関数の省略形として使用できます。HTML ページのドキュメントオブジェクト モデル(DOM)内の要素を参照する場合、要素を識別する通常の関数は次のようになります。

document.getElementById ( "要素のID " ). style.color = " #ffffff" ;  

$() 関数により、コードは次のように短縮されます。

$ ( "要素のid" ). setStyle ({ color : '#ffffff' }); 

$() 関数は要素をパラメータとして受け取ることもでき、前の例と同様にプロトタイプ拡張オブジェクトを返します。

var domElement = document . getElementById ( "id_of_element" ); // 通常のオブジェクト参照が返されますvar prototypeEnhancedDomElement = $ ( domElement ); // プロトタイプ拡張オブジェクト参照     
               

注: アンダースコア ( _) と同様に、文字は JavaScript 識別子の有効な「単語文字」であり、言語ではその他の意味を持ちません。正規表現$のサポートと同時に言語に追加されたため、や などのPerlのようなマッチング変数をエミュレートできるようになりました。$`$'

関数に基づいて$()、$F()関数は要求されたフォーム要素の値を返します。 'text' 入力の場合、関数は要素に含まれるデータを返します。 'select' 入力要素の場合、関数は現在選択されている値を返します。

$F ( "入力要素のID" )

dollar dollar 関数は、 Prototype のCSSセレクター エンジンです。CSS スタイルシートのセレクターと同じルールに従って、一致するすべての要素を返します。たとえば、<a>クラスが "pulsate" のすべての要素を取得する場合は、次のようにします。

$$ ( "a.pulsate" )

これは要素のコレクションを返します。コア Prototype ライブラリの script.aculo.us 拡張機能を使用している場合は、次のようにして「パルス」(点滅) 効果を適用できます。

$$ ( "a.pulsate" )。それぞれ(エフェクト.パルス);

クロスブラウザ機能を実行するために必要なコードの量を減らすためにXMLHttpRequest、Prototype はAjaxさまざまなブラウザを抽象化する オブジェクトを提供します。このオブジェクトには、Ajax.Request()とという2 つの主なメソッドがあります。オブジェクトAjax.Updater()には 2 つの形式がありますAjax。はAjax.RequestAJAX 呼び出しから生の XML 出力を返しますが、はAjax.Updater指定された DOM オブジェクト内に戻り値を挿入します。Ajax.Request以下は、2 つの HTML フォーム入力要素の現在の値を検索し、それらの要素名と値のペアを使用してサーバーに HTTP POST 要求を発行し、サーバーから HTTP 応答を受信したときにカスタム関数 (showResponse以下で呼び出される) を実行します。

新しいAjax .Request ( "http://localhost/server_script" 、{パラメータ: { value1 : $F ( "form_element_id_1" ) 、value2 : $F ( "form_element_id_2" ) }、onSuccess : showResponse 、onFailure : showError });  
     
         
         
    
     
     

Prototype は、より伝統的なオブジェクト指向プログラミングのサポートも追加します。Class.create()メソッドは、新しいクラスを作成するために使用されます。次に、クラスに が割り当てられprototype、これがクラスのインスタンスの青写真として機能します。

var FirstClass = Class.create ( { // initializeメソッドはコンストラクターとして機能します。initialize: function ( ) { this.data = " Hello World " ; } });    
    
       
          
    

別のクラスを拡張する:

Ajax.Request = Class.create ( Ajax.Base , { //初期化メソッドをオーバーライドします。initialize : function ( url , options ) { this.transport = Ajax.getTransport ( ) ; this.setOptions ( options ) ; this.request ( url ) ; } , // ...その他のメソッドを追加します... }) ;    
    
       
          
        
        
    
    

フレームワーク関数は、Object.extend(dest, src)2 つのオブジェクトをパラメータとして受け取り、2 番目のオブジェクトのプロパティを最初のオブジェクトにコピーして継承をシミュレートします。結合されたオブジェクトも関数の結果として返されます。上記の例のように、最初のパラメータは通常、基本オブジェクトを作成し、2 番目のパラメータは追加のプロパティを定義するためだけに使用される匿名オブジェクトです。サブクラスの宣言全体は、関数呼び出しの括弧内で行われます。

jQueryのような他のJavaScriptライブラリとは異なり、PrototypeはDOMを拡張します。ライブラリの次のメジャーバージョンでこれを変更する予定です。^[3]

2010年4月、ブロガーのJuriy 'kangax' Zaytsev（Prototype Core）は、W3C DOMで定義されたオブジェクトに新しいメソッドやプロパティをモンキーパッチすることで発生する可能性のある問題について詳細に説明しました。 ^[3]これらのアイデアは、2010年3月にYahoo!開発者Nicholas C. Zakasによって発表された考えを反映しています。^[4]これらは次のように要約されています^。[5]

• クロスブラウザの問題: ホスト オブジェクトがルールの対象ではない、IE DOM の動作が非準拠など。
• 名前が衝突する可能性
• パフォーマンスのオーバーヘッド

2008 年までに、古いバージョンの Prototype と新しいバージョンの現在のブラウザで DOM 拡張メソッドを使用することに関する特定の問題がすでに文書化されていました。[ ^{6] 、}などの既存の「ホスト」DOM オブジェクトに新しいメソッドとプロパティを追加するのではなく、これらの問題の解決策は、これらのホスト オブジェクトのラッパー オブジェクトを提供し、これらに新しいメソッドを実装することです。は、その名前のライブラリ内のそのようなラッパー オブジェクトです。^[3]Elementelement.hide()jQuery

• Ajax (プログラミング)
• JavaScriptフレームワークの比較
• Mootools JavaScript フレームワーク
• jQuery
• JavaScriptフレームワーク
• JavaScript ライブラリ

• 公式サイト