事前に知っておくべき 7 つの JavaScript のトリック_JavaScript のトリック

優れた Web リソース

• Opera Web 標準カリキュラム


• Sitepoint
• A リスト


• YUI ブログ


• 声のせいにしてください


• 奇妙に特殊

// 典型的なイベント処理の例
(function (){
var resource = document.getElementById('resources');
var links = resource.getElementsByTagName('a');
var all = links.length;
for( var i =0;i // 各リンクにリスナーをアタッチします
links[i].addEventListener('click',handler,false);
};
function handler (e){
var x = e.target; // クリックされたリンクを取得します
alter(x);
e.preventDefault();
};
} )( );

(function(){
var resource = document.getElementById('resources');
resource.addEventListener('click',handler,false) ;
function handler(e){
var x = e.target; // リンクを取得します
if(x.nodeName.toLowerCase() === 'a'){
アラート('イベント委任:' ここで行う必要があるのは、ノード名を比較して、どの要素がこのイベントに応答する必要があるかを見つけることだけです。

免責事項: 上記の 2 つのイベントの例は、IE6 を除くすべてのブラウザーで実行できます。IE6 では、単純な W3C 標準実装の代わりにイベント モデルを使用する必要があります。このため、いくつかのツールキットの使用をお勧めします。

このアプローチの利点は、複数のイベント ハンドラーを 1 つに減らすことに限定されません。たとえば、このリンク テーブルにさらにリンクを動的に追加する必要があると考えてください。イベント委任を使用した後は、その他の変更を行う必要はありません。それ以外の場合は、リンク リストをリサイクルし、各リンクのイベント ハンドラーを再インストールする必要があります。

// [...]
}


このページの他のスクリプトに status という変数があると問題が発生します。これらを myApplication にカプセル化すると、この問題は解決されます:

ただし、この場合、関数の外に関数はありません。それが必要であれば、それで結構です。関数の名前を省略することもできます:

関数の外で実行したい 関数内のものを使用できる場合は、いくつかの変更を加える必要があります。 createMember() または getMemberDetails() にアクセスするには、これらを myApplication のプロパティにして外部に公開する必要があります:


構成可能

私が書いた JavaScript コードを世に出すとすぐに、誰かがそれを変更したがります。通常、それを使って何かをしたい人がいます。単独では実行できないタスクですが、多くの場合、私が作成するプログラムは十分な柔軟性がなく、ユーザーがカスタマイズできる機能を提供しません。解決策は、構成項目オブジェクトをスクリプトに追加することです。以前、JavaScript 設定オブジェクトを紹介する詳細な記事を書きました。重要なポイントは次のとおりです。

configuration という名前のオブジェクトをスクリプトに追加します。
このオブジェクトには、このスクリプトを使用するときに頻繁に変更されるすべてのものが保存されます。
CSS ID とクラス名、
ボタン名、ラベルの単語など。
「表示イメージ」など。各ページの「数値」値、「画像表示サイズ」値;
場所、場所、言語の設定。
このオブジェクトをパブリック プロパティとしてユーザーに返し、ユーザーが変更したり上書きしたりできるようにします。
通常、これはプログラミング プロセスの最後のステップです。これらを例にまとめました: 「スクリプトを次の開発者に引き渡す前に行うべき 5 つのこと」

実際には、コードをいくつか変更して、人々が使用できるようにしたいと考えています。それぞれのニーズに合わせます。この機能を実装すると、あなたのスクリプトについて苦情を言う人々から、誰かがあなたのスクリプトを変更したのでうまく機能したという、紛らわしい電子メールを受け取ることが減ります。

バックグラウンドとの対話

長年のプログラミング経験の中で、私が学んだ重要なことの 1 つは、JavaScript はインターフェース対話の開発には優れた言語であるということですが、これを使用すると数値計算やデータ ソースにアクセスするのは少し面倒です。
最初、私は Perl を実行するためにコードを cgi-bin フォルダーにコピーする必要があったので、Perl に代わる JavaScript を学びました。その後、JavaScript にすべてをさせるのではなく、バックグラウンド作業言語を使用して主要なデータを処理する必要があることがわかりました。さらに重要なのは、セキュリティと言語機能を考慮する必要があるということです。

Web サービスにアクセスすると、JSON-P 形式のデータを取得でき、クライアントのブラウザでさまざまなデータ変換を行いますが、サーバーがある場合は、データを変換する方法が増えます。 . サーバー側で JSON または HTML 形式のデータを生成してクライアントに返すことや、データのキャッシュなどの操作を行うことができます。これらを事前に理解して準備しておけば、長期的には大きなメリットが得られ、多くの頭を悩ませる必要がなくなります。すべてのブラウザで動作するプログラムを作成するのは時間の無駄です。ツールキットを使用してください。

Web 開発に携わり始めた頃、ページにアクセスするときに document.all を使用するか document.layers を使用するかという問題で長い間悩みました。私が document.layers を選択したのは、どのレイヤーも独自のドキュメントであるという考えが気に入っているからです (そして、要素を生成するためにあまりにも多くの document.write を記述していました)。 Layers パターンは最終的に失敗したため、document.all を使用し始めました。 Netscape 6 が W3C DOM モデルのみのサポートを発表したとき、私はうれしかったのですが、ユーザーはあまり気にしませんでした。ユーザーには、ほとんどのブラウザが適切に表示できるものをこのブラウザが表示できないことがわかります。これはコーディングに問題があります。私たちは現在の環境でのみ実行できる近視眼的なコードを作成していますが、残念なことに、動作環境は常に変化しています。

さまざまなブラウザやバージョンとの互換性の問題に対処するのに多くの時間を無駄にしてきました。このような問題にうまく対処できるので、良い仕事の機会が得られます。しかし今、私たちはもうこの痛みに耐える必要はありません。

YUI、jQuery、Dojo などのいくつかのツールキットは、この種の問題に対処するのに役立ちます。これらは、バージョンの非互換性、設計上の欠陥など、さまざまなインターフェイスの実装を抽象化することでブラウザーのさまざまな問題に対処し、私たちを苦痛から救います。ブラウザのベータ版をテストする場合を除き、ブラウザの欠陥を修正するコードをプログラムに追加しないでください。ブラウザが問題のコードを修正したときにコードを削除するのを忘れる可能性があります。

一方で、ツールキットだけに依存するのも短絡的です。ツールキットは迅速な開発に役立ちますが、JavaScript を深く理解していないと、間違った作業をしてしまう可能性もあります。