web-dev-qa-db-fra.com

Existe-t-il un moyen simple de convertir le code jQuery en javascript?

Il existe de nombreux exemples de réalisation de certaines choses en javascript/dom à l'aide de jQuery. Cependant, l’utilisation de jQuery n’est pas toujours une option qui peut rendre difficile la compréhension des exemples de solutions javascript écrites dans jQuery.

Existe-t-il un moyen simple de convertir le code jQuery en javascript normal? Je suppose sans avoir à accéder ou à comprendre le code source de jQuery.

javascriptjquerycode-conversion
129
davidsleeps

Le moyen le plus simple consiste simplement à apprendre à faire la traversée et la manipulation de DOM avec l’API DOM simple (vous appelleriez probablement ceci: JavaScript normal).

Cela peut cependant être une douleur pour certaines choses. (c'est pourquoi les bibliothèques ont été inventées en premier lieu).

Googler pour "javascript DOM traversing/manipulation" devrait vous présenter de nombreuses ressources utiles (et certaines moins utiles).

Les articles sur ce site sont plutôt bons: http://www.htmlgoodies.com/primers/jsp/

Et comme Nosredna le fait remarquer dans les commentaires: assurez-vous de tester tous les navigateurs, car jQuery ne gérera plus les incohérences pour vous.

40
Pim Jager

Cela vous mènera à 90% du chemin; )

window.$ = document.querySelectorAll.bind(document)

Pour Ajax, le Fetch API est maintenant pris en charge sur la version actuelle de tous les principaux navigateurs . Pour $.ready(), DOMContentLoaded a prise en charge quasi universelle . Vous pourriez ne pas avoir besoin de jQuery donne des méthodes natives équivalentes pour d'autres fonctions jQuery courantes.

Zepto offre une fonctionnalité similaire mais pèse 10K zippé. Il existe des versions Ajax personnalisées pour jQuery et Zepto, ainsi que certains micro-frameworks , mais jQuery/Zepto ont un support solide et 10KB ne représentent qu’une approximation de 1 seconde sur un modem 56K.

54
Indolering

Je viens de trouver ce tutoriel assez impressionnant sur la conversion de jquery en javascript de par Jeffrey Way le 19 janvier 2012 *Copyright © 2014 Envato*:

http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/

Que cela nous plaise ou non, de plus en plus de développeurs se familiarisent avec le monde de JavaScript via jQuery. À bien des égards, ces nouveaux arrivants sont les plus chanceux. Ils ont accès à une pléthore de nouvelles API JavaScript, qui facilitent considérablement le processus de traversée de DOM (ce dont beaucoup de gens dépendent pour jQuery). Malheureusement, ils ne connaissent pas ces API!

Dans cet article, nous allons effectuer diverses tâches jQuery courantes et les convertir en JavaScript moderne et hérité.

Je l'ai proposé dans un commentaire à OP, et après sa suggestion, je le publie a une réponse à laquelle tout le monde peut se référer.

En outre, Jeffrey Way a mentionné son inspiration qui semble être un bon guide pour comprendre: http://sharedfil.es/js-48hIfQE4XK.html

A un teaser, cette comparaison de document de jQuery à javascript:

$(document).ready(function() {
  // code…
});

document.addEventListener("DOMContentLoaded", function() {
  // code…
});

$("a").click(function() {
  // code…
})

[].forEach.call(document.querySelectorAll("a"), function(el) {
  el.addEventListener("click", function() {
    // code…
  });
});

Vous devriez jeter un coup d'oeil.

20
Milche Patern

Je sais que c’est un vieux fil, mais il existe une excellente ressource montrant l’équivalent javascript natif de jquery, il inclut même des exemples ES6. C’est le plus complet que j’ai trouvé parmi les autres articles traitant de ce sujet.

jQuery to Vanilla JS

13
dan

Existe-t-il un moyen simple de convertir le code jQuery en javascript normal?

Non, surtout si:

comprendre les exemples de solutions javascript écrites dans jQuery [is] hard.

JQuery et tous les frameworks ont tendance à faciliter la compréhension du code. Si c'est difficile à comprendre, alors javascript dans Vanilla sera un supplice :)

7
Ryan Florence

Si vous voulez apprendre le javascript, regardez ces vidéos de Douglas Crockford. Ils sont très bons.

  1. Le langage de programmation Javascript: Histoire, Langage, Fonctionnalités avancées, Plates-formes, Normes, Style [ télécharger les diapositives ]
  2. Théorie du DOM [ télécharger les diapositives ]
  3. Javascript avancé: héritage, modules, débogage, efficacité, JSON [ télécharger des diapositives ]
7
bobobobo

Je peux voir une raison, sans rapport avec le message d'origine, de compiler automatiquement le code jQuery en JavaScript standard:

16k - ou quelle que soit la bibliothèque jQuery réduite et gzippée - est peut-être trop pour votre site Web destiné à un navigateur mobile. Le W3C recommande que toutes les demandes HTTP pour les sites Web mobiles soient au maximum de 20 000 $.

spécifications w3c pour mobile

J'aime donc coder dans mon jQuery Nice, laconique et lacéré. Mais maintenant, je dois optimiser pour mobile. Dois-je vraiment revenir en arrière et effectuer le travail fastidieux et fastidieux de réécriture de toutes les fonctions d'aide que j'ai utilisées dans la bibliothèque jQuery? Ou y a-t-il une sorte d'application pratique qui m'aidera à recompiler?

Ce serait très gentil. Malheureusement, je ne pense pas qu'une telle chose existe.

6
Bill Fisher

Le livre de Jeremy Keith " DOM Scripting " est une excellente introduction au travail avec Javascript et le DOM. Je le recommande vivement, que vous souhaitiez utiliser jQuery ou non. C'est bon de savoir ce qui se passe en dessous.

1
dylanfm

Il y a plusieurs bons livres disponibles. J'aime ppk sur JavaScript. Voici C Chapitre 8 sur le DOM .

1
Nosredna