プロトタイプを使用した痛みのないJavaScript

Railsを使用している場合は、プロトタイプをダウンロードする必要はありません。分布に含まれています。これをあなたのページの

に入れて、それをあなたのビューに含めることができます：

さあ、それに入りましょう！

プロトタイプのリトルヘルパー

プロトタイプを使用することの本当に素晴らしいことの1つは、非常に一般的なスクリプトタスクに提供する致命的なシンプルなヘルパー関数です。 $関数はすでにある程度の注目を集めています。 1つ以上の要素IDを指定すると、それらへの参照を返します：

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

それはスープドキュメントのようなものです。GetElementByIDそして、それを使用すると、より便利なコーディングがどれほど便利に見えるかは驚くべきことです。

もう1つの信じられないほど便利な関数はdocument.getElementsByClassNameです。

また、この記事が書かれているため、プロトタイプバージョン1.5.0_RC0は強力な$$関数を獲得しました。

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

執筆時点では、最新バージョンのプロトタイプからSubversionをダウンロードしない限り、この機能は利用できません。

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

JavaScriptを吸うおっと、別のJavaScriptライブラリのタグラインを盗みました。 JavaScript Libraryの開発者は、JavaScriptを別の言語のようにしようとしないように思わないようです。 Mochikitの男たちは、JavaScriptをPythonにしたいと考えています。無数のプログラマーはJavaScriptをJavaのようにしようとし、プロトタイプはRubyのようにしようとします。プロトタイプにより、JavaScriptのコアへの拡張機能により、（それらを使用することを選択した場合）JavaScriptのコーディングへのアプローチに劇的な効果があります。あなたの背景とあなたの脳の仕組みに応じて、これはあなたに役立つかもしれないし、そうでないかもしれません。

$F takes an ID and returns the value of any form field, for instance, a select box like this:

<select name="country"> <br>
  <option selected value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

oo ruby​​（ish）way：class.create and object.extend

class.createメソッドを使用すると、クラスをよりルビーのような方法で定義できますが、これは基本的に、コンストラクター機能を使用してオブジェクトを作成する従来のJavaScriptアプローチを取得するのではなく、コンストラクターとして定義する初期化メソッドを基本的に呼び出すためです。

しかし、はるかに強力なのは、愚かにシンプルだが効果的なObject.extendメソッドです。 1つのオブジェクトのプロパティとメソッドを別のオブジェクトにコピーするだけですが、その用途は多くです。これが簡単なテイスターです：

これは、あるオブジェクトと別のオブジェクトからメソッドを「混合」するために最も一般的に使用されています。たとえば、特定のDOM要素をソート可能にする一連の関数を作成できます。

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

次に、上記の並べ替え可能にしたい場合は、これらの方法をドンテーブルオブジェクトに組み合わせることができます。

テーブル上のこれらのメソッドを呼び出すことができます：

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

関数バインディング

プロトタイプは、関数オブジェクトに2つの非常に便利な方法：バインドとbindaseventListenerを追加します。これらは主に特定のオブジェクトに関数をバインドするために使用され、このキーワードがそのオブジェクトを指すようにします。これは、イベントハンドラー機能を設定する場合に非常に便利です。このようなことを試してみてください

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

従来、イベントがハンドラー関数をトリガーすると、これはmyobjectではなくmydiv要素を指すので、this.messageが未定義であるため、エラーが発生します。この問題は、次のようなバインドメソッドを使用して解決できます。

このキーワードはMyobjectにバインドされているため、

これですべて正常に機能します。さらに、BindaseventListenerは同じことを行いますが、イベントオブジェクトをクロスブラウザー互換性のある方法で機能に渡します。そのため、IEでwindow.eventを心配する必要はありません。これを試してみてください：

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

ここで、イベントハンドラー関数はイベントオブジェクトにアクセスできます。これら2つの方法の詳細は、作成者のサイトで入手できます。

$F takes an ID and returns the value of any form field, for instance, a select box like this:

新しい文字列と数字の方法

プロトタイプは、組み込みの文字列オブジェクトに膨大な数の有用な方法を追加しました。最高のいくつかを簡単に見てみましょう。

<select name="country"> <br>
  <option selected value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

