DOCSEARCHbyAlgolia
Submit Docs

lzwdot Documentation

website·Indexed 32 days ago

https://lzwdot.com/

A technical knowledge base covering frontend engineering, including extensive webpack configuration and optimization guides, data structures (stacks, queues, linked lists, binary trees), design patterns (Observer, Factory, Decorator, Iterator), and server administration for Nginx, Supervisor, and Laravel.

Tokens
75.4K
Snippets
337
Records
429
Agent score
66%

What's inside lzwdot

  1. Overview of Vuex Core Concepts

    Vuex is a state management pattern for Vue.js applications. Its core architecture consists of five primary concepts:

    • state: The single source of truth for application data.
    • getters: Derived state, similar to computed properties for the store.
    • actions: Functions that contain asynchronous logic and commit mutations.
    • mutations: The only way to synchronously change the state.
    • modules: A way to divide the store into smaller, manageable pieces for large-scale applications.

  2. Overview of Model Context Protocol (MCP)

    The Model Context Protocol (MCP) is a standardized communication protocol designed to connect AI applications (Hosts) with external programs (Servers). It enables AI applications to discover and use tools provided by external servers, improving extensibility and interoperability across different AI ecosystems.

  3. Understand the purpose of React Fiber

    React Fiber is an internal mechanism designed to solve performance bottlenecks in complex components. Because JavaScript is single-threaded and shares the thread with DOM rendering, heavy reconciliation and rendering can cause UI lag (e.g., stuttering animations or mouse dragging).

    Fiber solves this by:

    • Breaking the Reconciliation phase into smaller chunks of work.
    • Allowing React to pause reconciliation when the browser needs to render the DOM and resume it during idle periods (conceptually similar to window.requestIdleCallback).

  4. Understand Linked List concepts and structure

    A Linked List is a physical data structure (unlike a logical structure) that is similar to an array but does not require a contiguous block of memory; instead, its elements are scattered. A typical linked list node consists of a value and optional pointers to the next and previous nodes.
    // Conceptual structure of a linked list node
{
  value: any,
  next?: Node,
  prev?: Node
}

  5. Understand Algorithmic Complexity basics

    Algorithmic complexity refers to the amount of computation (CPU) and memory space required for a program to execute. It is measured in terms of order of magnitude (Big O notation) rather than exact numbers and typically applies to a specific algorithm rather than an entire system. For frontend development, time complexity is generally prioritized over space complexity.

  6. Implement reactive data tracking using Proxy

    The Proxy object allows you to define custom behavior for fundamental operations (e.g., property lookup, assignment, enumeration, function invocation, property definition). Unlike Object.defineProperty, Proxy can natively detect the addition or deletion of properties and handle array mutations without special treatment. To ensure only the object's own properties are tracked (excluding prototype properties), use Reflect.ownKeys() to validate the key before triggering a side effect.
    const data = ['a', 'b', 'c'];
const proxyData = new Proxy(data, {
  get(target, key, receiver) {
    // Only track properties that belong to the object itself
    const ownKeys = Reflect.ownKeys(target);
    if (ownKeys.includes(key)) {
      console.log('get', key);
    }
    return Reflect.get(target, key, receiver);
  },
  set(target, key, val, receiver) {
    // Avoid unnecessary updates if the value is the same
    if (val === target[key]) {
      return true;
    }
    const result = Reflect.set(target, key, val, receiver);
    console.log('set', key, val);
    return result; // Returns boolean indicating success
  },
  deleteProperty(target, key) {
    const result = Reflect.deleteProperty(target, key);
    console.log('delete property', key);
    return result; // Returns boolean indicating success
  },
});

// Usage examples:
proxyData.push('d'); // Triggers get length, set index, and set length

  7. Understand the difference between Module, Chunk, and Bundle in Webpack

    In Webpack, the build process transforms source files into final assets through three primary stages:

    1. Module: Individual source files. In Webpack, everything is treated as a module (e.g., .js, .css, .png files in the src directory).
    2. Chunk: A grouping of modules. Chunks are created via entry points, dynamic imports, or optimization strategies. They represent an intermediate stage before final bundling.
    3. Bundle: The final output files (assets) generated by Webpack and written to the disk.

  8. Understand Vue's Virtual DOM (vdom) concept

    Vue uses a Virtual DOM (vdom) to optimize performance by reducing expensive direct DOM operations. Since JavaScript execution is faster than DOM manipulation, Vue simulates the DOM structure using JavaScript objects. The vdom calculates the minimum set of changes required (via a diff algorithm) and then applies only those specific changes to the real DOM.

  9. Compare Vue Template and JSX syntax

    While both Vue templates and JSX are eventually compiled into JavaScript render functions, they differ in their approach: JSX is essentially JavaScript and can leverage all JS capabilities, whereas templates use a specific Vue specification and rely on directives (like v-if) for logic beyond simple expressions.

  10. Understand why Vite starts faster than Webpack in development

    Vite achieves fast startup times in development environments by leveraging native ES6 Modules (ESM). Unlike Webpack, which bundles and transpiles code to ES5 before execution, Vite serves source code over native ESM using <script type="module">. This allows the browser to handle module loading on demand, eliminating the need for a heavy initial bundling step during development. In production, Vite uses Rollup for bundling.

  11. Understand the Vue template compilation process

    Vue templates are not HTML; they contain directives, interpolations, and JS expressions. Because HTML is a markup language and cannot perform logic (like loops or conditionals), Vue compiles templates into JavaScript render functions. These render functions, when executed, generate virtual nodes (vnodes), which are then used by the patch and diff algorithms to update the DOM. In a typical development environment using webpack, vue-loader handles this compilation process.

  12. Understand React SyntheticEvent mechanism

    React uses a Synthetic Event system to wrap native browser events. Instead of attaching event listeners to individual DOM nodes, React delegates all events to a single root element (or the document in older versions). This provides better cross-browser compatibility, reduces memory consumption by avoiding frequent binding/unbinding, and enables unified event management.

    Key characteristics:

    • The event object passed to handlers is a SyntheticBaseEvent, not a native DOM event.
    • It simulates the capabilities of standard DOM events (e.g., preventDefault(), stopPropagation()).
    • The original browser event can be accessed via e.nativeEvent.