website·Indexed 30 days ago
https://carina957.github.ioA personal knowledge base and guide covering frontend development, including React, Vue, TypeScript, JavaScript, Nuxt, Webpack, and CSS. It also features technical documentation on Git, Node.js, VSCode configuration, interview preparation (algorithms and system internals), and personal notes on reading, poetry, and life experiences.
Proxy object allows you to create a wrapper for a target object, intercepting and redefining fundamental operations (like getting or setting properties).// Syntax: const proxy = new Proxy(target, handler)
const obj = new Proxy(target, handler);POST or PUT, data is transmitted in the request body. For modern Web applications using REST architecture with JSON data, the Content-Type header must be set to application/json to inform the server of the data format.Content-Type: application/jsonenvinfo via npx to output detailed information about the current OS, Node.js version, package managers, and installed browsers.npx envinfo --system --binaries --browsersni tool allows you to run installation and run commands without worrying about whether the project uses npm, yarn, pnpm, or bun. It automatically detects the correct package manager based on the lockfile.# Install ni globally
npm i -g @antfu/ni
# Install dependencies (npm install / yarn install / pnpm install / bun install)
ni
# Uninstall a package (npm uninstall / yarn remove / pnpm remove)
nun @types/node
# Add a package (npm install / yarn add / pnpm add)
ni vite
# Add a dev dependency (npm i -D / yarn add -D / pnpm add -D)
ni @types/node -D
# Install a global package (npm install -g / yarn add global / pnpm add -g)
ni -g eslint
# Clean install / frozen lockfile (npm ci / yarn install --frozen-lockfile / pnpm install --frozen-lockfile)
ni --frozen
# or
nci
# Upgrade packages (npm upgrade / yarn upgrade / pnpm update)
nu
# Interactive upgrade (yarn upgrade-interactive / pnpm update -i)
nu -iWhen a user enters a URL in a browser, the following high-level sequence of events occurs to retrieve and display the page:
JSX is a syntax extension for JavaScript used in React. It allows developers to write HTML-like structures within JavaScript, which are then transpiled by Babel into React.createElement() function calls.
Key benefits of JSX include:
When JSX is compiled, it results in a JavaScript object containing the type of the element and its props (including children).
// JSX Syntax
const element = (
<div className="greeting">
<h1>Hi there 👋</h1>
</div>
);
// Equivalent React.createElement call
const elementR = React.createElement(
'div',
{ className: 'greeting' },
React.createElement('h1', null, 'Hi there 👋')
);
// Resulting object structure (simplified)
const elementObj = {
type: 'div',
props: {
className: 'greeting',
children: { type: 'h1', props: { children: 'Hi there 👋' } },
},
};Proxy object allows you to create a wrapper around a target object to intercept and redefine fundamental operations (like getting, setting, or deleting properties). Unlike Object.defineProperty, which requires immediate recursive traversal for deep listening, Proxy implements lazy deep listening by recursively wrapping nested objects only when they are accessed via the get trap. This improves initial performance for deeply nested data structures.// Create a reactive proxy
function reactive(target = {}) {
if (typeof target !== 'object' || target === 'null')
return target // Return directly if not an object or array
// Proxy configuration (traps)
const proxyConf = {
get(target, key, receiver) {
// Only handle own properties (non-prototype)
const ownKeys = Reflect.ownKeys(target)
ownKeys.includes(key) && console.log(/get/, key) // Log access
const result = Reflect.get(target, key, receiver)
// Lazy recursive call: only wrap nested objects when accessed
return reactive(result)
},
set(target, key, val, receiver) {
// Do not process if value is identical
if (val === target[key])
return true
const ownKeys = Reflect.ownKeys(target)
if (ownKeys.includes(key))
console.log(/set existing property/, key)
else
console.log(/set new property/, key)
const result = Reflect.set(target, key, val, receiver)
console.log(/set/, key, val)
return result // Return success boolean
},
deleteProperty(target, key) {
const result = Reflect.deleteProperty(target, key)
console.log(/deleteProperty/, key)
return result
},
}
// Generate the proxy object
return new Proxy(target, proxyConf)
}
// Test data
const data = {
name: 'Jack',
age: 24,
info: {
city: 'hangzhou',
a: { b: { c: { d: 1 } } },
},
}
const observed = reactive(data);Traditional Chinese architecture uses specific terms to describe different types of pavilions and halls based on their function and design:
Different ways of refreshing a page trigger different caching behaviors:
If-Modified-Since) to check if the resource has expired.git init
git branch -m main
echo '# Hello Git!' > README.md
git add .
git commit -m 'First Commit'
git remote add origin git@github.com:xxx
git push -m origin mainnumber-precision npm package.$ npm i numer-precision -SNP.strip(num) // strip a number to nearest right number
NP.plus(num1, num2, num3, ...) // addition
NP.minus(num1, num2, num3, ...) // subtraction
NP.times(num1, num2, num3, ...) // multiplication
NP.divide(num1, num2, num3, ...) // division
NP.round(num, ratio) // round a number based on ratio