Quelques conseils pour écrire du code JSLite efficace imitant JQuery_jquery

Il n'est pas rare que des articles discutent des performances de jQuery et javascript. Cependant, je prévois de vous apprendre à améliorer votre code JSLite et JavaScript en me basant sur quelques astuces et suggestions rapides que d'autres ont rassemblées pour jQuery. Un bon code apportera des améliorations de vitesse. Un rendu rapide et une réactivité signifient une meilleure expérience utilisateur.

Tout d'abord, gardez à l'esprit que JSLite est du javascript. Cela signifie que nous devons adopter les mêmes conventions de codage, guides de style et meilleures pratiques.

Tout d'abord, si vous êtes un débutant en javascript et n'avez jamais utilisé jQuery, je vous suggère de lire d'abord l'introduction à la syntaxe du document officiel. Il s'agit d'un tutoriel javascript de haute qualité, ce qui signifie que vous utilisez jQuery depuis. un moment.

Lorsque vous êtes prêt à utiliser JSLite, je vous recommande fortement de suivre ces directives :

Variables du cache

La traversée du DOM coûte cher, alors essayez de mettre en cache les éléments réutilisés.

Copier le code Le code est le suivant :

// Oups
h = $('#element').hauteur();
$('#element').css('hauteur',h-20);
// Suggestion
$élément = $('#élément');
h = $element.hauteur();
$element.css('hauteur',h-20);

Évitez les variables globales

JSLite est identique à JavaScript. De manière générale, il est préférable de s'assurer que vos variables sont dans la portée de la fonction.

Copier le code Le code est le suivant :

// Oups
$élément = $('#élément');
h = $element.hauteur();
$element.css('hauteur',h-20);
// Suggestion
var $élément = $('#élément');
var h = $element.hauteur();
$element.css('hauteur',h-20);

Utiliser la nomenclature hongroise

Ajoutez le préfixe $ avant les variables pour identifier facilement les objets JSLite.

Copier le code Le code est le suivant :

// Oups
var premier = $('#first');
var seconde = $('#seconde');
var valeur = $first.val();
// Suggestion - Préfixez les objets JSLite avec $
var $premier = $('#premier');
var $seconde = $('#seconde'),
var valeur = $first.val();

Utiliser la chaîne var (mode var unique)

Consolidez plusieurs instructions var en une seule instruction. Je recommande de mettre les variables non attribuées à la fin.

Copier le code Le code est le suivant :

var $premier = $('#premier'),
$seconde = $('#seconde'),
Valeur = $first.val(),
k = 3,
Cookiestring = 'CERTAINS COOKIESPLEASE',
je,
j,
MonTableau = {};

Veuillez utiliser sur

Dans la nouvelle version de JSLite, le plus court on("click") est utilisé pour remplacer des fonctions comme click(). Dans les versions précédentes, on() était bind() . on() est la méthode préférée pour attacher des gestionnaires d'événements. Cependant, par souci de cohérence, vous pouvez simplement utiliser la méthode on() ensemble.

Copier le code Le code est le suivant :

// Oups
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','bleu');
});

$first.hover(function(){
$first.css('border','1px solid red');
})
// Suggestion
$first.on('clic',function(){
$first.css('border','1px solid red');
$first.css('color','bleu');
})

$first.on('hover',function(){
$first.css('border','1px solid red');
})

Javascript simplifié

En général, il est préférable de combiner les fonctions autant que possible.

Copier le code Le code est le suivant :

// Oups
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','bleu');
});
// Suggestion
$first.on('clic',function(){
$premier.css({
         'border':'1px rouge uni',
         'couleur':'bleu'
});
});

Fonctionnement en chaîne

Il est très simple d'implémenter des opérations chaînées de méthodes en JSLite. Profitez-en ci-dessous.

Copier le code Le code est le suivant :

// Oups
$second.html(valeur);
$second.on('clic',function(){
alert('bonjour tout le monde');
});
$second.fadeIn('lent');
$second.animate({hauteur:'120px'},500);
// Suggestion
$second.html(valeur);
$second.on('clic',function(){
alert('bonjour tout le monde');
}).fadeIn('slow').animate({height:'120px'},500);

Maintenir la lisibilité du code

En plus de rationaliser le code et d'utiliser le chaînage, le code peut devenir difficile à lire. L’ajout de pincements et de sauts de ligne peut faire des merveilles.

Copier le code Le code est le suivant :

