곧 출시될 jQuery 3_jquery의 새로운 기능은 무엇입니까?-JS 튜토리얼-php.cn

jQuery가 탄생한 지 10년이 지났고, 그 장수에는 이유가 없지 않습니다. jQuery는 프로토타입 이후 또 다른 훌륭한 Javascript 라이브러리입니다. CSS3 및 다양한 브라우저(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)와 호환되는 경량 js 라이브러리이며 jQuery2.0 및 후속 버전은 더 이상 IE6/7/8 브라우저를 지원하지 않습니다. jQuery를 사용하면 사용자는 HTML(Standard Universal Markup Language의 응용 프로그램), 이벤트를 더 쉽게 처리하고, 애니메이션 효과를 구현하고, 웹 사이트에 AJAX 상호 작용을 쉽게 제공할 수 있습니다. jQuery의 또 다른 큰 장점은 문서가 매우 완벽하고 다양한 애플리케이션이 자세히 설명되어 있다는 점입니다. 선택할 수 있는 성숙한 플러그인도 많이 있습니다.

앞으로 몇 주 안에 jQuery는 버전 3.0의 공식 출시라는 중요한 이정표에 도달할 것입니다. jQuery 3에서는 많은 버그를 수정하고, 새로운 메서드를 추가하고, 일부 인터페이스를 제거하고, 소수의 인터페이스 동작을 수정했습니다. 이 기사에서는 jQuery 3에 도입된 가장 중요한 변경 사항을 강조하겠습니다.

새로운 기능

먼저 jQuery 3의 가장 중요한 새로운 기능에 대해 논의해 보겠습니다.

for...of 루프

jQuery 3에서는 for...of 루프 문을 사용하여 jQuery 컬렉션의 모든 DOM 요소를 반복할 수 있습니다. 이 새로운 반복 접근 방식은 ECMAScript 2015(ES6이라고도 함) 사양의 일부입니다. 이 메서드는 "반복 가능한 개체"(예: Array, Map, Set 등)를 반복할 수 있습니다.

이 새로운 반복 방법을 사용할 때 루프 본문에서 매번 얻는 값은 jQuery 개체가 아니라 DOM 요소입니다(번역: .each() 메서드와 유사함). 이 새로운 반복 방법은 jQuery 컬렉션을 작업할 때 코드를 약간 향상시킬 수 있습니다.

이 반복 방법의 작동 방식을 이해하기 위해 페이지의 각 입력 요소에 ID를 할당해야 하는 시나리오를 가정해 보겠습니다. jQuery 3 이전에는 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var $inputs = $('input');for (var i = 0; i < $inputs.length; i++) {

$inputs[i].id = '입력-' + i;

}

jQuery 3에서는 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var $inputs = $('input');var 나는 = 0 

for($inputs의 var 입력) {

input.id = '입력-' + i++;

}

(주석: 사실 jQuery 자체에는 .each() 메서드가 있는데, 이는 가독성이 나쁘지 않습니다.)

$.get() 및 $.post() 함수에 대한 새로운 서명

jQuery 3에서는 $.get() 및 $.post() 두 유틸리티 함수에 새로운 서명을 추가하여 $.ajax()의 인터페이스 스타일과 일치하게 만듭니다. 새 서명은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$.get([settings])

$.post([설정])

settings는 여러 속성을 포함하는 개체입니다. 형식은 이전에 $.ajax()에 전달한 매개변수 형식과 동일합니다. 이 매개변수 객체를 좀 더 명확하게 이해하고 싶다면 $.ajax() 페이지의 관련 설명을 참고하시기 바랍니다.

$.get() 및 $.post()의 매개변수 객체와 $.ajax()에 전달된 매개변수 간의 유일한 차이점은 전자의 메소드 속성이 항상 무시된다는 것입니다. 그 이유는 실제로 매우 간단합니다. $.get() 및 $.post() 자체에는 이미 Ajax 요청을 시작하기 위한 HTTP 메소드가 미리 설정되어 있습니다(분명히 $.get()는 GET이고 $.post()는 POST입니다). 즉, 일반 인간은 $.get() 메서드를 사용하여 POST 요청을 보내는 것을 원하지 않습니다.

다음과 같은 코드가 있다고 가정해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

