jQuery 1'den 3'e version yükseltme hk.
Merhabalar,
Bir sitede jQuery 1.12 sürümü kullanıyor. Bunu son sürüm olan 3.6'ya yükseltmek istiyorum.
Bu sürüm farkları arasında elbette artık farklı kullanım & kullanılmayan yazım şekilleri vs süreç içerisinde gelişmiştir.
Dolayısı ile düzgün çalışmaya devam edebilmesi için, nasıl bir yol izlemem gerekiyor?
Örneğin; custom.js dosyasında kullanılan kodları bir editöre yapıştırıp, JS sürümünü 3.6 seçerek hata veren yerleri bulabilmemi sağlayacak bir site veya benzer mantıkta bir araç var mıdır?
Bu tarz durumlarda nasıl bir aksiyon alıp kontrol edebiliriz?
https://jquery.com/upgrade-guide/3.0/
Bu saufada tam olarak geçiş için neler yapılması gerektiğini anlatıyor.
Ayrıca bu kaynakta JQuery Migrate Plugin başlığı altında şöyle yazıyor:
jQuery 1.9/2.0'da yapılan büyük değişikliklerde olduğu gibi, eski kodun 3.0 sürümüne geçişini basitleştirmek için jQuery Migrate Plugin'in yeni bir sürümünü oluşturduk. Bu eklentiyi bir yükseltme aracı olarak kullanmanızı şiddetle tavsiye ederiz, kodunuzu etkileyebilecek büyük değişikliklerin çoğu hakkında özel tavsiyeler verecektir.
Sonra da aynı başlık altında adım adım ne yapmanız gerektiği anlatılmış.
1. Önce sayfada kullandığınız jquery sürümünü 1.x veya 2.x'in en son sürümüne yükseltin. Yani mesela 1.12.0 sürümünü kullanıyorsanız artık 1.12.4 sürümünü kullanın.
2. Sıkıştırılmamış jQuery Migrate 1.x Eklentisini sayfaya ekleyin.
3. Mecbur değil ama önerilir: sonraki sürümler genellikle jQuery'nin en son sürümleriyle en uyumlu olduğundan, kullanımda olan tüm eklentileri güncelleyin.
4. Bir kılavuz olarak JQMIGRATE 1.x uyarı dokümantasyonunu kullanarak sayfayı test edin ve konsolda görünen tüm uyarıları çözün.
5. JQuery Migrate 1.x eklentisini kaldırın ve sayfadaki güncellenmiş jQuery kodunun yalnızca en son jQuery 1.x/2.x kullanımdayken düzgün şekilde çalışmaya devam etmesini sağlayın. Yani sayfanız migrate olmadan JQuery 1.12.4 ile düzgün şekilde çalışabiliyor durumda olsun.
-- Eğer sizin sayfanızda zaten JQuery 1.12.4 yüklüyse ve hiç hata almıyorsanız direkt 6.adımdan da başlayabilirsiniz.
6. Sayfadaki jQuery sürümünü en son 3.x sürümüne (3.6.1) yükseltin ve sıkıştırılmamış jQuery Migrate 3.x eklentisini sayfaya ekleyin.
7. JQMIGRATE 3.x uyarı dokümantasyonunu kılavuz olarak kullanarak sayfayı test edin ve konsolda görünen tüm uyarıları çözün. Üçüncü taraf eklentilerdeki hataları eklenti yazarına bildirin çünkü bu eklenti yeni jquery sürümüyle uyumlu çalışamıyor olabilir.
8. jQuery Migrate 3.x eklentisini kaldırın ve sayfanın düzgün şekilde çalışmaya devam etmesini sağlayın.
Sadece hızlıca bir göz atmanız da yetebilir belki.
Ben çok kullanılan bazı fonksiyonlardaki değişimleri yazdım:
1. Kodunuzda $(window).load()
kullanımı varsa bunu $(window).on('load')
şeklinde değiştirmelisiniz.
$(window).load(function() {
// ...kodlar
}
yerine şu olmalı:
$(window).on('load', function() {
// ...kodlar
}
).load(function
geçen ifadeleri ).on('load', function
şeklinde bul-değiştir mantığıyla değiştirebilirsiniz.
2. Kullanılan tarayıcıyı algılamak için artık $.browser
kullanamazsınız. Kullanılan tarayıcıyı tespit etmenin başka yollarını kullanmalısınız.
if ($.browser == 'MSIE') {
// Ben internet explorer'ım diyen kodlar...
}
// yerine şöyle bir kod kullanılabilir:
const regex = RegExp('MSIE*');
if (regex.test(navigator.userAgent)) {
// Ben internet explorer'ım diyen kodlar...
}
3. addSelf()
yerine addBack()
kullanın. Basitçe bul-değiştir mantığıyla halledebilirsiniz.
1,2,3 için Kaynak: https://www.computerminds.co.uk/articles/upgrading-jquery-1x-version-3x
4. size()
yerine length
kullanın. Kaç eleman seçtiğinizi length
ile öğrenebilirsiniz.
5. $.unique()
fonksiyonunun adı değişti: $.uniqueSort()
. İşlevi aynı, sadece fonksiyon adı değişti.
6. $.ready
ifadesi destekleniyor. $.when
ile veya Promise
yapılarıyla kullanılabilir. Örn:
$.when( $.ready, $.getScript("optional.js") ).then(function() {
// document hazır olduğunda optional.js yüklenip çalıştırlacak...
}).catch( function() {
// işlem sırasında bir hata oluşmuşsa burası çalışacak...
});
7. .width()
, .height()
, .css("width")
, and .css("height")
eskiden hep tam sayı olarak dönerdi. Artık daha hassas veri döndüğü için tam sayı yerine küsüratlı sayı da dönebilir.
8. .on("ready", fonksiyon)
kaldırıldı. Bunun yerine $(fonksiyon)
kullanın.
9. .bind()
ve .delegate()
kaldırıldı. Bunlar yerine .on()
var. Aynı şekilde .unbind()
ve .undelegate()
yerine de .off()
kullanılmalı.
4-9 Kaynak: https://jquery.com/upgrade-guide/3.0/