Javascript Girl
  1. Javascript Girl
  3. AngularJS vs (AnguarJS + jQuery)
Intereting Posts
JS – Obtenez la largeur et la hauteur de l'image à partir du code base64 JQuery UI – Erreur: ne peut pas appeler les méthodes sur la boîte de dialogue avant l'initialisation; A tenté d'appeler la méthode 'open' Comment éditer un lien dans un contenuEditable div Comment passer css: pseudo-classe active à javascript? Vérifiez si l'image existe sur le serveur en utilisant JavaScript? Outils de développement Safari: comment conserver la navigation sur la connexion? Javascript: vérifier si la page est en haut L'effet de superposition flou d'iOS 7 à l'aide de CSS? Signe dollar suivi d'un crochet carré dans une chaîne de modèles Google Maps Drawing Manager limite un polygone JavaScript Object.keys () méthode alternative pour la compatibilité avec IE8 Ajax url parametetr en utilisant le chemin Twig Comment puis-je remplacer window.screen? Remplacement de chaîne Javascript efficace JQuery remplace une partie du texte en <p> avec un <img>

AngularJS vs (AnguarJS + jQuery)

J'ai une question sur la performance lorsque vous utilisez seulement AngularJS avec JavaScript pur et lorsque vous utilisez AngularJS avec jQuery.

ex: 

app.directive('fitHeight', function($window) { return { restrict: 'A', link: function(s){ s.contentminHeight = $window.innerHeight - 40 + 'px'; var h = $window.innerHeight; $(window).resize(function() { if ( h !== $window.innerHeight ) { h = $window.innerHeight; s.contentminHeight = ( h - 40 ) + 'px'; s.$apply(); } }); } }; });

J'ai vu que la vérification avec AngularJS de $ redimensionnement des fenêtres est obsolète, et d'autres options étaient de créer un intervalle à vérifier, j'ai trouvé jquery.resize plus acceptable.

ou 

 app.directive('leftmenuDropdown', function() { return { restrict: 'C', link: function(s, e){ e.click(function(){ var m = $(e.parent().find("ul")[0]); if ( m.hasClass('dd-open') ) { m.removeClass('dd-open') } else { m.addClass('dd-open') } }); } }; });

Je recherche sur google et j'ai compris que .hasClass est plus rapide que JavaScript pur.

A propos de la performance, que dois-je faire? Pour garder jQuery avec AngularJS ou utiliser uniquement AngularJS avec JS pur?

Angularjs est livré avec jqLite

  • Vous pouvez avoir presque beaucoup de fonctionnalités nécessaires, reposez-moi, j'ai créé une application avec jQuery + Angular et j'ai des conflits à plusieurs reprises lorsque l'application est hors de portée.

L'angulaire est largement répandu

  • Vous trouverez un support pour cela, vous obtenez pour jQuery, vous pouvez commencer par angular (jqLite) lui-même.

Performance

  • Bien sûr, le chargement de deux bibliothèques lourdes / cadre et de maintien de leur équilibre vous coûtera plus cher.

Je cherchais les performances de la requête DOM des bibliothèques et j'ai vu les résultats ci-dessous: 

 vanilla - document.getElementById('test-table') => 12,137,211 (ops/sec) Dojo - dojo.byId('test-table') => 5,443,343 (ops/sec) Prototype - $('test-table') => 2,940,734 (ops/sec) jQuery - $('#test-table') => 350,557 (ops/sec) YUI - YAHOO.util.Dom.get('test-table') => 326,534 (ops/sec) MooTools - document.id('test-table') => 78,802 (ops/sec)

Vous pouvez trouver d'autres détails sur la performance ici . Cela donne à peu près l'idée de performance sur les indigènes plutôt que la comparaison entre les bibliothèques / cadres. Mais vous devez également considérer les spécifications comme cross-browser et l'environnement que vous utilisez. En général, Angular vous lie à ses propres méthodes (comme les directives) sur les opérations DOM, et dans le système angulaire, l'édition de DOM par des fonctions jquery ou natives peut entraîner une dysfonctionnement. Si vous savez ce que vous faites, le nombre ci-dessus montre les résultats de performance