- การจัดการ CSS จะง่ายขึ้นด้วยออบเจ็กต์โมเดลที่พิมพ์ของ CSS ใหม่
- ตอนนี้การเข้าถึงคลิปบอร์ดเป็นแบบไม่พร้อมกัน
- มีบริบทการแสดงผลใหม่สำหรับองค์ประกอบ Canvas
และยังมีอีกอีกมากมาย
ฉันชื่อ Pete LePage ไปดูกันเลยว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 66 กัน
หากต้องการดูรายการการเปลี่ยนแปลงทั้งหมด โปรดดู รายการเปลี่ยนแปลงที่เก็บแหล่งที่มาของ Chromium
โมเดลออบเจ็กต์ที่พิมพ์ด้วย CSS
หากคุณเคยอัปเดตพร็อพเพอร์ตี้ CSS ผ่าน JavaScript แสดงว่าคุณใช้ CSS โมเดลของออบเจ็กต์ แต่จะแสดงผลทุกอย่างเป็นสตริง
el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?
ในการทำให้พร็อพเพอร์ตี้ opacity
เคลื่อนไหว
ผมจะต้องแคสต์สตริงเป็นตัวเลข
จากนั้นเพิ่มค่าและใช้การเปลี่ยนแปลงของฉัน ยังไม่ค่อยดีนัก
function step(timestamp) {
const currentOpacity = parseFloat(el.style.opacity);
const newOpacity = currentOpacity + 0.01;
element.style.opacity = newOpacity;
if (newOpacity <= 1) {
window.requestAnimationFrame(step);
}
}
เมื่อใช้ CSS Typed Object Model ใหม่ ค่า CSS จะแสดงตามที่พิมพ์ ทำให้สามารถกำจัดการควบคุมประเภทต่างๆ ได้มากขึ้น และให้ วิธีที่เหมาะสมมากขึ้นในการทำงานร่วมกับ CSS
แทนที่จะใช้ element.style
คุณจะเข้าถึงรูปแบบผ่าน
พร็อพเพอร์ตี้ .attributeStyleMap
หรือ .styleMap
ผลการค้นหาจะแสดงวัตถุที่คล้ายแผนที่
ทำให้อ่านหรืออัปเดตง่าย
el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!
เมื่อเทียบกับ CSS Object Model แบบเก่า การเปรียบเทียบขั้นต้นจะแสดงประมาณ 30% การปรับปรุงการดำเนินการต่อวินาที - เป็นสิ่งที่สำคัญเป็นพิเศษ สำหรับภาพเคลื่อนไหว JavaScript
el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles
และยังช่วยกำจัดข้อบกพร่องที่เกิดจากการลืมแคสต์ค่าจาก สตริงกับตัวเลข และจะจัดการกับการปัดเศษและการบีบ แถมยังมีวิธีการใหม่ๆ สุดเจ๋งในการจัดการกับหน่วย Conversion, เลขคณิต และความเท่าเทียม
el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1
Eric มีโพสต์ดีๆ ที่มีการสาธิตและตัวอย่างมากมายใน คำอธิบาย
Async Clipboard API
const successful = document.execCommand('copy');
การคัดลอกพร้อมกันและ วางโดยใช้ document.execCommand
อาจเหมาะสมสำหรับขนาดเล็ก
ของข้อความสั้นๆ แต่สำหรับอย่างอื่น ก็ยังมีโอกาสที่ดีที่ข้อความจะเป็นแบบซิงโครนัส
จะบล็อกหน้าเว็บ ซึ่งทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี และ
รูปแบบสิทธิ์ระหว่างเบราว์เซอร์ต่างๆ ไม่สอดคล้องกัน
Async Clipboard API ใหม่เป็นการแทนที่ที่ทำงานแบบไม่พร้อมกัน และ จะผสานรวมกับ API สิทธิ์ เพื่อมอบประสบการณ์การใช้งานที่ดียิ่งขึ้นให้แก่ผู้ใช้
คุณคัดลอกข้อความไปยังคลิปบอร์ดได้โดยโทรหา writeText()
navigator.clipboard.writeText('Copy me!')
.then(() => {
console.log('Text is on the clipboard.');
});
เนื่องจาก API นี้เป็นแบบไม่พร้อมกัน ฟังก์ชัน writeText()
จึงแสดงผล Promise
จะได้รับการแก้ไขหรือปฏิเสธ ขึ้นอยู่กับว่าข้อความที่เราผ่าน
คัดลอกเสร็จสมบูรณ์
ในทำนองเดียวกัน คุณอ่านข้อความจากคลิปบอร์ดได้โดยโทรไปที่ getText()
และ
กำลังรอ Promise ที่แสดงผล ให้ตอบกลับด้วยข้อความ
navigator.clipboard.getText()
.then((text) => {
console.log('Clipboard: ', text);
});
ลองดูโพสต์และการสาธิตของ Jason ใน
คำอธิบาย
เขายังได้รับตัวอย่างที่ใช้ฟังก์ชัน async
ด้วย
บริบทใหม่ของ Canvas BitmapRenderer
องค์ประกอบ canvas
ช่วยให้คุณสามารถปรับแต่งกราฟิกในระดับพิกเซล
สามารถวาดกราฟ ปรับแต่งรูปภาพ หรือแม้แต่ประมวลผลวิดีโอแบบเรียลไทม์
แต่ถ้าคุณไม่ได้เริ่มต้นด้วย canvas
ที่ไม่มีข้อมูล คุณจำเป็นต้องมีวิธีแสดงผล
รูปภาพใน canvas
ในอดีต แท็กดังกล่าวหมายถึงการสร้างแท็ก image
แล้วแสดงผล
เนื้อหาใน canvas
แต่นั่นทำให้เบราว์เซอร์ต้อง
จัดเก็บสำเนารูปภาพหลายสำเนาไว้ในหน่วยความจำ
const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);
}
img.src = 'llama.png';
ตั้งแต่ Chrome 66 เป็นต้นไป จะมีบริบทการแสดงผลแบบอะซิงโครนัสใหม่ซึ่ง
เพิ่มประสิทธิภาพในการแสดงผลของวัตถุ ImageBitmap
รายการ ตอนนี้แสดงผลได้มากขึ้น
มีประสิทธิภาพและกระตุกน้อยลงด้วยการทำงานแบบไม่พร้อมกันและหลีกเลี่ยงการใช้หน่วยความจำ
ข้อมูลที่ซ้ำกัน
หากต้องการใช้งาน ให้ทำดังนี้
- โทรหา
createImageBitmap
แล้วส่ง BLOB รูปภาพเพื่อสร้างรูปภาพ - ดึงบริบท
bitmaprenderer
จากcanvas
- จากนั้นโอนรูปภาพเข้า
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);
เสร็จสิ้น ฉันแสดงรูปภาพแล้ว
AudioWorklet
Worklet พร้อมแล้ว! PaintWorklet จัดส่งมาพร้อม Chrome 65 และตอนนี้เรากำลังเปิดใช้ AudioWorklet โดยค่าเริ่มต้นใน Chrome 66 Worklet ประเภทนี้จะใช้ประมวลผลได้ เสียงในชุดข้อความเสียงโดยเฉพาะ โดยแทนที่ ScriptProcessorNode เดิม ซึ่งทำงานในชุดข้อความหลัก AudioWorklet แต่ละรายการจะทำงานในขอบเขตรวมของตนเอง ซึ่งช่วยลดเวลาในการตอบสนองและเพิ่มความเสถียรของอัตราการส่งข้อมูล
มีตัวอย่างที่น่าสนใจของ AudioWorklet Google Chrome Labs
และอีกมากมาย
แน่นอนว่านี่เป็นเพียงการเปลี่ยนแปลงเล็กๆ น้อยๆ ใน Chrome 66 สำหรับนักพัฒนาซอฟต์แวร์ ยังมีอีกมากมาย
TextArea
และSelect
รองรับแอตทริบิวต์autocomplete
แล้ว- การตั้งค่า
autocapitalize
ในองค์ประกอบform
จะมีผลกับแบบฟอร์มย่อยทั้งหมด เพื่อปรับปรุงความเข้ากันได้กับการใช้งาน Safariautocapitalize
- ตอนนี้
trimStart()
และtrimEnd()
พร้อมใช้งานตามวิธีมาตรฐานแล้ว ของการตัดช่องว่างออกจากสตริง
อย่าลืมดูใหม่ใน Chrome เครื่องมือสำหรับนักพัฒนาเว็บ เพื่อดูว่ามีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 66 และหากคุณสนใจ Progressive Web App ลองมาดู ซีรีส์วิดีโอ Roadshow ของ PWA จากนั้นคลิกปุ่มติดตามบน ช่อง YouTube และ คุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ผมชื่อ Pete LePage ทันทีที่เปิดตัว Chrome 67 ฉันก็จะงง มาแจ้งให้คุณทราบว่า มีอะไรใหม่ใน Chrome!