DOCSEARCHbyAlgolia
Submit Docs

Haiweilian Technical Blog

website·Indexed 30 days ago

https://www.haiweilian.com

A technical blog featuring JavaScript design patterns (Iterator, Observer, Facade, Singleton, Proxy, Strategy, Factory, Adapter), Node.js source code analysis of libraries like vue-dev-server, configstore, co, and koa-compose, Vue 3 component library development, Redux and Vuex internals, Nginx deployment, and LeetCode algorithm solutions.

Tokens
54.8K
Snippets
238
Records
277
Agent score
48%

What's inside Haiweilian

  1. Overview of the Vue 3 Component Library implementation series

    This series provides a practical guide to building a professional Vue 3 component library. The implementation is hosted in the vlib-starter repository, where each feature is isolated in its own branch to ensure the code matches the corresponding tutorial step. The workflow covers the entire lifecycle from project initialization and coding standards to automated publishing.
    # Initial project structure can be cloned from the 0-init branch
git clone -b 0-init https://github.com/bfehub/vlib-starter

  2. Overview of mitt Event Emitter

    mitt is a tiny functional event emitter (approximately 200 bytes) that implements a publish-subscribe pattern. It uses a Map to store event types as keys and arrays of callback functions as values. It supports both specific event types and a wildcard (*) handler that triggers on every event emission.

  3. Overview of Vuex Core Concepts

    Vuex provides a centralized state management pattern for Vue applications based on four core concepts:

    • State: The single source of truth for application data. Accessed via $store.state.
    • Mutations: Synchronous functions used to modify the state. Triggered via $store.commit('mutationName').
    • Actions: Functions used for asynchronous operations that can commit mutations. Triggered via $store.dispatch('actionName').
    • Getters: Derived state (similar to computed properties) based on the current state. Accessed via $store.getters.getterName.

  4. Overview of the Proxy Design Pattern

    The Proxy pattern provides a surrogate or placeholder for another object to control access to it. This is useful when direct access to an object is inconvenient or does not meet specific requirements, allowing the proxy to manage the interaction between the client and the real object.

  5. Use Configstore to persist application configurations

    Configstore is a Node.js library used to store application configuration settings in a local JSON file. It handles directory creation and file writing with specific Linux permissions to ensure security. It supports nested property access via dot-notation and allows for default configuration values.

  6. Understand the Publish-Subscribe (Observer) Design Pattern

    The Publish-Subscribe pattern (also known as the Observer pattern) decouples objects so that one object (the publisher) does not call another object's methods directly. Instead, subscribers register their interest in specific activities of the publisher. When a state change or event occurs, the publisher notifies all registered subscribers by triggering their callback functions and passing relevant data.

  7. Implement Dumi-like component demos in VuePress using vmi

    The vmi project provides a suite of plugins for VuePress to enable high-quality component demonstrations similar to Dumi. Key capabilities include:

    • Multiple display modes: inline, iframe, and debug modes.
    • Configurable metadata for demos, such as title and desc attributes.
    • Ability to display child files imported by the component.

    Project Repository: https://github.com/bfehub/vmi Documentation: https://bfehub.github.io/vmi/zh/guide/

  8. Implement data scope control in Nest.js

    Data scope control restricts users to specific subsets of data within a resource they are authorized to access. The implementation principle involves calculating the accessible data range based on the current user's identity and data scope type, then dynamically appending these conditions to the SQL WHERE clause before executing the query.

    Common data scope levels include:

    • All data permissions
    • Custom data permissions
    • Current department data permissions
    • Current department and all subordinate department data permissions
    • Only the user's own data permissions

  9. Design an event-driven architecture for image tagging

    Use a Publish-Subscribe (EventEmitter) pattern to decouple the image logic (Taggd class) from the marker logic (Tag class). This allows the system to notify other components when tags are added or moved.

    To allow subscribers to intercept or cancel actions, implement a check where the event emitter returns a boolean value. If the subscriber returns false, the original operation is canceled.

    import EventEmitter from "../utils/event-emitter";

class Taggd extends EventEmitter {
  addTag(tag: Tag) {
    // Emit event and check if it was canceled by a listener
    const isCanceled = !this.emit("taggd.tag.add", this, tag);
    if (!isCanceled) {
      // Proceed with adding the tag
    }
    return this;
  }
}

// Usage
let taggd = new Taggd(image);
taggd.on("taggd.tag.add", function () { 
    console.log('Tag added');
});

  10. Understand the components of a JavaScript implementation

    A complete JavaScript implementation consists of three primary parts:

    1. ECMAScript: The core language specification defining syntax, types, statements, keywords, operators, and the global object.
    2. DOM (Document Object Model): The API used to manipulate HTML documents.
    3. BOM (Browser Object Model): The API used to access and manipulate browser windows.

  11. Understand the core definition and intent of Design Patterns

    A design pattern is a concise and elegant solution to a specific problem encountered during object-oriented software design. It represents a categorized summary of code design experience that is widely known and repeatedly used. When identifying a pattern, the key is to focus on the intent (the scenario it appears in and the problem it solves) rather than the structural implementation or class diagram.