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ức hợp nhất để xử lý tất cả các sự kiện đầu vào.
- Những trang web được thêm vào màn hình chính sẽ tự động được cấp quyền bộ nhớ liên tục.
Và nhiều tính năng khác.
Tôi là Pete LePage, sau đây là các 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 những thứ trên web từng rất đơn giản. Bạn có con chuột, bạn di chuyển nó xung quanh, đôi khi bạn nhấn nút và thế là xong. Nhưng cách này không mang lại hiệu quả ở đây.
Các sự kiện chạm rất tốt, nhưng để hỗ trợ cảm ứng và chuột, bạn phải hỗ trợ 2 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 gửi PointerEvents:
elem.addEventListener('pointermove', pointerMoveEvent);
Các sự kiện con trỏ sẽ hợp nhất mô hình nhập con trỏ cho trình duyệt, kết hợp thao tác chạm, bút và chuột thành một nhóm sự kiện duy nhất. 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 tiến lên để biết thêm thông tin chi tiết.
async và await
JavaScript không đồng bộ có thể khó giải thích. Dùng hàm này với tất cả các lệnh gọi lại "đáng yêu":
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 sẽ giúp tránh sự cố 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 Promise 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ợ từ khoá JavaScript async và await, cho phép bạn viết JavaScript dựa trên Promise có cấu trúc và có thể đọc được như mã đồng bộ.
Thay vào đó, hàm không đồng bộ 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ộ – đưa ra lời hứa thân thiện kèm theo đầy đủ thông tin chi tiết.
Bộ nhớ liên tục
Thời gian dùng thử liên tục theo nguyên gốc bộ nhớ hiện đã kết thúc. Giờ đây, bạn có thể đánh dấu bộ nhớ trên web là ổn định, ngăn Chrome tự động xoá bộ nhớ của trang web.
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, những 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 lưu trữ cố định.
Hãy xem bài đăng về Bộ nhớ liên tục của Chris Wilson để biết toàn bộ thông tin chi tiết cũng như cách bạn có thể yêu cầu bộ nhớ ổn định cho trang web của mình.
Dấu gạch ngang tự động của CSS
Tính năng ghép nối tự độ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 khả năng chia sẻ gốc bằng API Chia sẻ web mới, có sẵn dưới dạng bản dùng thử theo nguyên gốc. Paul (Mr. Web Intents) Kinlan có tất cả thông tin chi tiết trong bài đăng Navigator Share (Chia sẻ trình điều hướng).
Closing (Đang đóng)
Đây chỉ là một vài trong số những thay đổi trong Chrome 55 dành cho nhà phát triển.
Nếu bạn muốn nắm bắt thông tin mới nhất về Chrome và biết những điều sắp tới, hãy nhớ đăng ký và nhớ 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ố việc tuyệt vời mà nhóm Chrome đang thực hiện.
Tôi là Pete LePage và ngay sau khi Chrome 56 được phát hành, tôi sẽ có mặt ở đây để cho bạn biết những điểm mới trong Chrome!