効率的なJavaScript記述スキル集_JavaScriptスキル-jsチュートリアル-php.cn

効率的なJavaScript記述スキル集_JavaScriptスキル

WBOY

リリース： 2016-05-16 17:24:38

オリジナル

992 人が閲覧しました

最近、JavaScript フレームワークを作成していましたが、多くの詳細に十分な注意が払われていないことがわかりました。長期にわたる蓄積により、フレームワークが実際に適用されるときに重大な効率の問題が発生するのではないかと心配しています。そこで私は JavaScript の効率を向上させるためのいくつかのテクニックに注目し始めたので、ここで共有したいと思います。

1. JavaScript は、より小さいコードサイズを必要とする唯一の言語であるため、JSMin、Packer、YUICompressor などのいくつかのツールを使用して JavaScript コードを合理化および圧縮できます。これらのツールは、ローカル変数名を短い変数名 (parseFloat() を a() に置き換えるなど) に置き換えます。したがって、JavaScript コードを作成するときは、var parseFloat = parseFloat;

2 のように、各グローバル変数をローカル変数にマップする必要があります。JSLint を使用して、作成した JavaScript を検出すると、隠されたものがたくさん見つかります。その中での質問。 JSLint は、JavaScript ソースコードをスキャンして問題を検出できる JavaScript 検証ツール (オープンソースではありません) です。 JSLint が問題を検出した場合、JSLint は問題を説明し、ソースコード内のエラーのおおよその位置を示すメッセージを表示します。

3. JavaScript を記述するとき、コードは次のとおりです:

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

 
for (var i=0;i//何かを行います 
} 

JavaScript 変数のメンバーは実行時に決定されるため、ループを通じて毎回配列の長さプロパティを検索する必要があるため、配列サイズを格納する変数を追加できます:

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

 
var l = array.length 
for (var i=0;i< ;l;i ){ 
//何かをします 
} 

これは良い最適化のように見えますが、実際にはもっと良くすることができます:

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

 
var i=array.length; 
while(i--){ 
//do something 
} 

これは、これら 2 行のコードがアセンブリに変換されると、while ステートメントに必要な命令が少なくなるからです。興味があれば、アセンブリを勉強することができます。

4. JavaScript では誰でも Object.prototype のプロパティを変更したり追加したりできるため、オブジェクトのプロパティを走査するときは、最初に hasOwnProperty を使用して、プロトタイプチェーン全体を走査して効率に影響を与えないように判断する必要があります。。例:

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

 
for (obj の var key ) { 
if (obj.hasOwnProperty(key)) { 
//do something 
} 
} 

5. unknown を使用する場合は、最初にローカル変数を定義します。未定義

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

 
var checkVal = function(val) { 
var unknown; 
return val !== unknown;

上記のコードでは、ローカル変数が事前に定義されていない場合、グローバル変数は次のようになります。第三者が別の場所にある場合、グローバル変数 unknown=3 を定義すると、誤った結果が得られます。

6. 非文字列型変数を文字列型に変換する場合、

コードを直接使用できますコードは次のとおりです:

var str = (i "").replace(...);

この場所は String(i ）がよく使われます。

7. 配列を定義するときに、配列クラスのソートやその他のメソッドを使用する必要がなく、一般的な代入とアクセスのみを実行する場合は、

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

var array = {}; 
 の代わりに 

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

var array = new Array(); 🎜>
そうでない場合、これは数値変数を定義するときに var i = new Number(1) と記述するのと同じくらい無意味です

8 jQuery を使用する場合は、同じコード行で同じオブジェクトに対して複数の関数を実行してみてください。例:

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

$("p.ニート") .addClass("ohmy").show("slow");

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

 
$("p.neat").addClass("ohmy"); 
$("p.neat").show( "slow"); 

その他のヒントには、DocumentFragment を使用して複数の追加を最適化すること、childNodes の代わりに firstChild と nextSibling を使用して dom 要素を走査することなどが含まれます。
詳細については、このブログを参照してください: http://www.nowmagic.net/librarys/veda/detail/363
この記事は次の記事も参照しています: http://www.cnblogs.com /ジャスティンw /archive/2009/12/07/1618500.html