$.get({

URL: 'https://www.audero.it',

메서드: 'POST' // 이 속성은 무시됩니다

~                                                                                                   // 이 속성은 무시됩니다.});

Peu importe comment nous écrivons l'attribut de méthode, cette requête sera toujours envoyée en tant que GET.

Utilisez requestAnimationFrame() pour implémenter l'animation

Tous les navigateurs modernes (y compris IE10 et supérieur) prennent en charge requestAnimationFrame. jQuery 3 utilisera cette API en interne pour implémenter des animations afin d'obtenir des effets d'animation plus fluides et plus économes en ressources.

Méthode unwrap()

jQuery 3 ajoute un paramètre de sélection facultatif à la méthode unwrap(). La nouvelle signature de cette méthode est :

Copier le code Le code est le suivant :

déballer([sélecteur])

Avec cette fonctionnalité, vous pouvez transmettre à cette méthode une chaîne contenant une expression de sélecteur et l'utiliser pour faire correspondre l'élément parent. S'il existe un élément enfant correspondant, la couche parent de cet élément enfant sera levée ; s'il n'y a pas de correspondance, aucune opération ne sera effectuée.

Fonctionnalités modifiées

jQuery 3 modifie également le comportement de certaines fonctionnalités.

:visible et :caché

jQuery 3 changera la signification des filtres :visible et :hidden. Tant que l'élément possède une zone de mise en page, même si la largeur et la hauteur sont nulles, il sera considéré comme : visible. Par exemple, les éléments br et les éléments en ligne sans contenu sont désormais sélectionnés par le filtre :visible.

Donc si votre page contient la structure suivante :

Copier le code Le code est le suivant :

Ensuite, exécutez l'instruction suivante :

Copier le code Le code est le suivant :

console.log($('body :visible') .longueur) ;

Dans jQuery 1.x et 2.x, vous obtiendriez 0 ; mais dans jQuery 3, vous obtiendriez 2.

Méthode data()

Un autre changement important est lié à la méthode data(). Son comportement est désormais cohérent avec la spécification de l'API Dataset. jQuery 3 convertira tous les noms de clés de propriété en camelCase. Regardons de plus près en prenant comme exemple l'élément suivant :

Copier le code Le code est le suivant :

< /div>

Lorsque nous utilisons des versions antérieures à jQuery 3, si nous exécutons le code suivant :

Copier le code Le code est le suivant :

var $elem = $('#container'); 

$elem.data({ 'ma-propriété': 'bonjour'});console.log($elem.data());

Vous obtiendrez les résultats suivants dans la console :

Copier le code Le code est le suivant :

{ma-propriété : "hello">

Dans jQuery 3, nous obtiendrons les résultats suivants :

Copier le code Le code est le suivant :

{myProperty : "hello">

jQuery 3에서는 속성 이름이 camelCase로 바뀌고 대시가 제거되었지만 이전 버전에서는 속성 이름이 모두 소문자로 유지되고 대시가 그대로 유지됩니다.

지연 객체

jQuery 3은 Deferred 객체의 동작도 변경합니다. Deferred 객체는 Promise 객체의 전신 중 하나라고 할 수 있으며 Promise/A+ 프로토콜과의 호환성을 구현합니다. 이 물건과 그 역사는 매우 흥미롭습니다. 더 자세히 알고 싶다면 공식 jQuery 문서를 읽어보거나 내 책 "jQuery in Practice(제3판)"을 읽어보세요. 이 책에서는 jQuery 3도 다룹니다.

jQuery 1.x, 2.x에서는 Deferred에 전달된 콜백 함수에서 catch되지 않은 예외가 발생하면 프로그램 실행이 즉시 중단됩니다(주석: 자동으로 실패하는 것은 실제로 대부분의 콜백 함수의 동작입니다). jQuery에서는 모두 이와 같습니다). 기본 Promise 객체의 경우에는 그렇지 않습니다. 예외가 발생하고 window.onerror에 도달할 때까지 위쪽으로 계속 버블링됩니다(보통 버블링의 끝점은 여기입니다). 이 오류 이벤트를 처리하는 함수를 정의하지 않으면(일반적으로 이를 수행하지 않음) 예외 정보가 표시되고 프로그램 실행이 중지됩니다.

jQuery 3은 기본 Promise 객체의 패턴을 따릅니다. 따라서 콜백 내에서 생성된 예외는 실패 상태(거부)를 발생시키고 실패 콜백을 트리거합니다. 실패 콜백이 실행되면 전체 프로세스가 계속 진행되며 이후 성공 콜백이 실행됩니다.

이 차이점을 더 잘 이해할 수 있도록 작은 예를 살펴보겠습니다. 예를 들어 다음 코드가 있습니다.

코드 복사 코드는 다음과 같습니다.

var deferred = $.Deferred();

연기

.then(function() { throw new Error('오류');

})

.then( function() { console.log('성공 1');

}, function() { console.log('실패 1');

}

)

.then( function() { console.log('성공 2');

}, function() { console.log('실패 2');

}

);

deferred.resolve();

Dans jQuery 1.x et 2.x, seule la première fonction (celle qui renvoie l'erreur) sera exécutée. De plus, comme nous n'avons défini aucun gestionnaire d'événements pour window.onerror, la console affichera "Erreur non détectée : une erreur" et l'exécution du programme sera abandonnée.

Dans jQuery 3, tout le comportement est complètement différent. Vous verrez les messages « Échec 1 » et « Succès 2 » dans la console. Cette exception sera gérée par le premier rappel d'échec et, une fois l'exception gérée, les rappels de réussite suivants seront appelés.

Document SVG

Aucune version de jQuery (y compris jQuery 3) n'a jamais officiellement prétendu prendre en charge les documents SVG. En fait, de nombreuses méthodes fonctionneront, et certaines méthodes ne fonctionnaient pas auparavant (comme celles permettant de manipuler les noms de classes), mais elles ont également été mises à jour dans jQuery 3. Par conséquent, dans jQuery 3, vous devriez pouvoir utiliser en toute sécurité des méthodes telles que addClass() et hasClass() pour manipuler des documents SVG.

Méthodes et propriétés obsolètes et supprimées

Tout en ajoutant les améliorations ci-dessus, jQuery a également supprimé et rendu obsolète certaines fonctionnalités.

Méthodes bind(), unbind(), délégué() et undelegate() obsolètes

jQuery a introduit il y a longtemps la méthode on(), qui fournit une interface unifiée pour remplacer des méthodes telles que bind(), délégué() et live(). Dans le même temps, jQuery a également introduit la méthode off() pour remplacer unbind(), undelegated() et die(). Depuis lors, bind(), délégué(), unbind() et undelegate() sont obsolètes, mais ils existent toujours.

jQuery 3 commence enfin à marquer ces méthodes comme "obsolètes", avec l'intention de les supprimer complètement dans une future version (très probablement jQuery 4). Par conséquent, veuillez utiliser les méthodes on() et off() de manière uniforme dans votre projet afin de ne pas avoir à vous soucier des modifications dans les versions futures.

Supprimer les méthodes load(), unload() et error()

jQuery 3 abandonne complètement les méthodes load(), unload() et error() qui ont été marquées comme obsolètes. Ces méthodes ont été marquées comme obsolètes il y a longtemps (à partir de jQuery 1.8) mais n'ont pas été supprimées. Si vous utilisez un plugin qui repose toujours sur ces méthodes, la mise à niveau vers jQuery 3 cassera votre code. Par conséquent, soyez attentif pendant le processus de mise à niveau.

Supprimer les attributs de contexte, de support et de sélecteur

jQuery 3 abandonne complètement les attributs tels que le contexte, le support et le sélecteur qui ont été marqués comme obsolètes. Comme ci-dessus, lors de la mise à niveau vers jQuery 3, soyez conscient des plugins que vous utilisez.

Bogues corrigés

jQuery 3 corrige quelques bugs très importants des versions précédentes. Dans cette section, je me concentrerai sur deux d’entre eux car ils devraient avoir un impact significatif sur vos habitudes de codage.

Les valeurs de retour de width() et height() ne seront plus arrondies

jQuery 3 corrige un bug dans width(), height() et d'autres méthodes associées. Les valeurs de retour de ces méthodes ne seront plus arrondies, car ce comportement d'arrondi rend le positionnement des éléments peu pratique dans certains cas.

Jetons un coup d’œil en détail. Supposons que vous ayez un élément conteneur d'une largeur de 100 px. Il contient trois éléments enfants et la largeur est d'un tiers (c'est-à-dire 33,333333 %) :

Copier le code Le code est le suivant :

Mon nom

est

Aurelio De Rosa

Dans les versions antérieures à jQuery 3, si vous essayez d'obtenir la largeur d'un élément enfant via le code suivant...

Copier le code Le code est le suivant :

$('.container div').width() ;

… alors le résultat que vous obtiendrez sera 33. La raison en est que jQuery arrondira la valeur 33,33333. Dans jQuery 3, ce bug a été corrigé, vous obtiendrez donc un résultat plus précis (c'est-à-dire un nombre à virgule flottante).

Méthode wrapAll()

jQuery 3 corrige également un bug dans la méthode wrapAll() qui se produisait lorsqu'une fonction lui était passée en paramètre. Dans les versions antérieures à jQuery 3, lorsqu'une fonction était transmise à la méthode wrapAll(), elle encapsulait individuellement chaque élément de la collection jQuery. En d’autres termes, le comportement est exactement le même que lors du passage d’une fonction à wrap().

En corrigeant ce problème, un autre changement a également été introduit : puisque dans jQuery 3, cette fonction n'est appelée qu'une seule fois, il est impossible de lui transmettre tous les éléments de la collection jQuery. Par conséquent, le contexte d'exécution de cette fonction (this) pointera uniquement vers le premier élément de la collection jQuery actuelle.

Comment télécharger jQuery 3 bêta 1

Maintenant que vous avez lu jusqu'ici, vous voudrez probablement essayer la première version bêta de jQuery 3. Vous pouvez vous procurer cette version via les deux adresses suivantes :

Version non compressée : https://code.jquery.com/jquery-3.0.0-beta1.js

Version compressée : https://code.jquery.com/jquery-3.0.0-beta1.min.js

Bien sûr, vous pouvez également le télécharger via npm :

[code]npm install jquery@3.0.0-beta1[/code]

Conclusion

Beaucoup de gens ont dénigré jQuery, affirmant qu'il n'a pas sa place dans le développement Web moderne. Quoi qu’il en soit, le développement de jQuery se poursuit et les statistiques objectives (une part de 78,5 % du million de sites Web les plus performants) mettent à mal ces arguments.

Dans cet article, je vous ai présenté certains des changements majeurs qu'apportera jQuery 3. Comme vous l'avez peut-être remarqué, il est peu probable que cette version interrompe vos projets existants car elle introduit très peu de modifications majeures. Cependant, lors de la mise à niveau vers jQuery 3, vous devez toujours garder à l'esprit certains points clés, tels que les améliorations apportées aux objets différés, etc. De même, lors de la mise à niveau d'une bibliothèque tierce, il est également nécessaire de vérifier la compatibilité du projet afin de détecter au plus tôt tout comportement inattendu et d'éviter la panne de certaines fonctions.

Note de traduction

En plus des changements mentionnés dans cet article, le plus gros changement dans jQuery 3.0 est l'abandon complet du support d'IE8. La raison pour laquelle l'équipe jQuery a pris cette décision est que Microsoft a annoncé au début de cette année qu'il cesserait de prendre en charge IE 8~10. Par conséquent, il n'est pas nécessaire que le projet jQuery Compat publié dans la phase alpha 3.0 de jQuery continue d'exister.

Cependant, comme IE8 reste l'un des navigateurs les plus populaires en Chine continentale, les développeurs nationaux devront s'en tenir à la version jQuery 1.x à court (voire moyen) terme.

Bon, on vous annonce enfin la bonne nouvelle. Pour aider les utilisateurs à effectuer une mise à niveau en douceur, jQuery fournira également cette fois un plugin de migration (plugin jQuery Migrate) pour la version 3.0. Après la mise à niveau de jQuery vers 3.0, exécutez ce plug-in en même temps pour vous assurer que le code métier existant basé sur jQuery 1.x ou 2.x s'exécute normalement en même temps, il vous le signalera également dans la console ; le code existant est différent de jQuery 3. Lieux compatibles. Une fois que vous avez corrigé ces incompatibilités, vous pouvez supprimer le plugin en toute sécurité.