検索

ホームページ  >  記事  >  ウェブフロントエンド  >  Javascript で注意する必要がある詳細は何ですか?

Javascript で注意する必要がある詳細は何ですか?

零下一度
零下一度オリジナル
2017-07-21 09:33:181170ブラウズ

1. ==
の代わりに === を使用する JavaScript では、===|!== と ==|!= という 2 つの異なる等価演算子が使用され、比較演算では前者を使用することがベスト プラクティスです。
「両側のオペランドの型と値が同じ場合、=== は true を返し、!== は false を返します。」 - JavaScript: Language Essence
ただし、== と!を使用する場合は、 = の場合、型が異なる状況が発生する可能性があります。この場合、オペランドの型は強制的に同じになって比較されるため、期待した結果が得られない可能性があります。
2.Eval == Evil
最初は慣れないかもしれませんが、「eval」を使用すると JavaScript のコンパイラにアクセスできます (注釈: これは非常に強力であるようです)。基本的に、文字列をパラメーターとして eval に渡して実行できます。
これは、スクリプトのパフォーマンスを大幅に低下させるだけでなく (注釈: JIT コンパイラーは文字列の内容を予測できず、プリコンパイルと最適化もできません)、実行されるテキストのペイロードが大きすぎるため、セキュリティ上の大きなリスクももたらします。権威者よ、近づかないでください。

3. 省略しても問題は解決しない可能性があります
技術的には、ほとんどの中括弧とセミコロンを省略できます。ほとんどのブラウザは次のコードを正しく理解します: 

if(someVariableExists) 
    x = false

次に、次のようになった場合: 

if(someVariableExists) 
   x = false 
   anotherFunctionCall();

上記のコードはこれと同等であると考える人もいるかもしれません: 

if(someVariableExists) { 
   x = false; 
   anotherFunctionCall(); 
}

残念ながら、この理解は間違っています。 。実際の意味は次のとおりです:

if(someVariableExists) { 
   x = false; 
} 
anotherFunctionCall();

上記のインデントが中括弧のような錯覚を与えやすいことに気づいたかもしれません。当然のことですが、これはひどい行為であり、何としても避けるべきです。中括弧を省略できるケースは 1 つだけ、つまり 1 行しかない場合ですが、これについては議論の余地があります。 

if(2 + 2 === 4) return 'nicely done';

雨の日の計画を立てましょう
おそらく、いつか if ブロックにさらにステートメントを追加する必要が生じるでしょう。この場合、このコードを書き直す必要があります。結論 – 省略は地雷原です。

4. スクリプトをページの下部に配置します
覚えておいてください。主な目的は、ページをできるだけ早くユーザーに表示することです。スクリプトが読み込まれるまで、ブラウザは続行できません。以下のコンテンツをレンダリングします。したがって、ユーザーはより長い待ち時間を余儀なくされることになります。
JS がエフェクトを強化するためだけに使用される場合 (ボタンのクリック イベントなど)、本文の終わりの直前にスクリプトをすぐに配置します。これは間違いなくベストプラクティスです。

5. For ステートメント内での変数の宣言は避けてください
長い for ステートメントを実行する場合は、ステートメント ブロックをできるだけ簡潔にしてください。例:
おっと: 

