JQuery 3-10'daki En Yenilikçi Özellikler

jQuery 3.0, jQuery'nin yeni büyük sürümü nihayet serbest bırakıldı. Web geliştirici topluluğu, jQuery ekibinin şimdiye kadar Haziran 2016’da yeni ana sürüm üzerinde çalışmaya başladığı Ekim 2014’ten bu yana bu önemli adımı bekledi. son sürüm dışarı.

Sürüm notu bir vaat ediyor daha ince ve daha hızlı jQuery ile geriye uyumluluk akılda. Bu yazıda, jQuery 3.0'ın bazı yeni özelliklerine göz atacağız, size JavaScript manzarasını nasıl değiştirdiği hakkında genel bir bakış sunmak için.

Nereden başlamalı?

JQuery 3.0'ı kendiniz denemek için indirmek isterseniz, indirme sayfasına gidin. Ayrıca Yükseltme Kılavuzuna veya kaynak koduna göz atmaya değer..

Mevcut projenizin jQuery 3.0 ile nasıl çalıştığını test etmek istiyorsanız, kodunuzdaki uyumluluk sorunlarını tanımlayan jQuery Migrate eklentisini deneyebilirsiniz. Ayrıca gelecekteki dönüm noktalarına göz atabilirsiniz..

Bu makale kapsamaz herşey jQuery 3.0'ın yeni özellikleri, sadece daha ilginç olanları: daha iyi kod kalitesi, yeni ECMAScript 6 özelliklerinin entegrasyonu, animasyonlar için yeni bir API, dizeleri kaçmak için yeni bir yöntem, artan SVG desteği, zaman uyumsuz geri aramalar, yanıt veren sitelerle daha iyi uyumluluk ve artan güvenlik.

1. Eski IE Geçici Çözümleri Kaldırıldı

Yeni ana sürümün ana hedeflerinden biri, bunu yapmaktı. daha hızlı ve daha şık, Bu nedenle IE9 ile ilgili eski kesmek ve geçici çözümler- kaldırıldı. Bu, IE6-8'i desteklemek istiyorsanız veya desteklemeniz gerekiyorsa, en son kullanmaya devam etmeniz gerekir. 1.12 gibi 2 kere serisi, eski Internet Explorer'lar için tam destek almamaktadır (IE9-). Belgelerde tarayıcı desteği ile ilgili notlara göz atın.

Ayrıca olduğunu unutmayın kullanımdan kaldırılan birçok özellik jQuery 3'te Yükseltme Kılavuzunun büyük bir eksikliği, kullanımdan kaldırılan özelliklerin - Haziran 2016 itibariyle - gruplandırılmadığıdır, bu nedenle bunlarla ilgileniyorsanız, tarayıcınızın arama aracına bakmanız gerekir ( Ctrl + F).

2. jQuery 3.0 Sıkı Modda Çalışır

JQuery 3 tarafından desteklenen çoğu tarayıcı katı modu desteklediğinden, yeni ana sürüm bu direktif göz önünde bulundurularak oluşturulmuştur..

Her ne kadar jQuery 3 katı modda yazılmış olsa da bunu bilmek önemlidir. Kodunuz katı modda çalıştırmak için gerekli değildir, yani sen yeniden yazmaya gerek yok jQuery 3’e geçmek istiyorsanız mevcut jQuery kodunuzu girin. mutlu bir şekilde bir arada var olabilir.

Bir istisna var: ASP.NET'in bazı sürümleri Bu - katı mod nedeniyle - jQuery 3 ile uyumlu değil. ASP.NET ile ilgileniyorsanız, buradaki belgelerde ayrıntılara bir göz atabilirsiniz..

3. Döngüler için… Tanıtıldı

jQuery 3 ifadesi için… yeni bir tür için ECMAScript 6'da tanıtılan döngü. Daha basit bir yol sağlar. yinelenebilir nesneler üzerinde döngü, Diziler, Haritalar ve Kümeler gibi.

JQuery'de ... için döngü eski yerini alabilir $ .each (…) sözdizimi ve jQuery koleksiyonundaki öğeler arasında gezinmeyi kolaylaştırabilir.

Unutmayın ... için döngü olacak sadece iş ya bir ortamda ECMAScript 6'yı destekliyor, veya eğer JavaScript derleyici kullanın Babil gibi.

4. Animasyonlar Yeni Bir API Aldı

jQuery 3, animasyon yapmak ve animasyon yapmak için requestAnimationFrame () API'sini kullanır. daha yumuşak ve hızlı koş. Yeni API yalnızca onu destekleyen tarayıcılarda kullanılır; eski tarayıcılar için (ör. IE9) jQuery, önceki API'sini, animasyonları görüntülemek için bir geri dönüş yöntemi olarak kullanır.

requestAnimationFrame Ne zamandır bildiği veya neden kullanmanız gerektiği ile ilgileniyorsanız, CSS Tricks’in iyi bir yayını var..

5. Özel Anlamı Olan Dizeleri Kaçmak İçin Yeni Yöntem

Yeni jQuery.escapeSelector () Bu yöntem, karakterlerden veya karakterlerden kaçmanıza izin verir. CSS’de başka bir şey demek yapabilmek için jQuery seçicide kullanın; JavaScript tercüman kaçmadan olmadan doğru anlayamıyorum.

Dokümanlar, aşağıdaki yöntemi kullanarak bu yöntemi daha iyi anlamamıza yardımcı olur:

