Professional JavaScript for Web Developers 第四版學習筆記 CHAPTER 20:JavaScript APIs
Atomics and SharedArrayBuffer 744
SharedArrayBuffer 744
Atomics Basics 745
Atomic Arithmetic and Bitwise Methods 745
Atomic Reads and Writes 747
Atomic Exchanges 748
Atomics Futex Operations and Locks 749
Cross-Context Messaging 751
Encoding API 753
Encoding Text 753
Bulk Encoding 753
Stream Encoding 754
Decoding Text 755
Bulk Decoding 755
Stream Decoding 756
Blob and File APIs 758
The File Type 758
The FileReader Type 759
The FileReaderSync Type 761
Blobs and Partial Reads 761
Object URLs and Blobs 762
Drag-and-Drop File Reading 763
Media Elements 764
Properties 765
Events 767
Custom Media Players 768
Codec Support Detection 769
The Audio Type 770
Native Drag and Drop 770
Drag-and-Drop Events 770
Custom Drop Targets 771
The dataTransfer Object 772
dropEffect and effectAllowed 773
Draggability 774
Additional Members 774
Notifications API 775
Notification Permissions 775
Showing and Hiding Notification 775
Notification Lifecycle Callbacks 776
Page Visibility API 776
Streams API 777
Introduction to Streams 778
Chunks, Internal Queues, and Backpressure 778
Readable Streams 779
Using the ReadableStreamDefaultController 779
Using the ReadableStreamDefaultReader 780
Writable Streams 781
Creating a WriteableStream 781
Using a WritableStreamDefaultWriter 781
Transform Streams 782
Piping Streams 784
Timing APIs 785
High Resolution Time API 786
Performance Timeline API 788
User Timing API 788
Navigation Timing API 789
Resource Timing API 790
Web Components 791
HTML Templates 791
Using a DocumentFragment 792
Using <template> tags 793
Template Scripts 794
Shadow DOM 795
Introduction to Shadow DOM 795
Creating a Shadow DOM 796
Using a Shadow DOM 797
Composition and Shadow DOM Slots 799
Event Retargeting 801
Custom Elements 802
Defining a Custom Element 802
Adding Web Component Content 804
Using Custom Element Lifecycle Hooks 805
Reflecting Custom Element Attributes 806
Upgrading Custom Elements 807
The Web Cryptography API 808
Random Number Generation 808
Using the SubtleCrypto Object 810
Generating Cryptographic Digests 810
CryptoKeys and Algorithms 812
Generating CryptoKeys 814
Exporting and Importing Keys 816
Deriving Keys from Master Keys 817
Signing and Verifying Messages with Asymmetric Keys 819
Encrypting and Decrypting with Symmetric Keys 820
Wrapping and Unwrapping a Key 821
Summary 822
-----------------------------------------
AtomicReadModifyWrite
Atomics.add(typedArray, index, increment);
compareExchange, load, store, add, sub, and,or, xor, exchange
-----------------------------------------
postMessage()
----------------------------------------
TextEncoder
encode encodeInto
TextDecoder
decode
---------------------------------------
FileReader
---------------------------------------
A “blob,” short for binary large object, is a JavaScript wrapper for immutable binary data.
--------------------------------------
window.URL.createObjectURL()
window.URL.revokeObjectURL()
--------------------------------------
event.dataTransfer.files
--------------------------------------
let audio = new Audio("sound.mp3");
--------------------------------------
// working with text
event.dataTransfer.setData("text", "some text");
let text = event.dataTransfer.getData("text");
--------------------------------------
<!-- turn off dragging for this image -->
<img src="smile.gif" draggable="false" alt="Smiley face">
<!-- turn on dragging for this element -->
<div draggable="true">...</div>
-----------------------------------------
visibilitychange
-----------------------------------------
Notification.requestPermission()
.then((permission) => {
console.log('User responded to permission request:', permission);
});
new Notification('Title text!', {
body: 'Body text!',
image: 'path/to/image.png',
vibrate: true
});
const n = new Notification('I will close in 1000ms');
setTimeout(() => n.close(), 1000);
----------------------------------------
ReadableStream,WritableStream,TransformStream
----------------------------------------
window.performance.now()
performance.timeOrigin
performance.mark('foo');
performance.mark('foo');
for (let i = 0; i < 1E6; ++i) {}
performance.mark('bar');
performance.measure('baz', 'foo', 'bar');
----------------------------------------
const fooArray = new Uint8Array(2 ** 16);
console.log(window.crypto.getRandomValues(fooArray)); // Uint32Array(16384) [...]
---------------------------------------
(async function() {
const params = {
name: 'ECDSA',
namedCurve: 'P-256'
};
const keyUsages = ['sign', 'verify'];
const {publicKey, privateKey} = await crypto.subtle.generateKey(params, true, keyUsages);
console.log(publicKey);
// CryptoKey {type: "public", extractable: true, algorithm: {...}, usages: Array(1)}
console.log(privateKey);
// CryptoKey {type: "private", extractable: true, algorithm: {...}, usages: Array(1)}
})();