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

私は、いつ書き始めたのかさえ思い出せないほど、長い間 JavaScript コードを書いてきました。私は JavaScript がここ数年で達成したことに非常に興奮しています。私は幸運にもこれらの成果の恩恵を受けることができました。私はこの言語に特化した記事、章、本をかなりの数書いてきましたが、まだこの言語について新しいことを発見しています。以下の説明は、私が過去に「ああ！」と思ったプログラミング手法であり、将来遭遇するのを待つのではなく、今すぐ試しるべき手法です。

簡潔な書き方

JavaScript で私が気に入っていることの 1 つは、オブジェクトと配列を生成するための省略法です。以前は、オブジェクトを作成したい場合は、次のようにしていました:

コードをコピーします コードは次のようになります。これ:

var car = new Object();
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;

次の記述方法でも同じ効果が得られます:

コードをコピーします コードは次のとおりです:

var car = {
colour:'red',
ホイール:4,
ホイールキャップ:'spinning',
age:4
}

はるかに単純ですが、オブジェクトの名前を繰り返し使用する必要はありません。このようにして、car が定義されます。この問題は IE を使用する場合にのみ発生します。ただ 1 つだけ注意してください。そうすれば、問題は発生しません。

もう 1 つの非常に便利な略語は配列です。配列を定義する従来の方法は次のとおりです:

コードをコピーします コードは次のとおりです:

var movieThatNeedBetterWriters = new Array(
'Transformers','Transformers2','Avatar','IndianaJones 4'
);

短縮版は次のようになりますこれ:

コードをコピーします コードは次のとおりです:

var movieThatNeedBetterWriters = [
'Transformers','Transformers2' ,'Avatar','IndianaJones 4'
];

配列の場合、実際にはグラフ グループ関数がありません。 。しかし、上記の車を次のように定義している人をよく見かけます。

コードをコピーします コードは次のとおりです:

var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning' ;
car['age'] = 4;

これが正しく書かれていないと、混乱を招くことになります。グラフ グループは実際にはオブジェクトの関数であるため、人々は 2 つの概念を混同しています。

もう 1 つの非常に優れた省略方法は、三項条件表記を使用することです。このように書く必要はありません...

コードをコピーします コードは次のとおりです:

var 方向;
if(x 方向 = 1;
} else {
方向 = -1;
}

you これは、次の 3 項条件表記を使用して簡略化できます。

コードをコピーします コードは次のとおりです:

var 方向 = x

条件が true の場合は疑問符の後の値を取得し、それ以外の場合はコロンの後の値を取得します。

JSON 形式でデータを保存する

JSON を発見する前は、配列、文​​字列などの JavaScript のネイティブ データ型にデータを保存するために、あらゆる種類のクレイジーな方法を使用し、分割しやすい記号やその他のわかりにくい厄介なものを混ぜていました。 Douglas Crockford が JSON を発明したとき、すべてが変わりました。 JSON を使用すると、JavaScript 独自の関数を使用してデータを複雑な形式で保存でき、追加の変換を行わずに直接アクセスして使用できます。 JSON は「JavaScript Object Notation」の略称で、上記の 2 つの略語を使用します。したがって、バンドについて説明したい場合は、次のように書くことができます:

コードをコピー コードは次のとおりです:

var Band = {
"name ":" レッド・ホット・チリ・ペッパーズ",
"メンバー":[
{
"名前":"アンソニー・キーディス",
"役割":"リードボーカル"
},
{
"名前":"マイケル 'フリー' バルザリー",
"役割":"ベースギター、トランペット、バッキング ボーカル"
},
{
"名前" :"チャド・スミス",
"役割":"ドラム、パーカッション"
},
{
"名前":"ジョン・フルシアンテ",
"役割":"リードギター"
}
],
"年":"2009"
}

JSON は JavaScript で直接使用したり、関数にカプセル化したり、API の戻り値として使用したりできます。これを JSON-P と呼び、多くの API がこの形式を使用します。

