JavaScriptの9つの落とし穴と評点を回転します.

5891 ワード

JavaScriptの9つの落とし穴と評点を回転します.
回転http://www.52web.com/52article/?view-144.
要旨:JavaScriptが間違えやすい9つの落とし穴は、それほど高度な技術問題ではないですが、注意してください.プログラムを簡単にします.つまり、make life easuierというものです.いくつかの落とし穴に対して、いくつかの評価点が混ざります.
以下はJavaScriptの間違いやすい9つの落とし穴で、Nine Javascript Gotch asから来ます.それほど高度な技術問題ではないですが、気をつけてください.あなたのプログラムを楽にします.いわゆるmake life ease ierです.私はいくつかのトラップに対していくつかの評価点が混ざります.
1.最後のコンマ
このコードのように、最後のカンマに注意してください.言語学的にはいいはずです.IEは文法のエラーを報告しますが、言葉は不明です.人の目で数千行のコードからスキャンするしかありません.
<スクリプト>   var theObj = {   シティ : 「Boston」、   state : MA   )     
<script>
var theObj = {
city : "Boston",
state : "MA",
}
</script>
2.thisの引用は変わります.
このコードのように:
<input type=「button」 value=「Gotch!」 id=「MyButton」 >   <スクリプト>   var MyObject = 機能 () {   this.alertMessage = 「Javascript rules";   this.CC lickHandler = function() {   alert(this.alertMessage) );   )   }()   Dcument.getElemenntById("theText").onclick =  MyObject.lickHandler     
<input type="button" value="Gotcha!" id="MyButton" >
<script>
var MyObject = function () {
this.alertMessage = "Javascript rules";
this.ClickHandler = function() {
alert(this.alertMessage );
}
}();
document.getElementById(”theText”).onclick =  MyObject.ClickHandler
</script>
あなたが望むほどではないです.答えは「JavaScript rules」ではありません.MyObject.ClickHandlerを実行する時、コードの中の赤い行は、thisの引用が実際にdocument.getElement ById(「theText」)の参照を指しています.このように解決できます.
<input type=「button」 value=「Gotch!」 id=「the Text」 >   <スクリプト>   var MyObject = 機能 () {   var self = this   this.alertMessage = 「Javascript rules;   this.OnClick = function() {   alert(self.value)   )   }()   Dcument.getElemenntById("theText").onclick =  MyObject.OClick     
<input type="button" value="Gotcha!" id="theText" >
<script>
var MyObject = function () {
var self = this;
this.alertMessage = “Javascript rules”;
this.OnClick = function() {
alert(self.value);
}
}();
document.getElementById(”theText”).onclick =  MyObject.OnClick
</script>
実質的に、これはJavaScriptのスコープの問題です.ご覧になったら、解決策は一つだけではないことが分かります.
3.表示盗賊
JavaScriptではHTMLのidと同じ変数名は使わないでください.以下のコードです.
<input type=「button」 id=「The Button」   <スクリプト>   The Button = ゲット(「The Button」)     
<input type="button" id="TheButton">
<script>
TheButton = get("TheButton");
</script>
IEは対象が定義されていないエラーを報告します.
4.文字列は最初のマッチのみを置換します.
次のコード:
<スクリプト>   var fileName = 「This is a. title".replace(" ","_");     
<script>
var fileName = "This is a title".replace(" ","_");
</script>
実際には、結果としては「This_a title」です.JavaScriptでは、String.replaceの最初のパラメータは正規表現であるべきです.だから、正しいやり方はこうです.
var fileName = "This is a. title".replace(/ /g,_);  
var fileName = "This is a title".replace(/ /g,"_");
5.mouseoutはmouseinを意味する.
実は、これは事件の泡が発生したためです.IEにはmouseenterとmouseleaveがありますが、標準ではありません.著者はここで、ライブラリを使ってYUIなどの問題を解決することを提案します.
6.PArseIntは進数システムに基づくものである.
これは常識ですが、多くの人がパーrseIntを無視しました.また二つ目のパラメータを指定して進数を指定します.たとえば、パーrseInt(「09」)答えが9だと思ったら間違っています.ここでは文字列が0で始まるので、ParseIntは8進数で処理します.8進数では、09は不法です.falseに戻ります.ブール値falseは0になります.したがって、正しいやり方はparseIntです.
7.for…in…すべてを遍歴します.
このようなコードがあります.
var アール = [5,10,15]   var talk = 1;   for ( var x in arr) {   talk = talk * arr[x]   )  
var arr = [5,10,15]
var total = 1;
for ( var x in arr) {
total = total * arr[x];
}
うまくいっていますよね.でも、ある日やめて、戻ってきた値がNaNになってしまいました.ただのライブラリを導入しました.これはアーラのprototypeを書き換えました.このようにして、私たちのarr平白は属性が一つ多くなりました.for…in.これを遍歴します.これは安全です.
for ( var x = 0; x < arr.length x++) {   talk = talk * arr[x]   )  
for ( var x = 0; x < arr.length; x++) {
total = total * arr[x];
}
実は、これも汚染の基本的な種類のprototypeが危害をもたらすことができる1つの例証です.
8.イベントプロセッサの罠
これは、オブジェクト属性であるイベントプロセッサを使うだけの問題です.例えば、Windows.onclick=MyOnClickMethodのようなコードは、前のWindows.onclickイベントを複写します.IEの内容が漏れてしまう可能性があります.DOM 2のイベント登録をサポートする前に、筆者はライブラリを使って問題を解決することを勧めます.YUI:
YAHOO.util.Event.addListener(window、 「click」、 MyOnClickMethod  
YAHOO.util.Event.addListener(window, "click", MyOnClickMethod);
これも常識の問題ですが、初心者はミスをしやすいかもしれません.
9.Focus Pocus
新しいinputテキスト要素を作って、それを上にフォーカスします.このようなコードは自然であるべきです.
var newInput = document.creat Element("input")   Dcument.body.apendChild(newInput);   newInput.focus()   newInput.select();  
var newInput = document.createElement("input");
document.body.appendChild(newInput);
newInput.focus();
newInput.select();
しかし、IEはエラーを報告します.理由は、あなたがfouce()を実行する時、要素はまだ使えないかもしれません.そのため、実行を遅らせることができます.
var newInput = document.creat Element("input")   newInput.id = 「The NewInput」   Dcument.body.apendChild(newInput);   setTimeout(function(){ //ここではクローズドを使って書き換えましたが、興味があれば原文と比較してみてください.   Dcument.getElemenntById('The NewInput').focus()   Dcument.getElemenntById('The NewInput').select(),} 10)  
var newInput = document.createElement("input");
newInput.id = "TheNewInput";
document.body.appendChild(newInput);
setTimeout(function(){ //          ,          
document.getElementById('TheNewInput').focus();
document.getElementById('TheNewInput').select();}, 10);
実際には、JavaScriptの落とし穴はまだたくさんあります.多くは解像器の実現が不十分なためです.これらのものは教科書には登場しません.開発者同士の経験でしか共有できません.ありがとうございます.私たちはネット時代に住んでいます.多くの問題はGoogleで答えを見つけることができます.