JavaScript初心者向けの書き方と開発の7つの詳細_JavaScriptスキル

(1) コードを簡略化します
JavaScript でオブジェクトと配列を定義するのは非常に簡単です。通常、次のように記述します。

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

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

次の記述でも同じ効果が得られます。 🎜>

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

var car = {

colour:' red',
wheels:4,
ホイールキャップ:'spinning',
age:4
}


以下ははるかに短いので必要ありませんオブジェクト名を繰り返し書き込みます。

さらに、以前は次のように配列を宣言する簡潔な方法もありました。

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

var movieThatNeedBetterWriters = new Array(

'Transformers','Transformers2','Avatar','Indiana Jones 4'
) ;


より簡潔な書き方は次のとおりです:

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

var movieThatNeedBetterWriters = [

'Transformers','Transformers2','Avatar','Indiana Jones 4'
]; 、連想配列のような特殊なものがあります。 多くのコードが次のようなオブジェクトを定義していることがわかります:

コードをコピーします

コードは次のとおりです: var car = new Array(); car['color'] = 'red'; car['wheels'] = 4; Spining';

car['age'] = 4;

これはおかしなことです。「連想配列」は単なるオブジェクトのエイリアスです。
コードを簡素化するもう 1 つの方法は、三項演算子を使用することです。例:

コードをコピーします

コードは次のとおりです。 var 方向; if(x 方向 = 1; } else {

方向 = -1;

次のコードを使用してこの記述を置き換えることができます:




コードをコピーします

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

var directive = x (2) データ形式として JSON を使用します。 >偉大な Douglas Crockford は、データを保存するための JSON データ形式を発明しました。ネイティブ JavaScript メソッドを使用すると、追加の変換を行わずに複雑なデータを保存できます。たとえば、

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


var Band = {

"name":"The Red Hot Chili Peppers", "メンバー": [ { "名前":"アンソニー・キーディス", "役割":"リードボーカル" }, {

"名前":"マイケル'Flea' Balzary ",

"role":"ベースギター、トランペット、バッキングボーカル"
},
{
"name":"チャド・スミス",
"role": "ドラム、パーカッション "
},
{
"名前":"ジョン フルシアンテ",
"役割":"リード ギター"
}
],
" year":" 2009"
}


JSON は JavaScript で直接使用することも、API によって返される形式としても使用できます。これは JSON-P と呼ばれ、多くの API で使用されます。例:




コードをコピー


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

<script> <div class="codetitle">function fresh(o){ <span>var out = '<ul>'; <a style="CURSOR: pointer" data="89487" class="copybut" id="copybut89487" onclick="doCopy('code89487')">for(var i=0;i<o.length ;i ){ <U>out = '<li><a href="' o[i].u '">' o[i].d '</a></ li>'; } </span>out = '</ul>'; </div>document.getElementById('delicious').innerHTML = <div class="codebody" id="code89487"></script> 🎜>< スクリプト src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious">


ここでは、delicious の Web サービスを呼び出して最新のブックマークを取得し、JSON 形式で返し、順序なしリストとして表示します。
本質的に、JSON は複雑なデータを記述するための最も軽量な方法であり、ブラウザーで直接実行されます。 PHP で json_decode() 関数を呼び出して使用することもできます。
(3) JavaScript ネイティブ関数を使ってみる
一連の数値の最大値を見つけるには、たとえば次のようなループを作成します。

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

varnumbers = [3,342,23,22,124];
var max = 0 ;
for (var i=0;iif(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]);

最も簡単な書き方は次のとおりです:

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

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

Math.max を使用して、ブラウザがサポートしているプロパティを検出することもできます:

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

varscrollTop= Math.max(

doc.documentElement.scrollTop,
doc.body.scrollTop
);


クラスを追加したい場合スタイルを要素に追加する場合、元の記述は次のようになります:

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

関数 addclass(elm,newclass){

var c = elm.className;
elm.className = (c === '') newclass : c ' ' newclass; >
より洗練された書き方は次のとおりです:

コードをコピー

コードは次のとおりです: 関数 addclass(elm,newclass){ var クラス = elm.className.split(' ') ;

classes.push(newclass);

elm.className = class.join(' ');
}



(4) イベント デリゲート

イベントは JavaScript の非常に重要な部分です。クリック イベントをリスト内のリンクにバインドする一般的なアプローチは、ループを作成してイベントを各リンク オブジェクトにバインドすることです。


コードをコピー

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

素晴らしい Web リソース

Opera Web 標準カリキュラム

サイトポイント

A リスト

YUI ブログ

href="http://blameitonthevoices.com">声のせい

奇妙なことに

スクリプトは次のとおりです:

コピーcode

コードは次のとおりです: // 古典的なイベント処理の例 (function(){ var resource = document.getElementById('リソース');

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)
});
より合理的な記述方法は、イベントをリストの親オブジェクトにバインドすることだけです。これが機能する理由は、イベントがバブリングをサポートしているためです。

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