for(var i = 0; i < someArray.length; i++) { 
   var container = document.getElementById(&#39;container&#39;); 
   container.innerHtml += &#39;my number: &#39; + i; 
   console.log(i); 
}

配列の長さは次のようにする必要があることに注意してください。ループを通過するたびに計算され、「container」要素をクエリするために dom を横断する必要があるたびに、効率は非常に低くなります。
提案: 

var container = document.getElementById(&#39;container&#39;); 
for(var i = 0, len = someArray.length; i < len;  i++) { 
   container.innerHtml += &#39;my number: &#39; + i; 
   console.log(i); 
}


6. 文字列を構築する最良の方法
配列やオブジェクトをトラバースする必要があるときは、常に「for」ステートメントについて考える必要はなく、創造的になり、いつでも見つけることができます。より良いもの 例えば、次のようなアプローチがあります。 

var arr = [&#39;item 1&#39;, &#39;item 2&#39;, &#39;item 3&#39;, ...]; 
var list = &#39;<ul><li>' + arr.join('</li><li>') + '</li></ul>';

私はあなたの神ではありませんが、信じてください (信じられない場合は自分で試してください) - これが断然最速の方法です!
ネイティブ コード (join() など) を使用すると、システムが内部で何を行うかに関係なく、通常は非ネイティブ コードよりもはるかに高速になります。

7. グローバル変数を減らす
「複数のグローバル変数が 1 つの名前空間の下に編成されている限り、他のアプリケーション、コンポーネント、またはクラス ライブラリとの不正な相互作用の可能性は大幅に減少します 」—Douglas Crockford

。 
var name = 'Jeffrey'; 
var lastName = 'Way'; 
function doSomething() {...} 
console.log(name); // Jeffrey -- 或 window.name// 更好的做法var DudeNameSpace = { 
   name : 'Jeffrey', 
   lastName : 'Way', 
   doSomething : function() {...} 
} 
console.log(DudeNameSpace.name); // Jeffrey
注: これは単に「DudeNameSpace」という名前ですが、実際には、より合理的な名前が必要です。



8. コードにコメントを追加します 不要に思えますが、信じてください。コードにさらに合理的なコメントを追加してください。数か月後にプロジェクトを振り返ったとき、最初の考えを思い出せないかもしれません。あるいは、同僚の 1 人がコードを変更する必要がある場合はどうすればよいでしょうか?全体として、コードにコメントを追加することは重要な部分です。 

// 循环数组，输出每项名字（译者注：这样的注释似乎有点多余吧）for(var i = 0, len = array.length; i < len; i++) {
   console.log(array[i]); 
}


9. プログレッシブエンハンスメントを採用 JavaScript が無効な場合でもスムーズな機能低下を保証します。 「訪問者のほとんどはすでに JavaScript を有効にしているので、心配する必要はありません。」と私たちは常に考えがちですが、これは大きな誤解です。
JavaScript をオフにして、美しいページがどのように見えるかを少し時間を取って確認したことがありますか? (これは、Web Developer ツールをダウンロードすることで簡単に実行できます (翻訳者注: Chrome ユーザーはアプリ ストアでダウンロードし、IE ユーザーはインターネット オプションで設定します))。しかし、これにより Web サイトが壊れる可能性があります。経験則として、JavaScript が無効であることを前提としてサイトを設計し、それに基づいてサイトを徐々に強化していきます。


10. 文字列パラメーターを「setInterval」または「setTimeout」に渡さないでください。次のコードを検討してください: 

setInterval( 
"document.getElementById(&#39;container&#39;).innerHTML += &#39;My new number: &#39; + i", 3000 );

不仅效率低下，而且这种做法和"eval"如出一辙。从不给setInterval和setTimeout传递字符串作为参数，而是像下面这样传递函数名。

setInterval(someFunction, 3000);

11.不要使用"with"语句
乍一看，"with"语句看起来像一个聪明的主意。基本理念是,它可以为访问深度嵌套对象提供缩写，例如……

with (being.person.man.bodyparts) { 
   arms = true; 
   legs = true; 
}

而不是像下面这样：

being.person.man.bodyparts.arms = true; 
being.person.man.bodyparts.legs= true;

不幸的是，经过测试后，发现这时“设置新成员时表现得非常糟糕。作为代替，您应该使用变量，像下面这样。

var o = being.person.man.bodyparts; 
o.arms = true; 
o.legs = true;

12.使用{}代替 new Ojbect()
在JavaScript中创建对象的方法有多种。可能是传统的方法是使用"new"加构造函数，像下面这样:

ar o = new Object(); 
o.name = &#39;Jeffrey&#39;; 
o.lastName = &#39;Way&#39;; 
o.someFunction = function() { 
   console.log(this.name); 
}

然而，这种方法的受到的诟病不及实际上多。作为代替,我建议你使用更健壮的对象字面量方法。
更好的做法

var o = { 
   name: &#39;Jeffrey&#39;, 
   lastName = &#39;Way&#39;, 
   someFunction : function() { 
      console.log(this.name); 
   } 
};

注意，果你只是想创建一个空对象，{}更好。
13.使用[]代替 new Array()
这同样适用于创建一个新的数组。
例如：

var a = new Array(); 
a[0] = "Joe"; 
a[1] = &#39;Plumber&#39;;// 更好的做法：var a = [&#39;Joe&#39;,&#39;Plumber&#39;];

“javascript程序中常见的错误是在需要对象的时候使用数组，而需要数组的时候却使用对象。规则很简单：当属性名是连续的整数时，你应该使用数组。否则，请使用对象”——Douglas Crockford
14.定义多个变量时，省略var关键字，用逗号代替

var someItem = &#39;some string&#39;; 
var anotherItem = &#39;another string&#39;; 
var oneMoreItem = &#39;one more string&#39;;// 更好的做法var someItem = &#39;some string&#39;, 
    anotherItem = &#39;another string&#39;, 
    oneMoreItem = &#39;one more string&#39;;

应而不言自明。我怀疑这里真的有所提速，但它能是你的代码更清晰。
15.使用Firebug的"timer"功能优化你的代码
在寻找一个快速、简单的方法来确定操作需要多长时间吗？使用Firebug的“timer”功能来记录结果。

function TimeTracker(){ 
 console.time("MyTimer"); 
 for(x=5000; x > 0; x--){} 
 console.timeEnd("MyTimer"); 
}

以上がJavascript で注意する必要がある詳細は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：カーソル カーソル スタイルが画像に置き換えられます次の記事：カーソル カーソル スタイルが画像に置き換えられます

関連記事

続きを見る