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

  • การรองรับ ResizeObservers จะแจ้งให้คุณทราบเมื่อสี่เหลี่ยมผืนผ้าเนื้อหาขององค์ประกอบเปลี่ยนขนาด
  • ตอนนี้โมดูลจะเข้าถึงโฮสต์ข้อมูลเมตาที่เฉพาะเจาะจงด้วย import.meta ได้แล้ว
  • ตัวบล็อกป๊อปอัปมีสัญญาณแรง
  • window.alert() ไม่เปลี่ยนโฟกัสแล้ว

และยังมีอื่นๆ อีกมากมาย

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

หากต้องการดูรายการการเปลี่ยนแปลงทั้งหมด ดูรายการการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium

ResizeObserver

การติดตามเมื่อขนาดองค์ประกอบเปลี่ยนแปลงอาจเป็นเรื่องยาก ส่วนใหญ่แล้วคุณจะต้องแนบ Listener เข้ากับเหตุการณ์ resize ของเอกสาร จากนั้นจึงเรียกใช้ getBoundingClientRect หรือ getComputedStyle แต่ทั้ง 2 อย่างนี้อาจทำให้ เลย์เอาต์เกิดข้อขัดข้อง

แล้วถ้าหน้าต่างเบราว์เซอร์ไม่เปลี่ยนขนาด แต่มีการเพิ่มองค์ประกอบใหม่ ลงในเอกสารล่ะ หรือคุณได้เพิ่ม display: none ลงในองค์ประกอบแล้ว ทั้ง 2 อย่างนี้สามารถเปลี่ยนขนาดขององค์ประกอบอื่นๆ ภายในหน้าเว็บได้

ResizeObserver จะแจ้งให้คุณทราบเมื่อองค์ประกอบมีการเปลี่ยนแปลงขนาด รวมถึงระบุความสูงและความกว้างใหม่ขององค์ประกอบ ซึ่งจะช่วยลดความเสี่ยงในการเกิดการจัดรูปแบบขึ้น

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

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

ลองดู ResizeObserver: เหมือนกับ document.onresize สำหรับ Elements สำหรับรายละเอียดเพิ่มเติมและตัวอย่างในโลกความเป็นจริง

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

ตั้งแต่ใน Chrome 64 เป็นต้นไป ระบบจะบล็อกการไปยังส่วนต่างๆ แบบนี้ และ Chrome จะแสดง UI เนทีฟบางอย่างแก่ผู้ใช้ ซึ่งจะช่วยให้ผู้ใช้ติดตามการเปลี่ยนเส้นทางได้ หากต้องการ

import.meta

เมื่อเขียนโมดูล JavaScript คุณมักจะต้องการเข้าถึงข้อมูลเมตาเฉพาะโฮสต์เกี่ยวกับโมดูลปัจจุบัน ตอนนี้ Chrome 64 รองรับพร็อพเพอร์ตี้ import.meta ภายในโมดูลแล้ว และแสดง URL ของโมดูลเป็น import.meta.url

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

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

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

  • ตอนนี้ Chrome รองรับการบันทึกที่มีชื่อและอักขระหลีกของพร็อพเพอร์ตี้ Unicode ในนิพจน์ทั่วไปแล้ว
  • ค่าเริ่มต้น preload สำหรับองค์ประกอบ <audio> และ <video> คือ metadata ซึ่งทำให้ Chrome ทำงานสอดคล้องกับเบราว์เซอร์อื่นๆ และช่วยลดการใช้แบนด์วิดท์และทรัพยากรด้วยการโหลดเฉพาะข้อมูลเมตา โดยไม่โหลดตัวสื่อ
  • ตอนนี้คุณสามารถใช้ Request.prototype.cache เพื่อดูโหมดแคชของ Request และพิจารณาว่าคำขอเป็นคำขอโหลดซ้ำหรือไม่
  • เมื่อใช้ Focus Management API คุณจะโฟกัสองค์ประกอบได้โดยไม่ต้องเลื่อนไปที่องค์ประกอบนั้นด้วยแอตทริบิวต์ preventScroll

window.alert()

อ๊ะ ขออีก 1 รายการนะ ถึงจะไม่ใช่ "ฟีเจอร์สำหรับนักพัฒนาซอฟต์แวร์" แต่ก็ทำให้ผมมีความสุข window.alert() จะไม่นำแท็บพื้นหลังมาไว้เบื้องหน้าอีกต่อไป แต่ระบบจะแสดงการแจ้งเตือนเมื่อผู้ใช้เปลี่ยนกลับไปที่แท็บนั้นแทน

ไม่มีการสลับแท็บแบบสุ่มแล้ว เนื่องจากมีบางอย่างทำให้ window.alert เริ่มทำงาน ฉันดู Google ปฏิทินเก่าของเธออยู่

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

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