asyncและawaitช่วยให้คุณเขียนโค้ดที่อิงตามสัญญาได้เสมือนว่าเป็นแบบซิงโครนัส แต่ไม่บล็อกเทรดหลัก- เหตุการณ์ตัวชี้เป็นวิธีรวมในการจัดการเหตุการณ์การป้อนข้อมูลทั้งหมด
- เว็บไซต์ที่เพิ่มลงในหน้าจอหลักจะได้รับสิทธิ์พื้นที่เก็บข้อมูลถาวรโดยอัตโนมัติ
และยังมีอื่นๆ อีกมากมาย
ฉันชื่อ Pete LePage มีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 55
เหตุการณ์ตัวชี้
การชี้เมาส์ไปยังสิ่งต่างๆ บนเว็บที่เคยเป็นเรื่องง่ายๆ คุณใช้เมาส์ ขยับไปรอบๆ บางครั้งก็ผลัก ปุ่มต่างๆ นี่แหละ แต่วิธีนี้กลับไม่ดีนัก
กิจกรรมการแตะทำได้ดี แต่เพื่อรองรับ การแตะและ เมาส์ คุณต้องรองรับ เหตุการณ์ 2 รูปแบบ ได้แก่
elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);
ตอนนี้ Chrome เปิดใช้การจัดการอินพุตแบบรวมแล้วด้วยการส่ง PointerEvents:
elem.addEventListener('pointermove', pointerMoveEvent);
เหตุการณ์ตัวชี้เป็นการรวมโมเดลอินพุตตัวชี้สำหรับเบราว์เซอร์ ซึ่งรวมการแตะ ปากกา และเมาส์เข้าด้วยกันเป็นเหตุการณ์ชุดเดียว ซึ่งมีการรองรับใน IE11, Edge, Chrome, Opera และรองรับบางส่วนใน Firefox
ดูรายละเอียดเพิ่มเติมได้ที่ชี้ทางไปข้างหน้า
asyncและawait
JavaScript แบบอะซิงโครนัสอาจเป็นเรื่องยาก ใช้ฟังก์ชันนี้กับโค้ดเรียกกลับที่ "น่ารัก"
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();
}
การเขียนอีเมลใหม่ด้วย promises จะช่วยหลีกเลี่ยงปัญหาการซ้อนได้ดังนี้
function logFetch(url) {
return fetch(url)
.then(response => response.text())
.then(text => {
console.log(text);
}).catch(err => {
console.error('fetch failed', err);
});
}
แต่โค้ดแบบ Promise อาจยังอ่านได้ยากเมื่อมีเชนทรัพยากร Dependency แบบไม่พร้อมกันยาวๆ
ตอนนี้ Chrome รองรับคีย์เวิร์ด JavaScript async และ await ซึ่งช่วยให้คุณเขียน JavaScript แบบ Promise ที่มีโครงสร้างและอ่านโค้ดแบบซิงโครนัสได้
แต่ฟังก์ชันอะซิงโครนัสของเราสามารถทำให้ง่ายขึ้นดังนี้
async function logFetch(url) {
try {
const response = await fetch(url);
console.log(await response.text());
}
catch (err) {
console.log('fetch failed', err);
}
}
เจตน์เขียนโพสต์เจ๋งๆ ไว้ว่า ฟังก์ชันแบบไม่พร้อมกัน - ทำให้ดูง่าย พร้อมรายละเอียดทั้งหมด
พื้นที่เก็บข้อมูลถาวร
ช่วงทดลองใช้พื้นที่เก็บข้อมูลถาวรจากต้นทางสิ้นสุดลงแล้ว ตอนนี้คุณทำเครื่องหมายพื้นที่เก็บข้อมูลเว็บเป็นแบบถาวรได้แล้ว ซึ่งจะป้องกันไม่ให้ Chrome ล้างพื้นที่เก็บข้อมูลของเว็บไซต์โดยอัตโนมัติ
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.");
});
}
นอกจากนี้ เว็บไซต์ที่มีการมีส่วนร่วมสูงซึ่งเพิ่มลงในหน้าจอหลักหรือเปิดใช้ข้อความ Push จะได้รับสิทธิ์การคงอยู่โดยอัตโนมัติ
ดูรายละเอียดทั้งหมดและวิธีขอพื้นที่เก็บข้อมูลถาวรสำหรับเว็บไซต์ของคุณได้ที่โพสต์พื้นที่เก็บข้อมูลถาวรของ Chris Wilson
การใส่ขีดกลางอัตโนมัติ CSS
การใส่ยัติภังค์อัตโนมัติของ CSS ซึ่งเป็นฟีเจอร์เลย์เอาต์ที่ขอบ่อยที่สุดอย่างหนึ่งใน Chrome ได้รับการสนับสนุนแล้วใน Android และ Mac
Web Share API
และสุดท้าย คุณเรียกใช้ความสามารถในการแชร์แบบเนทีฟได้ง่ายขึ้นด้วย Web Share API ใหม่ซึ่งมีให้บริการในช่วงทดลองใช้จากต้นทาง Paul (Mr. Web Intents) Kinlan มีรายละเอียดทั้งหมดในโพสต์ Navigator Share ของเขาแล้ว
เปิดจากขอบ
ทั้งหมดนี้เป็นเพียงการเปลี่ยนแปลงบางส่วนใน Chrome 55 สำหรับนักพัฒนาซอฟต์แวร์
หากคุณต้องการติดตามข่าวสารเกี่ยวกับ Chrome อยู่เสมอและทราบถึงสิ่งที่กำลังจะมา โปรดสมัครใช้บริการและอย่าลืมดูวิดีโอจากงาน Chrome Dev Summit เพื่อเจาะลึกสิ่งดีๆ ที่ทีม Chrome กำลังดำเนินการอยู่
ผมชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 56 ผมจะมาแจ้งให้คุณทราบว่ามีอะไรใหม่ใน Chrome!