JavaScript コードを記述するときに注意する必要がある 7 つの詳細のまとめ_JavaScript スキル

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

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

var car = new Object(); 🎜>car.colour = 'red' ;
car.wheels = '回転';
car.age = 4;

次の記述 同じ効果が得られます:

コードをコピー

コードは次のとおりです: var car = { colour:'red',

wheels:4,

hubcaps:'spinning ',
age:4
}



以下ははるかに短く、オブジェクト名を繰り返し記述する必要はありません。
さらに、配列を記述する簡潔な方法もあります。以前は、次のように配列を宣言しました。

コードをコピー

コードは次のとおりです: var movieThatNeedBetterWriters = new Array( 'Transformers','Transformers2', 'アバター','インディ・ジョーンズ 4 '

)

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

コードをコピーします

コードは次のとおりです: var movieThatNeedBetterWriters = [ 'Transformers','Transformers2','Avatar ','Indiana Jones 4'

];

配列には特別なものがあります。連想配列のようなもの。 多くのコードが次のようなオブジェクトを定義していることがわかります:

コードをコピーします

コードは次のとおりです: < ;SPAN style="FONT-FAMILY: ベルダナ、ジュネーブ">var car = new Array(); car['colour'] = 'red'; '] = 4;

car['hubcaps'] = '回転';

混乱しないでください。「連想配列」はオブジェクトのエイリアスにすぎません。
コードを簡素化するもう 1 つの方法は、三項演算子を使用することです。例:




コードをコピーします

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

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

この記述を置き換えるには、次のコードを使用できます。


コードをコピーします


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

偉大な Douglas Crockford が JSON データ形式を発明しました。データを保存するには、ネイティブ JavaScript メソッドを使用して、追加の変換を行わずに複雑なデータを保存できます。例: コードをコピー

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

var Band = {
"name":"The Red Hot Chili Peppers",
"メンバー" :[
{

"名前":"アンソニー・キーディス", "役割":"リードボーカル" }, { "名前":"マイケル 'フリー' バルザリー", "role":"ベースギター、トランペット、バッキングボーカル" },

{

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



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




コードをコピー


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

<script> <br>関数おいしい(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 '</a></li>'; <br>} <br>out = '</ul>'; <BR>document.getElementById('delicious').innerHTML = out; <BR>} <BR></script>

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

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

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



要素にクラス スタイルを追加する場合は、元の文章は次のようになります。

コードをコピー コードは次のとおりです。 < SPAN style="FONT-FAMILY: verdana、geneva">function addclass(elm,newclass){

var c = elm.className = (c === '') newclass : c ' ' newclass;

}



while よりエレガントな書き方は次のとおりです。コードをコピーします

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

function addclass(elm,newclass) { var クラス = elm.className.split(' '); classes.push(newclass); elm.className = class.join(' '); ;/SPAN> 4. イベントの委任

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

コードをコピー


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

優れた Web リソース

• Opera Web 標準カリキュラム


• Sitepoint


• アパートのリスト


• 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; // クリックされたリンクを取得します。 🎜>alert(x);
e.preventDefault()
});



より信頼できる写法は只给列表の父对オブジェクト绑定イベント，代码如下：

复制代 代码如下: (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);
e.preventDefault();
}); ;



5. 匿名関数
は JavaScript の最も厄介な問題の 1 つであり、その量には特定の作用範囲がありません。たとえば、次の設定では、3 つの完全な関数と 2 つの完全な関数が生成されます:

复制代

代码如下: var name = 'Chris'; var age = '34'; var status = 'single';

function createMember(){

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



封入後如下：

复制代

代码如下: var myApplication = function(){ var name = 'Chris'; var age = '34';

var status = 'single';

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



これは、JavaScript デザインモードの 1 つである单体モードとして知られており、この種のモードは YUI で非常に多く使用されており、変更された写法は次のとおりです:

复制代码

代码如下: var myApplication = function( ){ 変数名 = 'クリス'; var age = '34';

var status = 'single';

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



6. コードの構成可能性
作成したコードを他の人が使用または変更しやすくしたい場合、解決策は、作成したスクリプトに構成オブジェクトを追加することです。重要なポイントは次のとおりです:
1. スクリプトにconfigurationというオブジェクトを追加します。
2. CSS ID、クラス名、言語など、他の人が変更する可能性のあるすべてのものを設定オブジェクトに保存します。
3. このオブジェクトをパブリック プロパティとして返し、他の人がオーバーライドできるようにします。
7. コードの互換性
JavaScript を学習する場合、通常、互換性は固定ブラウザでテストされますが、このブラウザは非常に致命的です。現在の主要なブラウザの中で、IE の標準サポートは最悪です。エンド ユーザーが見た結果として、作成したコードが特定のブラウザでは正しく実行できない場合があります。すべての主要なブラウザでコードをテストする必要があります。これには時間がかかるかもしれませんが、必ず実行する必要があります。