DOCSEARCHbyAlgolia
Submit Docs

Zhu Hangfeng's Technical Blog

website·Indexed 29 days ago

https://zhuhangfeng.github.io/blogs

A collection of technical notes and examples focusing on front-end development. Topics include JavaScript fundamentals (closures, V8 garbage collection, call/apply/bind), Vue 2 and Vue 3 performance and reactivity, CSS layouts, HTML, HTTP, Git workflows, and practical SVG and UI implementation examples.

Tokens
19.8K
Snippets
56
Records
132
Agent score
74%

What's inside Zhu Hangfeng's Blog

  1. Overview of W3C Web Standards

    The World Wide Web Consortium (W3C) is an international standards organization that develops and promotes technical standards for the internet. Key standards maintained by W3C include:

    • HTML: Defines the structure, elements, and attributes of web pages (e.g., HTML5).
    • CSS: Defines styles and layout for web pages (e.g., CSS3).
    • XML: A markup language used for describing and structuring data.
    • DOM (Document Object Model): A programming interface that allows scripts (such as JavaScript) to access and manipulate the structure and content of HTML and XML documents.
    • Web APIs: Standardized interfaces for extended browser functionality, including XMLHttpRequest for HTTP requests, Geolocation API for location data, and Canvas API for graphics rendering.

  3. Compare AJAX, Axios, and Fetch

    • AJAX (XHR): Original native way to make requests. Architecture is event-based and can lead to "callback hell"; configuration is often verbose.
    • Axios: A library that supports the Promise API. Works in both browser (XHR) and Node.js (http). Features include request/response interceptors, automatic JSON transformation, and CSRF/XSRF protection.
    • Fetch: Modern browser native replacement for AJAX. Based on Promises (supports async/await).
      • Caveats: Only rejects on network failure (400/500 errors are considered successful responses); does not send cookies by default; lacks native request progress monitoring (unlike XHR).

  5. Understand the JavaScript Event Loop

    JavaScript is single-threaded and uses an event loop to handle asynchronous tasks to prevent blocking. Tasks are categorized as:

    • Synchronous Tasks: Executed immediately on the main thread (Call Stack).
    • Microtasks: Executed immediately after the current synchronous task and before the next macrotask. Examples: Promise.then, await continuations, MutationObserver callbacks.
    • Macrotasks: Executed one by one after the microtask queue is empty. Examples: script tags, setTimeout, setInterval, I/O operations, UI rendering, DOM event callbacks, AJAX callbacks.

    Execution Order: Synchronous Tasks $\rightarrow$ All pending Microtasks $\rightarrow$ One Macrotask $\rightarrow$ All pending Microtasks...

  6. Understand the MVVM architectural pattern in Vue

    Vue implements the MVVM (Model-View-ViewModel) design pattern to achieve separation of concerns between the frontend and backend:

    • Model: The data model layer where data and business logic are defined.
    • View: The view layer responsible for presenting the data to the user.
    • ViewModel: The bridge that controls data changes and updates the view accordingly.

  7. Core JavaScript Fundamentals Checklist

    To achieve proficiency in JavaScript, developers should master the following core areas:

    • Basic Syntax & Data Types: Variables, constants, operators, conditional statements, and loops.
    • Functions: Definition, invocation, parameter passing, and return values.
    • Objects & OOP: Object creation, defining properties and methods, and inheritance concepts.
    • DOM Manipulation: Accessing, creating, modifying, and deleting elements within the Document Object Model (DOM).
    • Event Handling: Event binding, triggering, and processing mechanisms.
    • AJAX: Implementing asynchronous data interaction.
    • ES6+ Features: Arrow functions, template strings, destructuring assignment, classes, and modularization.

  8. Distinguish between router and route in Vue Router

    In Vue Router:

    • route (the route object) contains information about the current location, such as path, params, query, and name.
    • router (the router instance) provides methods for navigation (e.g., push, replace) and global hooks.

  9. Understand the core characteristics of Interface APIs

    Interface APIs serve as a contract between software components (typically frontend and backend) and are characterized by the following properties:

    • Standardization: Follows specific standards and conventions to ensure interoperability between different software components.
    • Functional Definition: Explicitly defines available methods, required parameters, and expected return values provided by the backend.
    • Independence (Abstraction): Decouples the interface from the underlying implementation, allowing clients to interact with backend functionality without needing to know the internal logic.
    • Extensibility: Supports the addition of new features or operations without breaking existing API functionality.
    • Reusability: Can be shared across multiple software components, increasing development efficiency and code reuse.
    • Security: Implements security mechanisms such as authentication and access control to protect backend resources.
    • Testability: Allows for independent testing to verify functional correctness and performance reliability.
    • Documentation: Requires detailed documentation (including descriptions, parameter definitions, and example code) to enable developer integration.

  10. Understand the HTTPS encryption process

    HTTPS uses a hybrid encryption approach:

    1. Handshake (Asymmetric Encryption): The browser requests a connection; the server responds with a certificate and a public key. The browser generates a symmetric key, encrypts it with the server's public key, and sends it back. The server decrypts this symmetric key using its private key.
    2. Data Transfer (Symmetric Encryption): Once the symmetric key is established, both parties use it to encrypt and decrypt the actual data transmitted over the connection for efficiency.

  11. Compare Canvas and SVG for 2D graphics

    Choose between Canvas and SVG based on the rendering requirements:

    • Canvas: A pixel-based rendering surface. Graphics are drawn via JavaScript (2D context). It is more efficient for complex, high-frequency pixel updates.
    • SVG (Scalable Vector Graphics): An XML-based vector format. Each element is part of the DOM, meaning you can attach event listeners directly to individual shapes. It is better for scalable graphics and interactive elements.

  12. Perform a shallow copy of objects and arrays

    A shallow copy creates a new object in the stack and copies the top-level values. Primitive values are copied by value, but nested reference types (like arrays within objects) are copied by reference, meaning they still share the same memory address as the original.
    // Method 1: Manual loop with hasOwnProperty
function shallowClone(source) {
    var target = {};
    for(var i in source) {
        if (source.hasOwnProperty(i)) {
            target[i] = source[i];
        }
    }
    return target;
}

// Method 2: Object.assign
let obj3 = Object.assign({}, obj1);

// Method 3: Spread operator
let obj3 = { ...obj1 };

// Method 4: Array.prototype.slice() (Arrays only)
let arr3 = arr1.slice();

// Method 5: Array.prototype.concat() (Arrays only)
let arr3 = arr1.concat();