スクリプト コードで直接データ プロバイダーを呼び出して JSON-P データを返すことができます:

コードをコピーコードは次のとおりです:

<script><BR> function fresh(o){<BR> var out = ' <ul>';<BR> for(var i=0;i<o.length;i ){<BR> out = '<li><a href="' o[i].u '" > ' <BR> o[i].d '';<BR> }<BR> out = '';<BR> document.getElementById('おいしい' ).innerHTML = out;<BR> }<BR> </script>

これは、Delicious Web サイトが提供する Web サービス関数を呼び出し、最近の順序付けされていないブックマークのリストを JSON 形式で取得します。

基本的に、JSON は複雑なデータ構造を記述する最も移植可能な方法であり、ブラウザーで実行できます。 json_decode() 関数を使用して PHP で実行することもできます。 JavaScript の組み込み関数 (Math、Array、String) について私が驚いたことの 1 つは、JavaScript の math 関数と String 関数を勉強した後、これらの関数によってプログラミング作業が大幅に簡素化されることがわかったことです。これらを利用することで、複雑なループ処理や条件判定を省くことができます。たとえば、数値の配列内の最大の数値を見つける関数を実装する必要がある場合、以前は次のようなループを作成していました:

Copy Code コードは次のとおりです。

varnumbers = [3,342,23,22,124];
var max = 0;
for(var i=0 ; i if(numbers[i] > max){
max =numbers[i];
}
}
alert(max); 🎜>

これはループせずに実現できます:

コードをコピー コードは次のとおりです。次のように:

varnumbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers [0 ]);


数字の配列を sort() することはできないことに注意してください。この場合、アルファベット順でのみソートされるからです。さらに詳しい使用法を知りたい場合は、sort() に関するこの優れた記事を読んでください。

もう 1 つの興味深い関数は Math.max() です。この関数は、パラメータ内の数値の中で最大の数値を返します:

コードをコピー コードは次のとおりです:

Math.max(12,123,3,2,433,4); // 433 を返します

この関数は数値をチェックして最大の数値を返すことができるため、ブラウジングのテストに使用できます。特定の機能に対するサーバーのサポート:

コードをコピーします コードは次のとおりです:

var scrollTop= Math.max(
doc.documentElement.scrollTop,
doc.body.scrollTop
);

これは IE の問題を解決するために使用されます。現在のページのscrollTop値を取得できますが、ページのDOCTYPEに応じて、上記の2つのプロパティのうちの1つだけがこの値を保存し、もう1つのプロパティは未定義になるため、Math.maxを使用してこれを取得できます。 （） 番号。数学関数を使用して JavaScript を簡素化する方法について詳しくは、この記事を読んでください。

文字列を操作するための非常に便利な関数のもう 1 つのペアは、split() と join() です。最も代表的な例は、ページ要素に CSS スタイルを付加する関数を記述することだと思います。

これは次のようになります。CSS クラスをページ要素にアタッチする場合、それはこの要素の最初の CSS クラスであるか、すでにいくつかのクラスがあり、既存のクラスの後にスペースを追加する必要があります。そしてこのクラスを追加します。このクラスを削除する場合は、クラスの前のスペースも削除する必要があります (これは以前は非常に重要でした。一部の古いブラウザでは、スペースに続くクラスが認識されなかったためです)。

元の記述は次のようになります:

コードをコピーします コードは次のとおりです:

function addclass(elm,newclass){
var c = elm.className;
elm.className = (c === '') newclass : c ' ' newclass;
}split() 関数と join() 関数を使用して、このタスクを自動化できます:

function addclass(elm,newclass){
varclasses = elm.className.split(' ');
classes.push(newclass);
elm.className =classes.join(' ' );
}

これにより、すべてのクラスがスペースで区切られ、追加するクラスが最後に配置されるようになります。

イベント委任

