DOCSEARCHbyAlgolia
Submit Docs

lwj-wing Frontend and Server Notes

website·Indexed 30 days ago

https://lwj-wing.top

A collection of technical notes covering frontend development (Vue 3, React Hooks, Webpack, TypeScript), server administration (Linux, Ubuntu, Nginx, Docker), and general web tools (npm, VS Code, Alipay and WeChat API integration).

Tokens
221K
Snippets
1.3K
Records
1.6K
Agent score
45%

What's inside lwj-wing

  1. Overview of Immutable.js

    Immutable.js provides persistent data structures where any modification, addition, or deletion returns a new immutable object rather than mutating the original. This approach reduces complexity associated with mutable state, saves memory, and enables features like Undo/Redo and functional programming patterns.

    Caveats:

    • It is easy to accidentally mix immutable objects with native JavaScript objects. It is recommended to use fromJS for creation and prefix immutable variables with $$ to distinguish them.
    • Since every operation returns a new object, developers must remember to assign the result to a variable.

  3. Overview of Electron Inter-Process Communication (IPC)

    IPC (Inter-Process Communication) is the core mechanism in Electron used to call native APIs from the UI (renderer process). Because the preload.js script has limited access to Node.js APIs (e.g., it cannot use the fs module directly), it must communicate with the main process (main.js), which has full Node.js access, to perform system-level tasks. Communication is primarily managed using ipcMain and ipcRenderer to define communication channels.

  4. Intercept object and function operations using Proxy

    The Proxy object allows you to create a wrapper for another object (target), enabling you to intercept and redefine fundamental operations such as property lookup, assignment, enumeration, and function invocation. A Proxy is initialized with a target object and a handler object containing 'traps' (methods) that define the interception logic.
    var proxy = new Proxy(target, handler);

  5. Distinguish between Primitive and Reference types in memory

    JavaScript handles data storage differently based on the type:

    • Primitive Types (Number, String, Boolean, Undefined, Null): Stored directly in the Stack. Comparison is based on value.
    • Reference Types (Object, Array, Function, RegExp, Date, Error): The actual data is stored in the Heap, while the reference (memory address) is stored in the Stack. Comparison is based on the memory address, meaning two different objects with the same content are not equal.

  6. Understand the CSS Box Model components

    The CSS Box Model consists of four distinct layers that wrap around an element's content:

    1. Content: The actual content of the element (defined by width and height).
    2. Padding: The space between the content and the border.
    3. Border: The line surrounding the padding and content.
    4. Margin: The space outside the border, separating the element from others.

    Total Dimension Calculation:

    • Total Width = Left Margin + Left Border + Left Padding + Width + Right Padding + Right Border + Right Margin
    • Total Height = Top Margin + Top Border + Top Padding + Height + Bottom Padding + Bottom Border + Bottom Margin

  7. Compare document.write() and innerHTML

    There are fundamental differences between document.write() and innerHTML for adding content to a page:

    1. document.write(): Writes directly to the HTML document stream. If called after the page has finished loading (e.g., inside an event handler), it will overwrite the entire existing HTML document.
    2. innerHTML: A property of a DOM element that allows you to get or set the HTML markup contained within that specific element. It is used for targeted updates to a part of the page without reloading or overwriting the rest of the document.

  8. Electron Architecture and Process Model

    Electron combines Chromium (browser engine), Node.js (runtime), and Native APIs to build cross-platform desktop apps. It uses a multi-process architecture:

    • Main Process (main.js): The application entry point. Runs in a Node.js environment with full access to Node.js APIs and is responsible for managing application lifecycles and creating browser windows via BrowserWindow.
    • Renderer Process (index.html): Each window is a separate renderer process. It runs in a standard browser environment and cannot directly access Node.js APIs or require modules for security reasons.
    • Preload Script (preload.js): Acts as a bridge between the Main and Renderer processes. It runs in the renderer process but has access to Node.js APIs, allowing it to securely expose specific functionality to the web page via contextBridge.

  9. Understand Vue's two-way data binding principle

    Vue implements two-way data binding using a combination of data hijacking (Observer) and a publisher-subscriber pattern (Watcher).

    1. Observer: Recursively traverses data objects and uses Object.defineProperty() to define getters and setters for properties.
    2. Compile: Parses template directives, replaces variables with data, and binds update functions to nodes.
    3. Watcher: Acts as a bridge between Observer and Compile. It subscribes to property changes and triggers the update function in Compile when data changes.
    4. MVVM: Integrates these three to achieve the flow: Data Change $ ightarrow$ View Update and View Interaction $ ightarrow$ Data Change.

  10. Perform type assertions in TypeScript

    Type assertions allow you to tell the compiler that you know more about a value's type than it does. This is useful when dealing with union types or external APIs.

    • Standard Assertions: Use <type>variable or variable as type. Note that in JSX, only as syntax is supported.
    • Non-null Assertion: Use the ! suffix to assert that a value is not null or undefined.
    • Definite Assignment Assertion: Use ! during declaration (let a!: number) to tell TS the variable will be assigned before use.
    • Const Assertion: Use as const or <const> to treat an object or value as a read-only literal.
    // Standard assertions
const getLength = (target: string | number): number => {
    if ((<string>target).length || (target as string).length === 0) {
        return (<string>target).length;
    } else {
        return target.toString().length;
    }
};

// Non-null assertion
let x = name!;

// Const assertion
const action = <const>{
    type: 'SET_VALUE',
    payload: [1, 2, 3]
};
// action.payload.push(1); // Error: read-only

// Window property assertion
(window as any).foo = 1;

  11. Understand MongoDB's NoSQL data model

    MongoDB is a NoSQL (non-relational) database that stores data as JSON-like key-value pairs. Unlike traditional relational databases that use tables and records, MongoDB organizes data in a hierarchy of Databases, Collections, and Documents (Objects).

    Structure: Database $\rightarrow$ Collection $\rightarrow$ Document (Object/Record).

  12. Implement frontend routing using Hash or History mode

    Frontend routing works by listening to URL changes and matching them to specific page components without refreshing the browser.

    1. Hash Mode

    • URL Format: www.test.com/#/about
    • Mechanism: Uses the hashchange event to detect changes in the URL fragment (everything after the #).
    • Pros: No server-side configuration required; high compatibility.
    • Cons: URLs contain the # symbol.

    2. History Mode

    • URL Format: www.test.com/about
    • Mechanism: Uses HTML5 history.pushState and history.replaceState to update the URL without a page refresh.
    • Pros: Cleaner URLs.
    • Cons: Requires server-side configuration to redirect all requests to index.html to avoid 404 errors on page refresh or direct URL entry.