ฟีเจอร์ใหม่ใน Chrome 72

พีต เลอเพจ

ใน Chrome 72 เราได้เพิ่มการสนับสนุนสำหรับ

  • ตอนนี้การสร้างช่องคลาสสาธารณะใน JavaScript จะง่ายขึ้นมาก
  • คุณสามารถดูว่าหน้าเว็บเปิดใช้งานแล้วหรือไม่โดยใช้ User Deployment API ใหม่
  • การแปลรายการจะง่ายขึ้นด้วย Intl.format() API

นอกจากนี้ยังมีอีกมากมาย

ฉันชื่อ Pete LePage มาเจาะลึกกันเลยว่า มีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 72!

บันทึกการเปลี่ยนแปลง

ซึ่งจะกล่าวถึงไฮไลต์ที่สำคัญเพียงบางส่วนเท่านั้น โปรดดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 72 ที่ลิงก์ด้านล่าง

ช่องคลาสสาธารณะ

ภาษาแรกของฉันคือ Java และการเรียนรู้ JavaScript ทำให้ฉันรู้สึกว่าเป็นเรื่องที่ต้องทำอะไรไปเรื่อยๆ ฉันจะสร้างชั้นเรียนได้อย่างไร หรือการสืบทอด แล้วคุณสมบัติและวิธี สาธารณะและส่วนตัวล่ะ การอัปเดต JavaScript ล่าสุดหลายๆ ครั้งที่ทำให้ การเขียนโปรแกรมที่เน้นวัตถุง่ายขึ้นมาก

ตอนนี้ฉันสามารถสร้างคลาสที่ทำงานอย่างที่คิดไว้ พร้อมด้วยเครื่องมือสร้าง, Getter และเครื่องมือตั้งค่า, เมธอดแบบคงที่ และพร็อพเพอร์ตี้สาธารณะ

ด้วย V8 7.2 ซึ่งมาพร้อมกับ Chrome 72 ตอนนี้คุณสามารถประกาศฟิลด์คลาสสาธารณะในคำจำกัดความคลาสได้โดยตรง ทำให้ไม่ต้องดำเนินการในตัวสร้าง

class Counter {
  _value = 0;
  get value() {
    return this._value;
  }
  increment() {
    this._value++;
  }
}

const counter = new Counter();
console.log(counter.value);
// → 0
counter.increment();
console.log(counter.value);
// → 1

การสนับสนุนช่องสำหรับชั้นเรียนส่วนตัวอยู่ในระหว่างดำเนินการ

ดูรายละเอียดเพิ่มเติมได้ในบทความของ Mathias เกี่ยวกับช่องของชั้นเรียน

API การเปิดใช้งานผู้ใช้

จำได้ไหมว่าเว็บไซต์เล่นเสียงโดยอัตโนมัติทันทีที่โหลดหน้าเว็บได้ไหม คุณแย่งตัวกดเพื่อกดปุ่มปิดเสียง หรือดูให้รู้ว่าเป็นแท็บใดแล้วปิด ด้วยเหตุนี้ API บางตัวจึงต้องมีการเปิดใช้งานผ่านท่าทางสัมผัสของผู้ใช้ก่อนจึงจะทำงานได้ ขออภัยที่เบราว์เซอร์มีการจัดการการเปิดใช้งานด้วยวิธีที่ต่างกัน

User พบว่า API การเปิดใช้งานก่อนและหลังผู้ใช้โต้ตอบกับหน้าเว็บ

Chrome 72 เปิดตัวการเปิดใช้งานผู้ใช้เวอร์ชัน 2 ซึ่งทำให้การเปิดใช้งานของผู้ใช้สำหรับ API ที่มีการปิดกั้นทั้งหมดง่ายขึ้น ซึ่งอิงตามข้อกำหนดใหม่ที่มุ่งทำให้การเปิดใช้งานในเบราว์เซอร์ทั้งหมดเป็นมาตรฐานเดียวกัน

มีพร็อพเพอร์ตี้ userActivation ใหม่ทั้งบน navigator และ MessageEvent ซึ่งมีพร็อพเพอร์ตี้ 2 รายการ ได้แก่ hasBeenActive และ isActive:

  • hasBeenActive จะระบุว่าหน้าต่างที่เกี่ยวข้องเคยเห็นการเปิดใช้งานผู้ใช้หรือไม่ในวงจร
  • isActive จะระบุว่าหน้าต่างที่เกี่ยวข้องมีการเปิดใช้งานผู้ใช้ในวงจรหรือไม่

ดูรายละเอียดเพิ่มเติมได้ในการทำให้การเปิดใช้งานของผู้ใช้สอดคล้องกันใน API

กำลังแปลรายการสิ่งต่างๆ ด้วย Intl.format

ฉันชอบ Intl API เพราะมีประโยชน์อย่างมากสำหรับการแปลเนื้อหาเป็นภาษาอื่น ใน Chrome 72 มีเมธอด .format() ใหม่ที่ทำให้การแสดงผลรายการง่ายขึ้น เช่นเดียวกับ Intl API อื่นๆ เครื่องมือนี้จะช่วยแบ่งเบาภาระงานให้กับเครื่องมือ JavaScript โดยไม่ลดประสิทธิภาพการทำงาน

เริ่มต้นด้วยภาษาที่คุณต้องการ จากนั้นเรียก format ซึ่งจะใช้คำและไวยากรณ์ที่ถูกต้อง สามารถใช้คำสันธานได้ ซึ่งจะเพิ่มคำสมมุติ and ในภาษาท้องถิ่น (และดูที่คอมมา Oxford ที่สวยงาม) สามารถแยกส่วนได้โดยเพิ่มค่าเทียบเท่า or ในเครื่อง และการระบุตัวเลือกเพิ่มเติมบางอย่างจะช่วยให้คุณทำได้มากขึ้นไปอีก

const opts = {type: 'disjunction'};
const lf = new Intl.ListFormat('fr', opts);
lf.format(['chien', 'chat', 'oiseau']);
// → 'chien, chat ou oiseau'
lf.format(['chien', 'chat', 'oiseau', 'lapin']);
// → 'chien, chat, oiseau ou lapin'

ดูรายละเอียดเพิ่มเติมได้จากโพสต์ Intl.ListFormat API

และอีกมากมาย

ทั้งหมดนี้เป็นการเปลี่ยนแปลงเพียงบางส่วนใน Chrome 72 สำหรับนักพัฒนาซอฟต์แวร์ แต่ก็ยังมีสิ่งใหม่ๆ อีกมาก

  • Chrome 72 เปลี่ยนลักษณะการทำงานของ Cache.addAll() ให้ตรงกับข้อกำหนดมากขึ้น ก่อนหน้านี้หากมีรายการที่ซ้ำกันในการเรียกใช้เดียวกัน คำขอในภายหลังก็จะเขียนทับรายการแรก เพื่อให้เป็นไปตามข้อกำหนด หากมีรายการที่ซ้ำกัน ระบบจะปฏิเสธโดยใช้ InvalidStateError
  • ขณะนี้ Service Worker จะจัดการคำขอไอคอน Fav ตราบใดที่ URL ของคำขออยู่ในต้นทางเดียวกับ Service Worker

ติดตาม

หากต้องการติดตามวิดีโอล่าสุดของเรา โปรดติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่

ผมชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 73 ผมจะบอกคุณว่า มีอะไรใหม่ใน Chrome!