Web アプリケーションはイベント駆動型です。私はイベント処理が好きで、特にイベントを自分で定義することが好きです。これにより、コア コードを変更せずに製品を拡張できるようになります。ページ上のイベントの削除に関して、大きな問題 (そして強力な兆候) があります。要素にイベント リスナーをインストールすると、イベント リスナーが動作を開始します。しかし、ページにはリスナーがいることを示す表示はありません。この表現できない問題 (一部の初心者にとっては特に厄介です) と、IE6 などの「ブラウザ」があまりにも多くのイベント リスナーを使用するときに発生するさまざまなメモリの問題のため、イベント プログラミングの使用はできる限り少なくすべきであることを認めなければなりません。それは賢明な行動です。

ということでイベント代表団が登場しました。

ページ上の要素のイベントがトリガーされると、DOM 継承関係では、この要素のすべての子要素もこのイベントを受け取ることができます。このとき、親要素のイベント ハンドラーを使用して処理することができます。個々の子要素で多数のイベント リスナーを使用する代わりに。正確にはどういう意味ですか?たとえば、ページには多くのハイパーリンクがあり、これらのリンクを関数を通じて呼び出す必要があるとします。HTML コードは次のようになります。 >

コードをコピー コードは次のとおりです:

優れた Web リソース

• Opera Web 標準カリキュラム


• Sitepoint
> ;

• A リスト


• YUI ブログ


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


• 奇妙に特殊

一般的なアプローチは、これらのリンクをループし、各リンクにイベント ハンドラーをアタッチすることです。

コードをコピー コードは次のとおりです:

// 典型的なイベント処理の例
(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 つに減らすことに限定されません。たとえば、このリンク テーブルにさらにリンクを動的に追加する必要があると考えてください。イベント委任を使用した後は、その他の変更を行う必要はありません。それ以外の場合は、リンク リストをリサイクルし、各リンクのイベント ハンドラーを再インストールする必要があります。

匿名関数とモジュール性

JavaScript で最も厄介なのは、変数にスコープがないことです。関数内にない変数、関数、配列、オブジェクトはグローバルとみなされます。つまり、このページの他のスクリプトもそれにアクセスして上書きできます。

解決策は、変数を匿名関数内に置き、定義した直後にそれを呼び出すことです。たとえば、次の記述では 3 つのグローバル変数と 2 つのグローバル関数が生成されます:

コードをコピーします

コードは次のとおりです。 🎜>

var name = 'Chris'; var age = '34'; var status = 'single'; function createMember(){ // [. .. ] }

function getMemberDetails(){

// [...]
}


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

コードをコピー コードは次のとおりです:

var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
}();

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

コードをコピーします コードは次のとおりです:

(function( ){
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
})();

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

コードをコピー コードは次のとおりです:

var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';
return{
createMember:function(){
// [...]
},
getMemberDetails:function(){
// [ ..]
}
}
}();
//myApplication.createMember() および
//myApplication.getMemberDetails() を使用できます。
[code]
これはモジュールパターンまたはシングルトンと呼ばれます。 Douglas Crockford はこれについてよく話しており、Yahoo ユーザー インターフェイス ライブラリ YUI はこれを広範囲に活用しています。しかし、不便に感じるのは、関数や変数を外部からアクセスできるようにするには、文の構造を変更する必要があることです。さらに、呼び出すときにプレフィックス myApplication を追加する必要があります。したがって、私はこれを行うのは好きではなく、外部からアクセスできるようにする必要がある要素へのポインターを単純にエクスポートすることを好みます。これを行うと、外部呼び出しの記述が簡素化されます:
[code]
var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
return{
create:createMember,
get:getMemberDetails
}
}();
//あとは myApplication.get() と myApplication.create() を書くだけです。私はこれを「明らかにするモジュールパターン」と呼んでいます。

構成可能

私が書いた 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 を深く理解していないと、間違った作業をしてしまう可能性もあります。