website·Indexed 31 days ago
https://blog.duminghong.comA collection of technical documentation and tutorials covering TypeScript (classes, generics, interfaces, and function overloading), JavaScript asynchronous programming (Promise, async/await, and the Event Loop), CSS layout techniques, and Node.js environment management tools like cross-env, dotenv-flow, and js-yaml. It also includes practical guides for WeChat Mini Program development and audio visualization using AudioContext.
any.dotenv-flow is an enhanced environment variable management tool based on dotenv. Unlike the standard dotenv which only loads a single .env file, dotenv-flow natively supports multiple environments (development, test, production) and local private overrides, allowing for automatic switching based on the environment and support for variable nesting.Modern browsers use a multi-process architecture to improve security, stability, and performance. Each process has its own independent memory space. The primary processes include:
async/await is syntactic sugar built on top of Promises. It allows developers to write asynchronous code that looks and behaves like synchronous code, improving readability and maintainability. It is particularly useful for replacing complex Promise chains, simplifying error handling with try/catch, and managing asynchronous logic within loops and conditional statements.async function fetchData() {
try {
// Wait for the asynchronous operation to complete
const data = await someAsyncOperation();
return data;
} catch (error) {
// Handle errors
throw error;
}
}The Event Loop is the core mechanism of the browser's main rendering thread that enables asynchronous behavior in a single-threaded environment. It follows a continuous cycle of fetching a task, executing it, and then rendering the page.
The execution sequence is as follows:
Icon fonts are icons created as font characters. They are widely used in flat design for their ability to scale without loss of quality and fast loading times compared to images.
Advantages:
Disadvantages:
A Promise is a JavaScript object used for asynchronous operations that represents the eventual completion (or failure) and its resulting value.
An object is considered thenable or PromiseLike if it possesses a then method. While all strict Promises are thenables, not all thenables are strict Promises (they must adhere to the Promise/A+ specification to be 'true' Promises).
// Check if an object is PromiseLike
function isPromiseLike(value) {
return value && typeof value.then === 'function'
}While both handle multiple input types, the choice depends on whether the return type needs to change based on the input.
// Overloading: Precise return type inference
function process(value: string): string;
function process(value: number): number;
function process(value: string | number): string | number {
return typeof value === 'string' ? value.toUpperCase() : value * 2;
}
const res1 = process("hello"); // Type is 'string'
const res2 = process(123); // Type is 'number'
// Union Type: Broad return type inference
function processUnion(value: string | number): string | number {
return typeof value === 'string' ? value.toUpperCase() : value * 2;
}
const res3 = processUnion("hello"); // Type is 'string | number'
const res4 = processUnion(123); // Type is 'string | number'// Numeric Enum (supports reverse mapping)
enum Direction {
Up, // 0
Down, // 1
}
console.log(Direction.Up); // 0
console.log(Direction[0]); // "Up"
// String Enum (recommended for APIs)
enum HttpStatus {
OK = "OK",
NotFound = "NOT_FOUND"
}