- Chrome 63, JavaScript modüllerini dinamik olarak içe aktarmanıza olanak tanır.
- En sevdiğim mülakat kodlama sorusu, asynchronize iteratör ve üreteçler sayesinde çok kolay bir hale geliyor.
- CSS
overscroll-behavior
mülküyle tarayıcının varsayılan taşma kaydırma davranışını geçersiz kılabilirsiniz. - Ayrıca, kullanıcılardan izin isteğinde bulunma isteğinde bulunma şeklini değiştirdik.
Daha birçok özellik de var.
Adım Pete LePage. Chrome 63'te geliştiriciler için neler yeniye göz atalım.
Değişikliklerin tam listesini görmek ister misiniz? Chromium kaynak deposu değişiklik listesine göz atın.
Dinamik modül içe aktarma işlemleri
JavaScript modüllerini içe aktarmak çok kullanışlıdır ancak statiktir. Modülleri çalışma zamanı koşullarına göre içe aktaramazsınız.
Neyse ki Chrome 63'te yeni dinamik içe aktarma söz dizimi ile bu durum değişti. Çalışma zamanında modüllere ve komut dosyalarına kodu dinamik olarak yüklemenizi sağlar. Bir komut dosyasını yalnızca gerektiğinde yüklemek için kullanılabilir ve böylece uygulamanızın performansını iyileştirir.
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
});
});
Kullanıcı sayfanıza ilk geldiğinde uygulamanızın tamamını yüklemek yerine, oturum açmak için ihtiyaç duyduğunuz kaynakları alabilirsiniz. İlk yüklemeniz küçük ve çok hızlı olmalıdır. Ardından, kullanıcı oturum açtıktan sonra geri kalanı yükleyin.
Eşzamansız iteratör ve jeneratörler
async
işlevleriyle herhangi bir tür yineleme yapan kod yazmak can sıkıcı olabilir.
Hatta en sevdiğim kodlama mülakatı sorusunun ana kısmı budur.
Artık asynchronize oluşturucu işlevleri ve asynchronize iterasyon protokolüyle akış veri kaynaklarının tüketimi veya uygulanması kolaylaştı ve kodlama sorum çok daha kolay hale geldi.
async function* getChunkSizes(url) {
const response = await fetch(url);
const b = response.body;
for await (const chunk of magic(b)) {
yield chunk.length;
}
}
Arayüzdeki iterasyonlar, for-of
döngülerinde ve ayrıca arayüzdeki iterasyon fabrikaları aracılığıyla kendi özel arayüzdeki iterasyonlarınızı oluşturmak için kullanılabilir.
Ekranı aşırı kaydırma davranışı
Sayfayla etkileşime geçmenin en temel yollarından biri kaydırma olsa da belirli kalıplarla başa çıkmak zor olabilir. Örneğin, tarayıcıların sayfanın üst kısmından aşağı kaydırarak yenileme özelliğini kullanması, sayfanın tamamen yeniden yüklenmesine neden olur.
Tam sayfa yenilemeyle önceden.
Ardından yalnızca içeriği yenileyin.
Bazı durumlarda bu davranışı geçersiz kılmak ve kendi deneyiminizi sağlamak isteyebilirsiniz. Twitter'ın progresif web uygulaması da bunu yapar. Sayfayı aşağı kaydırdığınızda sayfanın tamamını yeniden yüklemek yerine yeni tweet'leri mevcut görünüme ekler.
Chrome 63 artık CSS overscroll-behavior
mülkünü destekliyor. Bu sayede, tarayıcının varsayılan taşma kaydırma davranışını geçersiz kılabilirsiniz.
Bu işlemle aşağıdakileri yapabilirsiniz:
- Kaydırma zincirleme işlemini iptal etme
- Sürükle ve yenile işlemini devre dışı bırakma veya özelleştirme
- iOS'te lastik bant efektlerini devre dışı bırakma
- Kaydırmayla gezinme ekleme
- Ve daha fazlası...
En iyi yanı, overscroll-behavior
'ün sayfa performansınızı olumsuz etkilememesidir.
İzin kullanıcı arayüzü değişiklikleri
Web push bildirimlerini seviyorum ancak sayfa yüklenirken herhangi bir bağlam olmadan izin isteyen sitelerin sayısı beni gerçekten rahatsız ediyor. Bu konuda yalnız değilim.
Tüm izin isteklerinin% 90'ı yoksayılır veya geçici olarak engellenir.
Chrome 59'da, kullanıcı isteği üç kez reddettiyse izni geçici olarak engelleyerek bu sorunu gidermeye başladık. M63'te Android için Chrome, izin isteklerini modal iletişim kutuları olarak gösterecek.
Bu durumun yalnızca push bildirimleri için değil, tüm izin istekleri için geçerli olduğunu unutmayın. Uygun zamanda ve bağlama uygun bir şekilde izin istediğinizde kullanıcıların izin verme olasılığının iki buçuk kat daha yüksek olduğunu tespit ettik.
Diğer özellikler
Bunlar, Geliştiriciler için Chrome 63'teki değişikliklerden yalnızca birkaçıdır. Elbette daha birçok değişiklik vardır.
finally
artıkPromise
örneklerinde kullanılabilir ve birPromise
yerine getirildikten veya reddedildikten sonra çağrılır.- Yeni Cihaz Hafızası JavaScript API'si, kullanıcının cihazındaki toplam RAM miktarı hakkında ipuçları vererek performans kısıtlamalarını anlamanıza yardımcı olur. Deneyimi çalışma zamanında özelleştirerek düşük kaliteli cihazlarda karmaşıklığı azaltabilir, kullanıcılara daha az sorun yaşatarak daha iyi bir deneyim sunabilirsiniz.
Intl.PluralRules
API, belirli bir sayı ve dil için hangi çoğul biçimin geçerli olduğunu belirterek belirli bir dilin çoğul biçimini anlayan uygulamalar oluşturmanıza olanak tanır. Sıralamalı sayılar konusunda da yardımcı olabilir.
Yeni video yayınladığımızda e-posta bildirimi almak için YouTube kanalımıza abone olun.
Adım Pete LePage. Chrome 64 yayınlanır yayınlanmaz Chrome'daki yenilikleri size bildirmek için burada olacağım.