プロトタイプも数に優れた方法を追加します。ループのためにあなたに別れを告げてください！

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

ここで、Timesメソッドは、指定された回数と呼ばれる関数を取り、現在の反復数に引数として渡されます。列挙性を使用する場合、このイテレーター関数の使用は一般的です。次に説明します。

var Sortable = { <br>
  sortBy : function(func) { <br>
    ... <br>
  }, <br>
  sortByReversed : function(func) { <br>
    ... <br>
  }, <br>
  reset : function() { <br>
    ... <br>
  } <br>
};

Ruby Wayの反復：列挙可能およびハッシュ

プロトタイプの隠された宝石の1つは、列挙可能なミックスインとハッシュオブジェクトで、Rubyからまっすぐに密猟されています。 Rubyに精通していない場合は、心配しないでください。ここですべて説明します。 列挙可能から始めます。要するに、object.extendを使用してオブジェクトに列挙可能を追加すると、問題のオブジェクトに、プロパティを操作するための非常に有用な機能の多くを与えます。列挙可能は配列のプロトタイプに追加されているため、すべての配列にはこれらの新しいメソッドがあります。新しい「列挙された」アレイでできることの例をいくつか紹介します。

var myTable = new DOMTable("table-id"); <br>
Object.extend(myTable, Sortable);

// sort the table using the given function <br>
myTable.sortBy(function (itemA, itemB) { ... });

var myObject = new Object();  <br>
myObject.message = "Hello!";  <br>
myObject.eventHandler = function() {  <br>
  alert(this.message);  <br>
}  <br>
  <br>
$("mydiv").onmouseover = myObject.eventHandler;

$("mydiv").onmouseover = myObject.eventHandler.bind(myObject);

ハッシュを作成するには、オブジェクトの魔法関数$ hを呼び出します。これにより、オブジェクトのすべてのプロパティが、列挙可能な混合でキー価値のペアのセットに変わります。

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

最初は、あなたがルビーストではない場合、列挙して、ハッシュが少し面倒に思えるかもしれませんが、それらを使用し始めると、RSIをループ用に書くことを気にしたことがあるのだろうかと思います！それらの1つ以上を一緒に使用すると、これらの新しい方法の大規模な力を実現できます。あなたはできる "> Encyte Mediaで列挙可能とハッシュについてもっと詳細に読んでください。

イベントオブジェクトは、多くの人にJavaScriptの聖杯であるものを提供するのに役立ちます。

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

かなり快適な方法で、プロトタイプは、ページがアンロードされたときにすべてのオブザーバーを自動的に削除することにより、IEでこれらの厄介なメモリリークを避けようとします。

私の意見では、これは現時点ではかなり未開発のイベント処理ソリューションであるため、当面の間、ディーンエドワーズのAddEventのように少し豊かなものを使用することを検討する価値があるかもしれません。

フォームの取り扱い

フォームおよびフィールドオブジェクトは、フォームと入力フィールドを操作するための多くのシンプルだが便利な機能、およびプロトタイプのAJAX実装をサポートするコードを提供します。

フォームオブジェクト

一般に、フォームオブジェクトのメソッドは、IDまたは要素へのオブジェクトの参照を取得します：

フィールドオブジェクト

$F takes an ID and returns the value of any form field, for instance, a select box like this:

フィールドオブジェクトは個々のフォーム要素を扱い、そのメソッドは通常、フォームオブジェクトと同様の方法で要素をIDまたはオブジェクトの参照を取得します。

form serialization プロトタイプの用語では、フォームのシリアル化とは、フォームの要素をすべて読み取り、フォームを提出した場合に送信されるURLエンコード文字列（ほぼ）に変えることを意味します。たとえば、このフォームを考慮してください：

<select name="country"> <br>
  <option selected value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

form.serializeは、さまざまなフォーム要素がアクセスされる方法の違いを巧みに滑らかにし、入力、選択、チェックボックス、ラジオボタンが適切に処理されるようにします。 form.serializeはいくつかのタスクに役立ちますが、すぐに表示されるように、Ajaxを使用しているときにそれ自体になります。

これらのオブザーバーは、データが変更されたかどうかを確認し、もしあればMyCallBackFunctionを呼び出します。

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