(function(){
var resource = document.getElementById('resources');
resources.addEventListener('click ',handler,false);
function handler(e){
var x = e.target; //
if(x.nodeName. toLowerCase() === 'a' ){
alert('イベント委任:' x);
}
});



(5) 匿名関数

JavaScript で最も厄介な点の 1 つは、変数に特定のスコープがないことです。 一般に、変数、関数、配列、またはオブジェクトはグローバルです。つまり、同じページ上の他のスクリプトがそれらにアクセスして上書きできることを意味します。解決策は、変数を匿名関数にカプセル化することです。 たとえば、次の定義では 3 つのグローバル変数と 2 つのグローバル関数が生成されます:

コードをコピー コードは次のとおりです: var name = 'Chris';

var age = '34';

function createMember(){
// [.. . ]
}
function getMemberDetails(){
// [...]
}


カプセル化後は次のようになります:

コードをコピー

コードは次のとおりです: var myApplication = function(){ var name = 'クリス';

var age = '34';

return{
createMember:function(){
// [...]
},
getMemberDetails:function (){
// [...]
}
}
}();
// myApplication.createMember() および
// myApplication.getMemberDetails() が動作するようになりました。


これは、JavaScript 設計パターンの一種で、YUI でよく使用されるモードです。 🎜>

コードをコピーします

コードは次のとおりです: var myApplication = function(){ var name = 'Chris'; var age = '34'; function createMember(){

// [...]

}
function getMemberDetails(){
// [...]
}
return{
create:createMember,
get:getMemberDetails
}
}();
//myApplication.get( ) と myApplication.create() が動作するようになりました。



(6) コードを構成可能


を作成したい場合あなたが作成したコードを他の人が簡単に使用できるようにするには、コードを構成可能にする必要があります。解決策は、作成したスクリプトに構成オブジェクトを追加することです。重要なポイントは次のとおりです:
1. スクリプトにconfigurationというオブジェクトを追加します。

2. CSS ID、クラス名、言語など、他の人が変更する可能性のあるすべてのものを設定オブジェクトに保存します。
3. このオブジェクトをパブリック プロパティとして返し、他の人がオーバーライドできるようにします。

(7) コードの互換性


互換性は、JavaScript を学習する場合、通常、固定ブラウザを使用することになります。最も可能性が高いのは IE ですが、これは非常に致命的です。なぜなら、IE は現在の主要な主流ブラウザの中で、標準に対するサポートが最も悪いからです。エンド ユーザーが見た結果として、作成したコードが特定のブラウザでは正しく実行できない場合があります。すべての主要なブラウザでコードをテストする必要があります。これには時間がかかるかもしれませんが、必ず実行する必要があります。
原文は: Seven JavaScript Things I Wish I Know I Wish I Know much Early In My Career)