ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery_jquery を模倣した効率的な JSLite コードを作成するためのヒント

JQuery_jquery を模倣した効率的な JSLite コードを作成するためのヒント

WBOYオリジナル: 2016-05-16 16:20:251251ブラウズ

jQuery と JavaScript のパフォーマンスについて議論する記事は珍しくありません。ただし、他の人が jQuery についてまとめた速度のヒントや提案に基づいて、JSLite と JavaScript コードを改善する方法を教える予定です。優れたコードは速度の向上をもたらします。高速なレンダリングと応答性により、ユーザーエクスペリエンスが向上します。

まず、JSLite は JavaScript であることを覚えておいてください。これは、同じコーディング規約、スタイルガイド、ベストプラクティスを採用する必要があることを意味します。

まず、JavaScript の初心者で jQuery を使用したことがない場合は、まず公式ドキュメントの構文紹介を読むことをお勧めします。これは高品質の JavaScript チュートリアルです。つまり、jQuery を使用していることになります。しばらく。。

JSLite を使用する準備ができたら、次のガイドラインに従うことを強くお勧めします。

キャッシュ変数

DOM トラバーサルはコストがかかるため、再利用される要素をキャッシュするようにしてください。

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

// おっと

h = $('#element').height();

$('#element').css('height',h-20);

// 提案

$要素 = $('#要素');

h = $element.height();

$element.css('高さ',h-20);

グローバル変数を避ける

JSLite は JavaScript と同じです。一般的に、変数が関数のスコープ内にあることを確認するのが最善です。

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

// おっと

$要素 = $('#要素');

h = $element.height();

$element.css('高さ',h-20);

// 提案

var $element = $('#element');

var h = $element.height();

$element.css('高さ',h-20);

ハンガリー語の命名法を使用します

JSLite オブジェクトを簡単に識別できるように、変数の前に $ プレフィックスを追加します。

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

// おっと

var first = $('#first');

var 秒 = $('#秒');

var 値 = $first.val();

// 提案 - JSLite オブジェクトの前に $
 を付けます
var $first = $('#first');

var $秒 = $('#秒'),

var 値 = $first.val();

var チェーンを使用する (単一 var モード)

複数の var ステートメントを 1 つのステートメントに統合し、未割り当ての変数を最後に置くことをお勧めします。

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

var $first = $('#first'),

$秒 = $('#秒'),

値 = $first.val(),

k = 3、

Cookiestring = 'SOMECOOKIESPLEASE',

私、

じ、

MyArray = {};

で使用してください

JSLite の新しいバージョンでは、より短い on("click") が click() のような関数の代わりに使用されます。以前のバージョンでは、 on() は binding() でした。 on() は、イベントハンドラーをアタッチする方法として推奨されます。ただし、一貫性を保つために、単に on() メソッドをまとめて使用することもできます。

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

// おっと
$first.click(function(){
$first.css('border','1px 赤一色');
$first.css('color','blue');
});

$first.hover(function(){
$first.css('border','1px 赤一色');
})
// 提案
$first.on('クリック',function(){
$first.css('border','1px 赤一色');
$first.css('color','blue');
})

$first.on('hover',function(){
$first.css('border','1px 赤一色');
})

効率化された JavaScript

一般に、可能な限り関数を組み合わせることが最善です。

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

// おっと

$first.click(function(){

$first.css('border','1px 赤一色');

$first.css('color','blue');

});

// 提案

$first.on('クリック',function(){

$first.css({

'border':'1px 赤一色',

'color':'blue'

});

});

チェーン操作

JSLite でメソッドの連鎖操作を実装するのは非常に簡単です。以下を活用してください。

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

// おっと

$sec.html(値);

$sec.on('クリック',function(){

alert('皆さんこんにちは');

});

$sec.fadeIn('slow');

$sec.animate({height:'120px'},500);

// 提案

$sec.html(値);

$sec.on('クリック',function(){

alert('皆さんこんにちは');

}).fadeIn('slow').animate({height:'120px'},500);

コードの可読性を維持する

コードを合理化し、チェーンを使用すると、コードが読みにくくなる可能性があります。ピンチや改行を追加すると、驚くべき効果が得られます。

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

// おっと

$sec.html(値);

$sec.on('クリック',function(){

alert('皆さんこんにちは');

}).fadeIn('slow').animate({height:'120px'},500);

// 提案

$sec.html(値);

$秒

.on('クリック',function(){ アラート('皆さんこんにちは');})

.fadeIn('遅い')

.animate({height:'120px'},500);

短絡評価を選択

短絡評価は、&& (論理 AND) または || (論理 OR) 演算子を使用して、左から右に評価される式です。

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

// おっと

関数 initVar($myVar) {

If(!$myVar) {

$myVar = $('#selector');

}

}

// 提案

関数 initVar($myVar) {

$myVar = $myVar || $('#selector');

}

ショートカットを選択

コードを合理化する 1 つの方法は、コーディングのショートカットを利用することです。

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

// おっと

if(コレクションの長さ > 0){..}

// 提案

if(コレクション.長さ){..}

負荷の高い操作中の要素の分離

DOM 要素に対して多くの操作 (複数の属性や CSS スタイルを連続して設定する) を実行する予定がある場合は、最初に要素を分離してから追加することをお勧めします。

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

// おっと
var
$container = $("#container"),
$containerLi = $("#コンテナli"),
$element = null;

$element = $containerLi.first();
//... 多くの複雑な操作
// より良い
var
$container = $("#container"),
$containerLi = $container.find("li"),
$element = null;

$element = $containerLi.first().detach();
//... 多くの複雑な操作
$container.append($element);

記憶力

JSLite でのメソッドの使用に慣れていない可能性があります。必ずドキュメントを確認してください。より優れた、より高速な使用方法がある可能性があります。

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

// おっと

$('#id').data(キー,値);

// 提案 (効率的)

$.data('#id',key,value);

Parent element cached using subquery

As mentioned earlier, DOM traversal is an expensive operation. A typical approach is to cache parent elements and reuse these cached elements when selecting child elements.