Existe-t-il un moyen simple de convertir du code jquery en javascript? [fermé]


142

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


8
J'étais essentiellement à la recherche de quelque chose qui a converti la ligne 1 jquery en 10 lignes javascript vanille ... pour les cas où jquery n'est pas disponible ...
davidsleeps

1
Même si vous ne pouvez pas utiliser une balise de script pour inclure jQuery, vous pouvez toujours ajouter une version minifiée au fichier source. Je ne vois aucune raison pour laquelle jQuery ne serait pas disponible autre qu'une sorte de politique d'entreprise.
cdmckay

23
Je vois aussi une bonne utilisation de cela. Suppoe que vous n'utilisez qu'environ 10 à 100 lignes en javascript avec jQuery. Cela économiserait de la bande passante en recompilant et en substituant des fonctions aux méthodes de base et ne chargerait donc pas tout le reste de jQuery.

5
J'ai la même question. Beaucoup ont répondu que jQuery est plus simple, mais un développeur déjà familiarisé avec JavaScript aura du mal à comprendre le symbole / l'abréviation dans jQuery. Et ma raison de demander est, pour une raison quelconque, le script jQuery que j'ai ne fonctionnera pas dans Blackberry. C'est un script de téléchargement Ajax. Je pense donc que je dois le traduire en Javascript :(

1
J'essaie de créer un JS-kludge dans une application existante, et toutes les fonctions JS intégrées de l'application se cassent si j'inclus jQuery. C'est une application mal écrite (JIRA d'Atlassian), et je suis sûr qu'ils sont à blâmer, mais j'ai tout de même besoin de cela.
chadoh

Réponses:


41

Le moyen le plus simple est simplement d'apprendre à parcourir et à manipuler le DOM avec l'API DOM simple (vous appelleriez probablement ceci: JavaScript normal).

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

La recherche sur Google de "javascript DOM traversing / manipulation" devrait vous présenter de nombreuses ressources utiles (et certaines moins utiles).

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

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


4
Et vous devez vous assurer de tester différentes versions de chaque navigateur.
Nosredna

1
Comment le choix du poste de travail de bureau influence-t-il l'utilisation de jQuery?
Dan Davies Brackett

5
Je sympathise avec la politique d'utilisation d'une bibliothèque open-source pour certaines organisations. En fin de compte, le temps que vous passez à réécrire clairement (et probablement buggly) en une simple traversée DOM et JS est un gaspillage d'argent pour l'entreprise. Vous pourriez faire valoir que les grandes entreprises, y compris les plus conservatrices, utilisent jQuery: docs.jquery.com/Sites_Using_jQuery : Oracle, Google, Amazon, Dell, Bank of America, Intuit, Salesforce. Ce ne sont guère des entreprises communistes hippies. Ce sont de très vraies entreprises dont les services juridiques ont probablement fait leurs devoirs et accepté jQuery ...
artlung

2
@davidsleeps - jQuery est sanctionné par Microsoft ... Il est inclus dans Visual Studio 2008, ce qui en fait techniquement un outil «Microsoft». Cela permettrait-il à votre employeur de se sentir mieux?
Robert Harvey du

4
Quelle est la différence pour votre entreprise entre jquery et tout un tas de javascript que vous avez écrit pour faire la même chose? Ce n'est pas comme si vous installiez quoi que ce soit, codiez dans une nouvelle langue ou ajoutiez des dépendances. C'est honnêtement la chose la plus stupide que j'ai entendue, autorisant javascript mais pas jQuery. jQuery EST JAVASCRIPT!
micmcg

60

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

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

Pour Ajax, l' API Fetch est désormais prise en charge sur la version actuelle de tous les principaux navigateurs . Car $.ready(), DOMContentLoadeda un support quasi universel . Vous n'aurez peut-être pas besoin de jQuery donne des méthodes natives équivalentes pour d'autres fonctions jQuery courantes.

Zepto offre des fonctionnalités similaires 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 10 Ko ne représentent que ~ 1 seconde sur un modem 56K.


22

Je viens de trouver ce tutoriel assez impressionnant sur la conversion jquery en javascript de 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 sont d'abord introduits dans 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, ce qui facilite considérablement le processus de traversée du DOM (ce pour quoi beaucoup de gens dépendent de jQuery). Malheureusement, ils ne connaissent pas ces API!

Dans cet article, nous allons prendre une variété de 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 sorcière semble être une bonne introduction à la compréhension: 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…
  });
});

Tu devrais y jeter un œil.


12

Je sais que c'est un vieux thread mais il y a 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 vers Vanilla JS


6

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

Non, surtout si:

comprendre les exemples de solutions javascript écrites en jQuery [est] difficile.

JQuery et tous les frameworks ont tendance à faciliter la compréhension du code. Si c'est difficile à comprendre, alors le javascript vanille sera une torture :)


15
d'autres ont des réponses réelles
ftrotter

2
De plus, bien que JQuery rende le code plus concis (généralement), il est discutable de savoir si cela le rend réellement plus facile . jQuery peut rendre certains codes plus difficiles à analyser mentalement. Par exemple, <input onclick="myfunction(this)">avec a myfunction(field){ field.value = "3"; }plus de sens pour moi <input id='thing'>qu'avec(function ($) { $(thing).click({ $(thing).val("3");});})()
liljoshu

6

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

16k - ou quelle que soit la bibliothèque jQuery gzippée et minifiée - peut être trop pour votre site Web destiné à un navigateur mobile. Le w3c recommande que toutes les requêtes HTTP pour les sites Web mobiles ne dépassent pas 20 Ko.

spécifications w3c pour mobile

J'apprécie donc le codage dans mon jQuery sympa, concis et enchaîné. Mais maintenant, je dois optimiser pour le mobile. Dois-je vraiment revenir en arrière et faire le travail difficile et fastidieux de réécrire toutes les fonctions d'aide que j'ai utilisées dans la bibliothèque jQuery? Ou existe-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

1

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. Il est bon de savoir ce qui se passe en dessous.


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.