// Oups
$second.html(valeur);
$second.on('clic',function(){
alert('bonjour tout le monde');
}).fadeIn('slow').animate({height:'120px'},500);
// Suggestion
$second.html(valeur);
$seconde
.on('click',function(){ alert('bonjour tout le monde');})
.fadeIn('lent')
.animate({hauteur:'120px'},500);

Sélectionnez l'évaluation du court-circuit

L'évaluation de court-circuit est une expression qui s'évalue de gauche à droite, à l'aide des opérateurs && (ET logique) ou || (OU logique).

Copier le code Le code est le suivant :

// Oups
function initVar($maVar) {
Si(!$maVar) {
          $maVar = $('#selector');
>
>
// Suggestion
function initVar($maVar) {
$maVar = $maVar || $('#selector');
>

Sélectionner un raccourci

Une façon de rationaliser votre code consiste à tirer parti des raccourcis de codage.

Copier le code Le code est le suivant :

// Oups
if(collection.length > 0){..}
// Suggestion
si(collection.longueur){..}

Séparation des éléments lors d'opérations lourdes

Si vous prévoyez d'effectuer de nombreuses opérations sur les éléments DOM (définir successivement plusieurs attributs ou styles CSS), il est recommandé de séparer d'abord les éléments puis de les ajouter.

Copier le code Le code est le suivant :

// Oups
var
$conteneur = $("#conteneur"),
$containerLi = $("#container li"),
$élément = nul;

$element = $containerLi.first();
//... De nombreuses opérations complexes
// mieux
var
$conteneur = $("#conteneur"),
$containerLi = $container.find("li"),
$élément = nul;

$element = $containerLi.first().detach();
//... De nombreuses opérations complexes
$container.append($element);

Compétences de mémoire

Vous n'avez peut-être pas d'expérience dans l'utilisation des méthodes dans JSLite, assurez-vous de consulter la documentation, il existe peut-être un moyen meilleur ou plus rapide de l'utiliser.

Copier le code Le code est le suivant :

// Oups
$('#id').data(clé,valeur);
// Suggestion (efficace)
$.data('#id',clé,valeur);

使用子查詢快取的父元素

如前面所提到的，DOM遍歷是一項昂貴的操作。典型做法是快取父元素並在選擇子元素時重複使用這些快取元素。

複製程式碼 程式碼如下:

// 糟糕
var
    $container = $('#container'),
    $containerLi = $('#container li'),
    $containerLiSpan = $('#container li span');
// 建議 (高效率)
var
    $container = $('#container '),
    $containerLi = $container.find('li'),
    $containerLiSpan= $containerLi.find('span');

避免通用選擇符

將通用選擇符放到後代選擇符中，效能非常糟糕。

複製程式碼 程式碼如下:

// 糟糕
$('.container > *');
// 建議
$('.container').children();

避免隱性通用選擇子

通用選擇符有時是隱式的，不容易發現。

複製程式碼 程式碼如下:

// 糟糕
$('.someclass :radio');
// 建議
$('.someclass input:radio');

最佳化選擇符

例如，Id選擇符應該是唯一的，所以沒有必要添加額外的選擇符。

複製程式碼 程式碼如下:

// 糟糕
$('div#myid');
$('div#footer a.myLink');
// 建議
$('#myid');
$('#footer .myLink');

避免多個ID選擇符

在此強調，ID 選擇符應該是唯一的，不需要增加額外的選擇符，更不需要多個後代ID選擇符。

複製程式碼 程式碼如下:

// 糟糕
$('#outer #inner');
// 建議
$('#inner');

堅持最新版本

新版本通常更好：更輕量級，更有效率，方法更多，更全面的覆蓋jQuery方法。顯然，你需要考慮你要支援的程式碼的兼容性。例如，專案是否跑在良好的支援 HTML5/CSS3

必要時組合JSLite和javascript原生程式碼

如上所述，JSLite就是javascript，這意味著用JSLite能做的事情，同樣可以用原生程式碼來做。原生程式碼的可讀性和可維護性可能不如JSLite，而且程式碼更長。但也意味著更有效率（通常更接近底層程式碼可讀性越差，效能越高，例如：彙編，當然需要更強大的人才可以）。牢記沒有任何框架能比原生程式碼更小，更輕，更有效率（註：測試連結已失效，可上網搜尋測試程式碼）。

最後忠告

最後，我記錄這篇文章的目的是提高JSLite的性能和其他一些很好的建議。如果你想深入的研究對這個主題你會發現很多樂趣。記住，JSLite並非不可或缺，僅是一種選擇。思考為什麼要使用它。 DOM操作？ ajax？模版？ css動畫？還是選擇器？ jQuery重度開發者？