website·Indexed 30 days ago
http://www.iflong.top/A comprehensive technical resource covering advanced frontend development, including TypeScript deep dives (generics, conditional types, type guards), Node.js internals (HTTP, Buffer, event loop, Express principles), Vue 3.0 component library construction, and architectural analysis of Vue reactivity, Diff algorithms, SSR, and micro-frontends.
template attribute into a render function. The compilation process consists of three primary stages: generating an AST (Abstract Syntax Tree), transforming that AST, and generating the final code from the transformed AST.export function baseCompile(template) {
// 1. Generate AST
const ast = baseParse(template);
// 2. Transform AST
transform(ast);
// 3. Generate code based on AST
return generate(ast);
}bujichongjs provides a set of custom components and public utility methods designed to accelerate development. Key features include:
this.$t.this.$ajax.rules).patchFlag. If the fragment is keyed, it uses patchKeyedChildren; otherwise, it uses patchUnkeyedChildren.if (patchFlag & PatchFlags.KEYED_FRAGMENT) {
patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
return
} else if (patchFlag & PatchFlags.UNKEYED_FRAGMENT) {
patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
return
}install method uses a global mixin to ensure every component instance has access to the $store property.// 1. Plugin installation and mixin
export const install = (_Vue) => {
Vue = _Vue;
Vue.mixin({
beforeCreate() {
const options = this.$options;
if (options.store) {
this.$store = options.store;
} else if (options.parent && options.parent.$store) {
this.$store = options.parent.$store;
}
}
});
}
// 2. Store class with reactive state
export class Store {
constructor(options) {
let state = options.state;
this._vm = new Vue({
data: { $$state: state }
});
}
get state() {
return this._vm._data.$$state;
}
}replaceState, subscribe, and registerModule. It distinguishes between mutations (synchronous state changes) and actions (asynchronous logic that commits mutations).When a server returns text/html, the browser uses an HTMLParser to parse data as it downloads. The process follows this flow: Byte Stream → Tokenizer → Tokens → Node Generation → DOM Tree insertion.
Key behaviors include:
<script> tag is encountered, HTMLParser stops parsing to download and execute the script. JS execution waits for all preceding CSS to be loaded and parsed.<head> to prevent flickering (Flash of Unstyled Content), as CSS loading does not block DOM tree parsing.HTTP is a stateless application-layer protocol. To manage state, it uses cookies. To optimize performance, it employs 'keep-alive' to prevent frequent TCP connection establishment/teardown and uses pipelining for concurrent requests (e.g., for JS and CSS files).
Key limitations of standard HTTP include:
These issues are addressed by HTTPS, which uses SSL (Secure Sockets Layer) to establish secure communication.
Express uses a hierarchical structure to manage requests:
stack of Layer objects. It handles the initial request and iterates through layers to find a path match.Route object contains its own stack of Layer objects, each corresponding to a different HTTP method (GET, POST, etc.) for that specific path.path and the handler function. It is responsible for matching the path and executing the handler via handle_request.numberbox component restricts user input to numeric values only. It supports range validation via min and max attributes and provides automatic value formatting. By default, it formats inputs as integers.The rendering order of Vue components is 'Parent first, then Child'.
Vue.extend to generate the child's constructor.$mount method.