asyncvàawaitcho phép bạn viết mã dựa trên lời hứa như thể mã đó đồng bộ, nhưng không chặn luồng chính.- Sự kiện con trỏ cung cấp một cách thống nhất để xử lý tất cả sự kiện đầu vào.
- Các trang web được thêm vào màn hình chính sẽ tự động được cấp quyền bộ nhớ cố định.
Và còn nhiều tính năng khác.
Tôi là Pete LePage. Dưới đây là những tính năng mới dành cho nhà phát triển trong Chrome 55!
Sự kiện con trỏ
Việc trỏ vào các mục trên web từng rất đơn giản. Bạn có một con chuột, bạn di chuyển con chuột đó, đôi khi bạn nhấn các nút, và thế là xong. Nhưng cách này không hoạt động tốt ở đây.
Sự kiện chạm là tốt, nhưng để hỗ trợ chạm và chuột, bạn phải hỗ trợ hai mô hình sự kiện:
elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);
Chrome hiện cho phép xử lý phương thức nhập hợp nhất bằng cách điều phối PointerEvents:
elem.addEventListener('pointermove', pointerMoveEvent);
Sự kiện con trỏ hợp nhất mô hình nhập con trỏ cho trình duyệt, đưa các thao tác chạm, bút và chuột vào một nhóm sự kiện. Các trình duyệt này được hỗ trợ trong IE11, Edge, Chrome, Opera và được hỗ trợ một phần trong Firefox.
Hãy xem bài viết Chỉ đường cho tương lai để biết thêm thông tin chi tiết.
async và await
JavaScript không đồng bộ có thể khó hiểu. Hãy lấy hàm này với tất cả các lệnh gọi lại "dễ thương":
function logFetch(url) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error('xhr failed', xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.open('GET', url);
xhr.send();
}
Việc viết lại bằng promises giúp tránh được vấn đề lồng nhau:
function logFetch(url) {
return fetch(url)
.then(response => response.text())
.then(text => {
console.log(text);
}).catch(err => {
console.error('fetch failed', err);
});
}
Tuy nhiên, mã dựa trên Lời hứa vẫn có thể khó đọc khi có các chuỗi phần phụ thuộc không đồng bộ dài.
Chrome hiện hỗ trợ các từ khoá JavaScript async và await, cho phép bạn viết JavaScript dựa trên Lời hứa có thể có cấu trúc và dễ đọc như mã đồng bộ.
Thay vào đó, hàm không đồng bộ của chúng ta có thể được đơn giản hoá như sau:
async function logFetch(url) {
try {
const response = await fetch(url);
console.log(await response.text());
}
catch (err) {
console.log('fetch failed', err);
}
}
Jake có một bài đăng rất hay: Hàm không đồng bộ – tạo lời hứa thân thiện với tất cả thông tin chi tiết.
Bộ nhớ liên tục
Chương trình dùng thử nguồn gốc bộ nhớ cố định hiện đã kết thúc. Giờ đây, bạn có thể đánh dấu bộ nhớ web là bộ nhớ cố định để ngăn Chrome tự động xoá bộ nhớ cho trang web của bạn.
if (navigator.storage && navigator.storage.persist) {
navigator.storage.persist().then(granted => {
if (granted)
alert("Storage will not be cleared except by explicit user action");
else
alert("Storage may be cleared by the UA under storage pressure.");
});
}
Ngoài ra, các trang web có mức độ tương tác cao, đã được thêm vào màn hình chính hoặc đã bật thông báo đẩy sẽ tự động được cấp quyền liên tục.
Hãy xem bài đăng Bộ nhớ cố định của Chris Wilson để biết thông tin chi tiết đầy đủ và cách yêu cầu bộ nhớ cố định cho trang web của bạn.
Dấu gạch nối tự động CSS
Tự động xuống dòng CSS, một trong những tính năng bố cục được yêu cầu thường xuyên nhất của Chrome hiện được hỗ trợ trên Android và Mac.
API Chia sẻ web
Cuối cùng, giờ đây, bạn có thể dễ dàng gọi các tính năng chia sẻ gốc bằng API chia sẻ trên web mới. API này được cung cấp dưới dạng thử nghiệm gốc. Paul (Mr. Web Intents) Kinlan có tất cả thông tin chi tiết trong bài đăng Chia sẻ trình điều hướng.
Closing (Đang đóng)
Đây chỉ là một số thay đổi dành cho nhà phát triển trong Chrome 55.
Nếu bạn muốn nắm bắt thông tin mới nhất về Chrome và biết những tính năng sắp ra mắt, hãy nhớ đăng ký và xem các video từ Hội nghị nhà phát triển Chrome để tìm hiểu sâu hơn về một số tính năng tuyệt vời mà nhóm Chrome đang phát triển.
Tôi là Pete LePage. Ngay khi Chrome 56 được phát hành, tôi sẽ quay lại đây để giới thiệu cho bạn những tính năng mới trong Chrome!