2番目のタイプのオブザーバーはイベントベースであり、要素に対して変更またはクリックイベントが作成された場合にのみチェックを実行します。次のように使用できます：

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

フォームのすべてのフィールドがイベントハンドラーをサポートしている場合、これはフォームを観察するためのはるかに効率的な方法です。ただし、これらのイベントをサポートしていない要素の変更を監視したい場合は、定期的なオブザーバーを使用してください。

dom

の作業

プロトタイプには、さまざまな形式のDOM操作を可能にし、DOMをsiremash微に微妙に激怒させる多くのブラウザの違いを滑らかにする4つのオブジェクト（要素、挿入、オブザーバー、および位置）があります。コンピューターをウィンドウから捨てる代わりに、このセクションを見てください。

要素オブジェクト

要素オブジェクトは、おそらくこの時点までに期待するように動作します。要素のメソッドのほとんどは、操作する要素のIDまたはオブジェクトの参照を使用するだけです。これは、最も便利な方法のいくつかを覗き見します：

Sergio Pereiraのサイトの完全なリストを参照してください

挿入オブジェクト

私はあなたが考えていることを知っています：これは少し奇妙に聞こえますよね？さて、挿入オブジェクトは、要素とその周辺にHTMLのチャンクを追加します。挿入には4種類の挿入があります：前、後、上部と下。 ID「MyElement」の要素の前にHTMLを追加する方法は次のとおりです。

この図は、各タイプの挿入が、指定された要素に関連してHTMLコンテンツをドロップする場所を示しています。

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

ポジションオブジェクト

位置オブジェクトは、画面上の特定の場所について伝えることができる多くのメソッドを提供し、クロスブラウザー互換の方法で、他の要素に関連する場所に関する情報を提供します。これにより、アニメーション、エフェクト、ドラッグアンドドロップコードの作成から多くの気分度が除外されるはずです。詳細については、位置参照をご覧ください。

でWeb 2.0を取得します

「最後に！」あなたは、「彼は私たちが本当に知りたいことに取り組んでいる」と思っています。はい、プロトタイプのAjaxヘルパーに入るためにそれを最後まで任せました。なぜなら、それらは私たちが経験してきた他のすべてのものの上に構築されており、Ajaxについて話すときにプロトタイプの形のシリアル化、オブザーバー、挿入を理解するのに役立ちます。

ajaxは、過去数年間非常に深い穴に埋もれていた場合に、ページをリロードせずにサーバーと通信するために、ブラウザのXMLHTTPRequestオブジェクト（または同等）を使用することを指します。プロトタイプは詳細のほとんどにわたってスムーズになりますが、XmlhttpRequestの背景を少し取得するのは良いことです。

だから、あなたはすべてWeb 2.0のアクションを取得するためにすべてを入れて、本当にシンプルなAJAXリクエストを調べましょう：

ajax.requestコンストラクターは、URLとオプションオブジェクトを取得します。この場合、パラメーター（名前）をhello.phpに送信し、その応答を警告しています（または、動作しない場合はエラーを警告します）。利用可能なオプションに精通するために時間をかける価値があります。これがオプションの概要と、そのデフォルトとともに次のとおりです。

プロトタイプは、すべてのAJAXリクエストにカスタムHTTPヘッダーを追加して、サーバーアプリケーションが通常の呼び出しではなくAJAXコールであることを検出できるようにします。ヘッダーは：

です

これがAJAXコールの検出に使用されるPHP関数の例です。

このアプローチを使用して、ユーザーが古いブラウザを使用している場合、またはJavaScriptを無効にしている場合でも機能するAjaxアプリケーションを記述できますが、それは他の記事全体です...

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

form.serializeを使用してデータをajax.request

に渡す 上で見たように、パラメーターオプションは、URLエンコードされた変数の文字列を渡すために使用されます。送信する必要があるデータがフォームで設定されている場合、ほとんどのAJAXアプリケーションの場合と同様に、Form.Serializeを使用してすべてのフォームフィールドからURLエンコード文字列を生成し、それをパラメーターオプションのように渡すことができます。

ajaxイベントハンドラーを書く

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

