今まで見たことのない JavaScript スキル_javascript スキル

JavaScript の成功は広く話題になっており、Web ページの JavaScript コードを記述することは、すべての Web デザイナーにとっての基本的なスキルとなっています。この興味深い言語には、長年の経験を持つ JavaScript プログラマーですら完全に理解していないことが数多くあります。この記事では、あまり馴染みのない、しかし非常に実践的な JavaScript のテクニックを 7 つの側面から説明します。
省略されたステートメント
JavaScript では、次のコードのような省略されたステートメントを使用してオブジェクトと配列を迅速に作成できます:

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

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

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

var car = {
colour:'red',
wheels:4,
hubcaps:'spinning',
age:4
}

オブジェクトの車が作成されますが、その前に「;」を追加しないように注意してください。そうしないと、IE で大きな問題が発生します。
配列を作成する従来の方法は次のとおりです:

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

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

省略したステートメントを使用します:

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

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

配列に関するもう 1 つの質問は、連想配列のようなものが存在するかどうかです。この例のように、上記の車を定義するコード例がたくさんあります。

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

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

省略されたステートメントを使用できるもう 1 つの場所は、

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

var direct;
if(x direction = 1;
} else {
direction =
}

は次のように短縮できます:

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

var directive = x
JSON データ形式
JSON は、Douglas Crockford によって設計された「JavaScript Object Notation」の略称です。JSON は、次の例のように、複雑なデータ形式をキャッシュする際の JavaScript のジレンマを変更します。バンドを記述したい場合は、次のように記述できます。

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

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

JSON は、一部の API の戻りデータ オブジェクトとしても、JavaScript で直接使用できます。次のコードは、有名なブックマーク Web サイト「delicious.com」の API を呼び出し、この Web サイトのすべてのブックマークを返し、自分の Web サイトに表示します。

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

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



JavaScript ネイティブ関数 (Math、Array、String)

JavaScript には多くの組み込み関数があり、これらを効果的に使用すると、多くの不要なコードを回避できます。配列から最大値を見つけるための従来の方法は次のとおりです:

コードをコピーします コードは次のとおりです: var 数値 = [3,342,23,22,124];

var max = 0;

for(var i=0;iif(数値[i] > max){
max =numbers[i];
}
alert(max); これは、 build を使用すると簡単に実現できます。 -in 関数:




コードをコピー

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

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

Math.max() メソッドを使用するには:

コードをコピー

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

Math.max(12,123,3,2,433,4); // 433 を返します このメソッドを使用してブラウザを検出できます

コードをコピーします

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

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

これにより、IE ブラウザーの問題が解決されます。 1 つの問題は、この方法では、ブラウザーがサポートしていない値が常に正しい値を見つけることができることです。未定義を返します。
JavaScript の組み込みの split() 関数と join() 関数を使用して、HTML オブジェクトの CSS クラス名を処理することもできます。HTML オブジェクトのクラス名がスペースで区切られた複数の名前である場合は、追加または削除します。オブジェクトにクラス名属性がない場合は、そのクラス名にスペースを入れる必要があります。これは、従来の JavaScript メソッドを使用して実装される方法です。

コードをコピーします。


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

function addclass(elm,newclass){ var c = elm.className; elm.className = (c === '') ? ' newclass; }

分割および結合メソッドのルールを使用する より直感的でエレガントです:




コードをコピー

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

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

イベント プロキシ
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; // クリックされたリンクを取得します。 alert( x);
e.preventDefault();
})();


イベント プロキシを使用すると、

コードをコピー

コードは次のとおりです。 (function(){ var resource = document.getElementById('resources '); resources.addEventListener('click',handler,false); function handler(e){ // リンクを取得します。

if(x .nodeName.toLowerCase() === 'a'){

alert('イベント委任:' x);
e.preventDefault()
} ;
}) ();


匿名関数とモジュール モード
JavaScript の問題は、関数内で定義されていない限り、変数、関数、またはオブジェクトがグローバルであることです。つまり、同じページ上の他のコードがこの変数にアクセスして上書きすることができます (ECMA の JavaScript 5 ではこの状況が変わりました - トランスレータ)。匿名関数を使用すると、この問題を回避できます。
たとえば、次のようなコードがある場合、明らかに変数名、年齢、ステータスがグローバル変数になります

コードをコピー


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

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

// [...]

}


にこの問題を回避するには、匿名関数を使用します:




コードをコピー

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

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

// [...]

}
}();


関数は呼び出されません。より直接的に行うことができます。 コードをコピーします:







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

(function(){

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

// [...]

}
})(); >内部のオブジェクトまたは関数にアクセスしたい場合は、次のことができます:




コードをコピー


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


var myApplication = function(){

var name = 'クリス ';
var age = 'single';
return{ >createMember:function(){

// [...] } , getMemberDetails:function(){ // [...] } } }();

// myApplication.createMember() および

// myApplication.getMemberDetails() が機能するようになりました。

これはいわゆるモジュール パターンまたはシングルトン パターンで、Douglas Crockford によって推奨され、Yahoo ユーザー インターフェイス ライブラリ YUI で広く使用されています。
内部のメソッドを別の場所で呼び出したいが、呼び出しの前にオブジェクト名 myApplication を使用したくない場合は、これらのメソッドを匿名関数で返すことも、省略形を使用して返すこともできます:

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

var myApplication = function(){
var name = 'クリス';
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 つのこと の記事を参照してください。 バックエンドとの対話
JavaScript はフロントエンド言語です。AJAX を使用すると、JavaScript がバックエンドと直接対話してデータを返すことができます。複雑なデータ処理はバックグラウンドで処理されます。
JavaScript フレームワーク
さまざまなブラウザーに適応する独自のコードを記述するのは完全に時間の無駄です。JavaScript フレームワークを選択し、そのフレームワークにこれらの複雑な処理を任せるべきです。
その他のリソース

·

Douglas Crockford による JavaScript について JavaScript の詳細なビデオ チュートリアル

・

Opera Web 標準カリキュラム JavaScript の詳細説明

多読

・

JavaScript に関する 10 の不可解な点

·

新しい API は、JavaScript がローカル ファイル上で動作できるようにすることを目指しています

·

JavaScript で HTML5 オフライン ストレージを保存できるようにします

·

オープンソース プロジェクトでは JavaScript がますます好まれています

・

JavaScript はバグですか?

・

JavaScript 2 の将来は決着

・

Google がランク付けした最も有名な JavaScript ライブラリ 10 選

・

ECMA が JavaScript 5 を開始

この記事の国際的な出典: Smashing Magazine

Seven JavaScript Things I Wish I Wish I Knew much Early In My Career (原著者: Christian Heilmann)

[

Blog Garden Deep Blue Houseより、転載の際は著者の出典を明記してください]