website·Indexed 30 days ago
https://messiahhh.github.io/blog/A comprehensive collection of technical notes and documentation covering frontend development. Topics include JavaScript (BOM, DOM, Proxy, Promise), TypeScript (tsconfig.json, declaration files), React (useState, Hooks), Vue, Node.js (Event Loop, NPM, pnpm), Rust (Cargo, WebAssembly, Tauri), WebGL, Three.js, and database management with MongoDB and MySQL.
pnpm improves upon npm and yarn by changing how node_modules are structured to solve two primary issues:
Phantom Dependencies: npm and yarn use a flattened node_modules structure, allowing code to import sub-dependencies that aren't explicitly listed in package.json. pnpm solves this by using symbolic links (soft links). The top-level node_modules only contains the packages explicitly declared in package.json, which point to a hidden .pnpm directory where the actual dependency tree resides.
npm Doppelgängers: In flattened structures, if multiple packages require different versions of the same dependency, duplicate copies are often created in nested node_modules folders, increasing disk usage. pnpm solves this by using a content-addressable store (typically in ~/.pnpm-store). It creates hard links from the project's node_modules/.pnpm to the global store, ensuring each version of a package is stored only once on the disk regardless of how many projects use it.
Modern browsers use a multi-process architecture to ensure stability and performance. The primary processes include:
Depending on the target environment and performance requirements, Rust can be integrated into the frontend ecosystem using two main approaches:
.node binary compilation for every target platform.postcss-cli for command-line compilation or integrated into Webpack using postcss-loader. Configuration can be passed via command-line arguments or defined in a postcss.config.js file. By default, PostCSS does not transform code; plugins must be installed and configured to provide specific transformation features.<script src=""> and <form> are not.React.createElement calls. The result of React.createElement is a plain JavaScript object known as a JSX.Element or React.ReactElement, which is commonly referred to as the Virtual DOM. These objects describe the type of element and its properties (props) but do not contain pointers to other elements.// JSX Syntax
const element = <h1 class="hello">hello, world!</h1>
// Compiled to:
const element = React.createElement('h1', { class: 'hello' }, 'hello, world')
// Resulting Virtual DOM object:
const element = {
$$typeof: Symbol(react.element),
key: null,
props: {class: "hello", children: "hello, world!"},
ref: null,
type: "h1",
}TypeScript separates variable context (found in .js files) from type context (found in .d.ts files). Declaration files allow developers to provide type information for JavaScript code or external libraries.
TypeScript loads declaration files via:
tsconfig.json's include array (all .ts and .d.ts files).tsconfig.json's types and lib options, which default to node_modules/@types and node_modules/typescript/lib respectively.Libraries typically distribute types in two ways:
node_modules/@types.package.json under the types field (requires explicit import to get type hints).The event loop manages the execution of code by coordinating between the main thread and task queues. Tasks are categorized into two types:
setTimeout, setInterval, I/O operations (e.g., AJAX, file reading), UI events (e.g., clicks), and setImmediate (Node.js specific).Promise.then().Execution Rule: The event loop executes one macro-task, then exhausts the entire micro-task queue, then moves to the next macro-task.
.toString() on a string literal), JavaScript temporarily wraps the primitive in an object of the corresponding wrapper type, executes the method, and then discards the object.// Conceptual process of '1'.toString()
var s = new String('1');
s.toString();
s = null;Proxy object allows you to create a wrapper around a target object to intercept and redefine fundamental operations, such as property lookup (get) and assignment (set).let handler = {
get: function (target, propKey, receiver) {
console.log(`Reading property: ${propKey}`);
return target[propKey];
},
set: function (target, propKey, newValue, receiver) {
console.log(`Setting property: ${propKey} to ${newValue}`);
target[propKey] = newValue;
return true; // Return true to indicate success
}
};
let proxy = new Proxy({ name: 'akara' }, handler);
proxy.name; // Triggers 'get' handler
proxy.age = 20; // Triggers 'set' handlerThe WebGL rendering process follows these primary stages:
gl.drawArrays() to send draw commands to the GPU.