上記の例では、OnSuccessとOnFailureはAjaxイベントハンドラーの2つの例です。 ajax.requestコールのオプションオブジェクトに与えられたイベントハンドラー関数には、1つの引数が与えられます。これは、そのajaxコールのxmlhttprequestオブジェクトです。私は通常、この引数の応答またはそれを呼び出します。この引数を使用して、サーバーからの応答を次のように取得できます。

ただし、それはxmlhttprequestオブジェクトにすぎないため、これらのプロパティはすべて利用可能です。 JSONデータをX-JSON応答ヘッダーに追加することにより、サーバーからJSONとしてデータを送信できます。これは、プロトタイプによって自動的に評価され、2番目の引数として送信されます。

ajax.updaterとajax.periodicalupdater

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

多くのAJAX操作には、サーバーから返されたHTMLを使用して、ページ上のHTMLを更新するだけです。 ajax.updaterオブジェクトは、ajax.requestをラップし、この一般的なユースケースを簡素化します。簡単な例を次に示します：

上記のスニペットは、IDが「myDIV」である要素のコンテンツをサーバーから返されたコンテンツに置き換えるだけです。 ajax.periodicalUpdaterは似ていますが、設定した間隔でajaxの呼び出しを繰り返し行います。

減衰オプションを使用すると、多くの同一の応答を返している場合、サーバーに少し休憩を与えることができます。基本的に、定期的なアップデーターがリクエストを行うたびに、結果を前回返したものと比較します。値が同じ場合、間隔に減衰値を掛けます。したがって、上記の例では、2秒後に次のリクエストを行い、その後4秒後に、サーバーから異なる結果を受け取るまで次の要求を行います。その時点で、間隔は1秒にリセットされます。 レスポンダーを備えた

ajax

AJAXレスポンダーでは、ページで発生するすべてのAJAXリクエストに対してトリガーされるグローバルイベントハンドラーを登録することができます。大量のAJAXアクティビティを備えたアプリケーションを管理するのに非常に役立ちます。たとえば、AJAXリクエストが発生している場合はいつでも標準のロードアニメーションを表示するために使用できます。

プロトタイプを使用したAjaxの実用的な例を探している場合は、この記事をお試しください。

次へ？

この記事を通して見たように、プロトタイプはそれ自体が有用であるだけでなく、他のより専門的なライブラリを書くための優れた出発点を提供します。それはまさにますます多くの人々がやっていることです。

script.aculo.us and moo.fx

Thomas FuchsのScript.aculo.usは、現在、そのWhiz-Bang効果と巧妙なUIウィジェットについて多くの注目を集めています。もともとはコアプロトタイプライブラリの一部でしたが、すぐに制御不能になり、親から解放されました。

プロトタイプを基礎として使用して、Script.aculo.usは、アニメーションエフェクト、ドラッグアンドドロップ機能、および強力なUIコンポーネントを使用して、リッチなユーザーエクスペリエンスを提供することを専門としています。サイトには素敵なウィキがあり、あなたが始めるのに役立つ高品質のドキュメントの急速に成長している店があり、あなたの創造的なジュースを流れるための例ページがあります。 Script.aculo.usのファイルサイズがかなり大きくなっているため、いくつかのファイルに分割されているため、ユーザーがライブラリ全体をダウンロードする必要はありません。ただし、個々のファイルでさえかなりかさばります。

いくつかの単純な効果を目指している場合は、moo.fxを本当にお勧めします。サイズはわずか3kで、スライドとフェードの効果を切り替えて、多くの場合、単純なAJAXアプリケーションで必要なものがすべてです。また、独自のエフェクトを書きたい場合は、素晴らしい出発点でもあります。コードをご覧になり、PrototypeのObject.Extendを使用してプログラミングの優れた例を表示して、単純な継承を提供します。 Valerioは明らかに、スクリプトのファイルサイズを抑えることに非常に焦点を当てているため、プロトタイプの「ライト」バージョン（10K刻み）とajax.requestの無駄のないバージョンもあります。それは間違いなく見る価値があります。

動作

動作は、CSSセレクターを使用してドキュメントに動作を追加できるようにするDOMスクリプトツールキットへの素晴らしい追加です。これがあなたができることのサンプルです：

