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

Pete LePage

ใน Chrome 72 เราได้เพิ่มการรองรับสิ่งต่อไปนี้

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

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

และ Pete LePage จะเป็นผู้ดูแลคุณในวันนี้ มาเจาะลึกและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 72

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

ข้อมูลนี้เป็นเพียงไฮไลต์สำคัญบางส่วนเท่านั้น ดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 72 ได้ที่ลิงก์ด้านล่าง

ฟิลด์คลาสสาธารณะ

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

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

ขอขอบคุณ 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 เกี่ยวกับช่องคลาส

User Activation API

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

User Activation API ก่อนและหลังจากที่ผู้ใช้โต้ตอบกับหน้าเว็บ

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

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

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

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

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

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

เริ่มต้นด้วยภาษาที่ต้องการ จากนั้นเรียกใช้ format แล้วระบบจะใช้คำและไวยากรณ์ที่ถูกต้อง สามารถใช้คําเชื่อมได้ ซึ่งจะเพิ่มคําที่เทียบเท่า and ที่แปลแล้ว (และดูคอมมาแบบอ็อกซ์ฟอร์ดที่สวยงามเหล่านั้น) การดำเนินการนี้สามารถดำเนินการแบบยกเว้นได้ ซึ่งก็คือการเพิ่มเงื่อนไขที่เทียบเท่า 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 จะจัดการคำขอ Favicon ตราบใดที่ URL คำขอมีต้นทางเดียวกับ Service Worker

สมัครใช้บริการ

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

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