DOCSEARCHbyAlgolia
Submit Docs

Gauhar Chan's Technical Notes

website·Indexed 30 days ago

https://gauharchan.github.io/

A collection of web development notes and guides covering JavaScript, Vue 3 (Composition API, reactive.ts), React 18, TypeScript, and Taro. Includes practical tutorials on Axios, Webpack, Uni-app, ES6 string extensions, and regular expressions, as well as specific development pitfalls when using Taro with Nut UI.

Tokens
87.1K
Snippets
578
Records
654
Agent score
73%

What's inside Gauhar Chan's Blog

  1. Overview of vite-plugin-shared

    vite-plugin-shared is a tool designed to solve the problem of deep directory nesting in project assets (e.g., src/views/.../assets/...), which often leads to complex and mentally taxing relative import paths. It automates the creation of a shared.ts file in each assets folder, acting as a unified entry point for all TypeScript files within that asset directory.

  2. Overview of vite-plugin-shared

    vite-plugin-shared is a tool designed to reduce the cognitive load and verbosity of deep import paths in business development. It automatically generates a shared.ts entry file within assets directories, allowing developers to import multiple resources from a single point using namespace imports to avoid naming collisions between different files.

  3. Understand the JavaScript Prototype Chain

    In JavaScript, every object has its own prototype object, which in turn can have its own prototype, forming a prototype chain. All objects eventually inherit from Object.prototype. The end of the prototype chain is null, as Object.prototype's prototype is null.
    Object.getPrototypeOf(Object.prototype); // null

  4. Understand JavaScript Garbage Collection strategies

    JavaScript uses garbage collectors to release memory from variables that are no longer in use.

    1. Mark-and-Sweep: The most common method. The collector marks all reachable variables; those that are no longer reachable are marked for deletion and subsequently reclaimed.
    2. Reference Counting: Memory is released when the reference count of a value reaches 0. A major drawback is circular references, where two objects reference each other, preventing their reference counts from ever reaching zero.

  5. Understand the JavaScript Event Loop and Task Queues

    JavaScript uses an event loop to manage execution. The process follows a specific order: Call Stack -> Micro-tasks (Jobs) -> Macro-tasks (Tasks).

    • Call Stack: LIFO (Last-In-First-Out). Functions are executed here. When the stack is empty (only the global execution context remains), the engine checks the Job queue.
    • Micro-tasks (Jobs): Executed immediately after the call stack clears and before the next macro-task. If a micro-task schedules another micro-task, it is added to the queue and executed in the same cycle. Examples include process.nextTick, Promise.then, MutationObserver, and async/await.
    • Macro-tasks (Tasks): Executed one by one. After each macro-task, the engine checks for pending micro-tasks. Examples include the initial script execution, setTimeout, setInterval, setImmediate, I/O operations, and UI rendering.

  6. Understand the difference between focus and focusin events

    The focusin event triggers when an element is about to receive focus. The primary difference between focusin and focus is that focusin bubbles, whereas focus does not. Similarly, blur does not bubble, while focusout does.

  8. Create Global Declaration files

    Use .d.ts files to declare global variables, functions, classes, and types using the declare keyword. This informs the compiler about the existence of entities defined elsewhere.
    declare var myGlobalVar: string;
declare function myGlobalFunc(): void;
declare class myGlobalClass {};
declare enum myGlobalEnum {};
declare namespace myGlobalNamespace {};

  9. Understand the uni-app project directory structure

    The standard uni-app project structure consists of the following key directories and files:

    • components: Components/plugins. Using easycom, components in this folder are automatically imported and can be used in Vue templates without explicit registration.
    • common: Public files such as CSS, Less, SCSS, and font icons.
    • pages: Page files.
    • static: Static assets (images, videos, etc.). All static assets must be stored here.
    • wxcomponents: WeChat mini-program components/plugins.
    • main.js: The Vue initialization entry file.
    • App.vue: Application configuration for global styles and application lifecycle listeners.
    • manifest.json: Application metadata including name, appid, logo, and versioning for packaging.
    • pages.json: Configuration for page routing, navigation bars, and tabs.

  10. Internal Reactive Flags for Proxy Identification

    Vue uses a set of internal flags (ReactiveFlags) to identify the nature of a proxy object. These are used by the get trap in the proxy handlers to return metadata about the object.
    export const enum ReactiveFlags {
  SKIP = '__v_skip',
  IS_REACTIVE = '__v_isReactive',
  IS_READONLY = '__v_isReadonly',
  IS_SHALLOW = '__v_isShallow',
  RAW = '__v_raw'
}

  11. Distinguish between focus and focusin events

    The focusin event triggers when an element is about to receive focus. The primary difference between focusin and focus is that focusin bubbles, whereas focus does not. Similarly, focusout bubbles while blur does not.

  12. Understand the JavaScript Event Loop execution order

    JavaScript uses an Event Loop to manage the execution of tasks. The execution order follows this cycle: Call Stack -> Micro-tasks (Jobs) -> Macro-tasks (Tasks).

    • Call Stack: LIFO (Last-In-First-Out). Functions are executed here.
    • Micro-tasks (Jobs): Executed immediately after the call stack is empty and before the next macro-task. If a micro-task schedules another micro-task, it is added to the queue and executed in the same cycle. Examples include Promise.then, process.nextTick, MutationObserver, and async/await.
    • Macro-tasks (Tasks): Executed one by one. After each macro-task, the engine checks for pending micro-tasks. Examples include the main script, setTimeout, setInterval, setImmediate, I/O operations, and UI rendering.