これについては、行動サイトで詳細をご覧ください。以前に説明した真新しい$$関数を使用して同様のタイプのものを達成することが可能になりました。これは、最終的に冗長になる可能性があります。

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

jquery

jQueryは、プロトタイプでうまく機能し、XPathおよびCSS 3セレクターを使用できる$関数のスーパーヒーローバージョンを作成するコンパクトな小さなライブラリです。非常に簡潔なコードを作成する非常に巧妙なメソッドチェーンチェーンアプローチでその機能をカップルします。これに注意してください。

wlap up

プロトタイプは、WebアプリケーションにDOMスクリプトスパイスを追加することに関して、強力なキットです。残念ながら、その機能とツールは、ドキュメントよりもはるかに速い速度で成長しています！この記事では、プロトタイプのすべてのコーナーをカバーすることができましたが、すべての方法ではありません。ただし、必要な追加情報を入手するためにどこに行くべきかを知っていることを願っています。

もっと知りたい場合は、Ronnie RollerのPrototypedoc.comをお試しください。これは、プロトタイプのドキュメントの増加に耐えるリソースです。楽しんでください！

痛みのないJavaScriptプロトタイプ

に関するよくある質問（FAQ）

痛みのないJavaScriptのプロトタイプは何ですか？

痛みのないJavaScriptプロトタイプは、独自のプロパティとメソッドを備えた新しいオブジェクトを作成できるJavaScriptのユニークな機能です。これは、他のオブジェクトを作成できる青写真です。この機能は、同じプロパティとメソッドを持つ複数のオブジェクトを作成する場合に特に役立ちます。コードの再利用可能性と効率を促進します。

痛みのないJavaScriptプロトタイプは、他のJavaScriptの機能とどのように異なりますか？

これは、同じプロトタイプから複数のオブジェクトを作成できることを意味し、それぞれに独自のプロパティとメソッドを備えています。これは、単一のオブジェクトの作成のみを可能にする他のJavaScript機能とは異なります。

痛みのないJavaScriptプロトタイプを作成するにはどうすればよいですか？

痛みのないJavaScriptプロトタイプの作成には、プロトタイプとして作用する関数を定義し、「新しい」キーワードを使用してそのプロトタイプから新しいオブジェクトを作成します。簡単な例を次に示します。

function car（make、model、year）{
this.make = make;
this.model = model; this.year = year;
}

は、作成された後に痛みのないJavaScriptプロトタイプにプロパティを追加できますか？これは、「プロトタイプ」プロパティを使用して行われます。例は次のとおりです。car.prototype.color= 'black';

この例では、「cal」プロトタイプに「色」プロパティが追加されます。

痛みのないjavaScriptプロトタイプにメソッドを追加できますか？

はい、痛みのないJavaScriptプロトタイプにメソッドを追加できます。これは、「プロトタイプ」プロパティを使用して、プロパティを追加するのと同じ方法で行われます。例は次のとおりです。car.prototype.start= function（）{
console.log（ 'car start'）;
}

この例では、「car」プロトタイプに「スタート」方法が追加されます。 JavaScriptプロトタイプは、コードの再利用性と効率です。プロトタイプを作成することにより、各オブジェクトのプロパティとメソッドを再定義することなく、同じプロパティとメソッドを持つ複数のオブジェクトを作成できます。これにより、多くの時間を節約し、コードをより効率的にすることができます。

痛みのないJavaScriptプロトタイプを使用することに欠点はありますか？ただし、それがどのように機能するかを理解したら、非常に強力なツールになります。

他のJavaScript機能を使用して痛みのないJavaScriptプロトタイプを使用できますか？実際、それは他の機能と組み合わせてより複雑で強力なアプリケーションを作成するためによく使用されます。

痛みのないJavaScriptプロトタイプは、すべてのブラウザーでサポートされていますか？ただし、使用しているJavaScript機能の特定のブラウザサポートをチェックすることをお勧めします。開始するのに適した場所には、Mozilla Developer Network（MDN）や、CodecademyやUdemyなどのサイトで利用できるさまざまなJavaScriptチュートリアルとコースが含まれます。

以上がプロトタイプを使用した痛みのないJavaScriptの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。