“Örneğin, sayfadaki bir öğenin kimliği varsa “abc.def” ile seçilemez $ ("# abc.def") çünkü seçici olarak ayrıştırıldı “kimliği olan bir öğe 'ABC' o da bir sınıfa sahip 'Def'. Ancak, ile seçilebilir $ ("#" + $ .escapeSelector ("abc.def")).”

Böyle bir durumun ne sıklıkta gerçekleştiğinden emin değilim, ancak böyle bir soruna rastlarsanız, hemen düzeltmek için kolay bir yolunuz var..

6. Sınıf Manipülasyon Yöntemleri SVG'yi Destekler

Ne yazık ki, jQuery 3 hala SVG'yi tam olarak desteklemiyor, ancak CSS sınıfı adlarını işleyen jQuery yöntemleri, örneğin .addClass () ve .hasClass (), şimdi kullanılabilir SVG belgelerini hedefleyin yanı sıra. Bu, jQuery ile değiştirebileceğiniz (ekle, kaldır, değiştir) veya sınıfları bulabileceğiniz anlamına gelir Ölçeklenebilir Vektör Grafiğinde, sonra sınıfları CSS ile stillendirin.

7. Ertelenen Nesneler Şimdi JS Sözleriyle Uyumludur

JavaScript Promises - kullanılan nesneler asenkron hesaplamalar için - ECMAScript 6'da standardize edilmiştir; davranışları ve özellikleri Promises / A + standartlarında belirtilmiştir..

JQuery 3’te, Ertelenen nesneler Yeni Promises / A + standartlarıyla uyumlu hale getirildi. Ertelenen zincirlenebilir nesneler mümkün kılan geri arama kuyrukları oluştur.

Yeni özellik değişiyor zaman uyumsuz geri çağırma işlevleri nasıl yürütülür; sözler geliştiricilerin, mantıksal olarak senkron koduna daha yakın olan zaman uyumsuz kod yazmalarına izin verme.

Yükseltme Kılavuzundaki kod örneklerine bakın veya JavaScript Promises'ın temelleri hakkındaki bu harika Scotch.io eğitimine bakın..

8. jQuery.when () Çoklu Argümanları Farklı Olarak Yorumluyor

$ .Her () yöntem bir yol sağlar geri arama işlevlerini yürütme. 1.5 sürümünden beri jQuery'nin bir parçası. Esnek bir yöntemdir; ayrıca sıfır argümanlarla çalışır ve bir veya daha fazla nesneyi argüman olarak kabul edebilir..

jQuery 3 nasıl argümanlarının şeklini değiştirir $ .Her () yorumlanır içerdiklerinde $ .O () yöntem ek geri aramaları argüman olarak iletebileceğiniz $ .Her () yöntem.

JQuery 3'te, ile bir giriş bağımsız değişkeni eklerseniz, sonra() yöntem $ .Her (), argüman olacak Promise uyumlu bir "thenable" olarak yorumlandı.

Bu demektir ki $ .her yöntem mümkün olacak yatılı giriş aralığını kabul et, Yerel ES6 Promises ve Bluebird Promises gibi, daha karmaşık zaman uyumsuz geri aramalar yazmayı mümkün kılar.

9. Yeni Şov / Mantık Gizle

Artırmak için duyarlı tasarımla uyumluluk, ile ilgili kod öğeleri gösterme ve gizleme jQuery 3 güncellendi.

Şu andan itibaren .göstermek(), .saklamak(), ve .mafsallı () yöntemler üzerinde durulacak satır içi stilleri, hesaplanan stiller yerine, bu şekilde olacak stil sayfası değişikliklerine daha iyi saygı gösterme.

Yeni kod Görüntüle mümkün olduğunda stil sayfalarının değerleri; bu, CSS kurallarının yapabildiği anlamına gelir. dinamik olarak değiştir Cihaz yeniden düzenleme ve pencere yeniden boyutlandırma gibi olayların üzerine.

Dokümanlar en önemli sonucun olacağını iddia ediyor:

"Sonuç olarak, bağlantısı kesilen öğeler artık gizli sayılmaz satır içi olmadıkça görüntü yok;, ve bu nedenle .mafsallı () irade artık onları ayırt etmeyin jQuery 3.0'dan itibaren bağlı elemanlardan. "

Daha iyi anlamak istiyorsanız Yeni show / hide mantığının sonuçları, işte bunun hakkında ilginç bir Github tartışması..

jQuery geliştiricileri, yeni davranışın nasıl çalışacağına dair bir Google Dokümanlar tablosu yayınladı farklı kullanım durumlarında.

10. XSS Saldırılarına Karşı Ekstra Koruma

jQuery 3 eklendi Ekstra bir güvenlik katmanı geliştiricilerin belirtmesini gerektiren Siteler Arası Kod Yazma (XSS) saldırılarına karşı dataType: "script" seçeneklerinde $ .Ajax () ve $ .Get () yöntemleri.

Başka bir deyişle, etki alanları arası komut dosyası isteklerini yürütmek istiyorsanız, bunu beyan etmeli bu yöntemlerin ayarlarında.

Belgelere göre, yeni gereksinim, "uzak bir site" olduğunda kullanışlıdır. komut dosyası olmayan içerik sunar ama sonra karar verir kötü niyetli bir amacı olan bir komut dosyası sun". Değişiklik etkiyi etkilemiyor $ .GetScript () yöntem, belirlediği gibi dataType: "script" açıkça seçeneği.