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

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.

Copy code The code is as follows:

// Oops
var
$container = $('#container'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container li span');
// Suggestion (efficient)
var
$container = $('#container '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');

Avoid universal selectors

Putting the universal selector into a descendant selector has terrible performance.

Copy code The code is as follows:

// Oops
$('.container > *');
// Suggestion
$('.container').children();

Avoid implicit universal selectors

Universal selectors are sometimes implicit and difficult to find.

Copy code The code is as follows:

// Oops
$('.someclass :radio');
// Suggestion
$('.someclass input:radio');

Optimization selector

For example, the Id selector should be unique, so there is no need to add additional selectors.

Copy code The code is as follows:

// Oops
$('div#myid');
$('div#footer a.myLink');
// Suggestion
$('#myid');
$('#footer .myLink');

Avoid multiple ID selectors

I emphasize here that the ID selector should be unique, there is no need to add additional selectors, and there is no need for multiple descendant ID selectors.

Copy code The code is as follows:

// Oops
$('#outer #inner');
// Suggestion
$('#inner');

Stick to the latest version

New versions are usually better: more lightweight, more efficient, with more methods, and more comprehensive coverage of jQuery methods. Obviously, you need to consider the compatibility of the code you want to support. For example, does the project run on good support for HTML5/CSS3

Combine JSLite and javascript native code when necessary

As mentioned above, JSLite is javascript, which means that anything you can do with JSLite can also be done with native code. Native code may not be as readable and maintainable as JSLite, and the code may be longer. But it also means more efficient (usually the closer to the underlying code the less readable the higher the performance, for example: assembly, which of course requires more powerful people). Keep in mind that no framework can be smaller, lighter, and more efficient than native code (note: the test link is no longer valid, you can search for the test code online).

Final advice

Finally, I record this article with the purpose of improving the performance of JSLite and some other good suggestions. If you want to delve deeper into this topic you will find a lot of fun. Remember, JSLite is not required, just an option. Think about why you want to use it. DOM manipulation? ajax? stencil? css animation? Or a selector? Heavy jQuery developer?