DOCSEARCHbyAlgolia
Submit Docs

EricYangXD Handbook

website·Indexed 31 days ago

https://ericyangxd.top/

A comprehensive technical knowledge base covering frontend and backend development. Topics include JavaScript (ESLint, Prettier, Axios, V8 engine), Java (Spring, MyBatis, Maven, Kafka, Redis, MySQL), Vue, Angular, Vite, Webpack, and web security, alongside notes on Uni-App, Taro, and Shell scripting.

Tokens
351.9K
Snippets
1.4K
Records
2.1K
Agent score
52%

What's inside EricYangXD Handbook

  1. Overview of Vue 3 Composition API features

    The Vue 3 Composition API provides a set of functions to organize component logic. Key features include:

    • setup(): The entry point for the Composition API; defines reactive state, computed properties, and methods before the component is created.
    • ref and reactive: ref is used for single primitive values, while reactive is used for objects or arrays.
    • computed: Defines cached properties that automatically update when dependencies change.
    • watch and watchEffect: watch monitors specific data sources; watchEffect tracks all dependencies used within its effect automatically.
    • Lifecycle Hooks: Functions like onMounted, onUpdated, and onUnmounted are used to execute code at specific component lifecycle stages.

  2. Overview of React + TypeScript Cheatsheets

    The React + TypeScript cheatsheets provide tailored guidance based on the developer's goals and experience level:

    • Basic Cheatsheet: Designed for React developers starting with TypeScript in apps. Focuses on best practices, copy-pasteable examples, and basic TS types without deep diving into complex generic logic.
    • Advanced Cheatsheet: For developers writing reusable type utilities, functions, render props, higher-order components (HOCs), or TS+React libraries. Focuses on full utilization of generic types.
    • Migrating Cheatsheet: Provides advice for incrementally migrating large codebases from JavaScript or Flow to TypeScript.
    • HOC Cheatsheet: Specifically focuses on writing Higher-Order Components with TypeScript (requires familiarity with Generics).

  3. Overview of Micro-Frontend (MicroFE) Architecture

    Micro-Frontends apply microservices principles to the browser, transforming a single monolithic web application into a collection of smaller, independent frontend applications. The primary goals are to ensure compatibility between different technology stacks, allow projects to be treated as reusable pages or components, and enable low-cost integration of new pages into existing systems.

  4. Overview of React Fiber architecture

    Introduced in React 16, Fiber is a reimplementation of React's core reconciliation algorithm designed to prevent main-thread blocking in large applications. It replaces the old 'stack' reconciler (which used synchronous depth-first traversal) with a more flexible system.

    Core Design Principles:

    1. Priority-based Scheduling: Updates are assigned priorities. High-priority tasks (user input, animations) can interrupt low-priority tasks (data loading).
    2. Incremental Rendering: The rendering process is split into small units called 'Fiber units'. This allows React to pause, yield to the browser, and resume work.
    3. Node Reuse: Fiber improves performance by reusing previously rendered Fiber nodes when the component tree changes, reducing the need to recreate entire subtrees.

  5. Overview of JavaScript module evolution

    JavaScript modularization has evolved to isolate scopes and avoid variable conflicts through several patterns:

    1. IIFE: Self-executing functions for basic scope isolation.
    2. AMD: Asynchronous Module Definition (e.g., RequireJS), requires explicit dependency declaration.
    3. CMD: Common Module Definition (e.g., SeaJS), supports dynamic dependency loading.
    4. CommonJS: The standard for Node.js.
    5. UMD: Universal Module Definition, compatible with both AMD and CommonJS.
    6. Webpack: Introduced code splitting (e.g., require.ensure in v2).
    7. ES Modules: The official ES6 standard using import and export.

  6. Overview of Prisma ORM

    Prisma is an open-source Object-Relational Mapping (ORM) tool designed for Node.js and TypeScript. It provides a type-safe way to interact with databases using a generated client, allowing developers to perform CRUD operations without writing complex SQL. It supports multiple databases including PostgreSQL, MySQL, SQLite, SQL Server, and MongoDB.

  7. Overview of the Tauri Framework

    Tauri is a framework used to build small, fast binary files for all major desktop platforms. It consists of a Rust-based core that handles window creation and native functionality, and a frontend layer that can be built with any framework capable of compiling to HTML, JS, and CSS.

  8. Overview of Groovy language features

    Groovy is an object-oriented language based on the Java platform, released under the Apache License v 2.0. It is designed to be easily accessible for Java developers due to its similar syntax and full compatibility with existing Java libraries. Key technical features include:

    • Support for both static and dynamic typing.
    • Operator overloading.
    • Native support for lists and associative arrays.
    • Native support for regular expressions.
    • Native support for markup languages such as XML and HTML.
    • Extension of java.lang.Object.

  9. Analyze styles with CSS Overview

    The CSS Overview panel provides a high-level report of a site's styles, including colors, fonts, media queries, and unused declarations.

    How to enable:

    1. Open DevTools -> More tools -> CSS Overview.
    2. Click Capture overview to generate the report.

    Report Sections:

    • Overview summary: High-level CSS summary.
    • Colors: Grouped by usage (background, text) and highlights low-contrast issues.
    • Font info: Grouped by size, weight, and line-height.
    • Unused declarations: Invalid styles grouped by reason.
    • Media queries: Sorted by frequency of occurrence.

  10. Manage routing in a qiankun micro-frontend architecture

    To implement unified routing, the main application defines paths for each sub-application. Sub-applications must be modified to use a dynamic base path: if running within qiankun (detected via window.__POWERED_BY_QIANKUN__), they use their specific sub-path; otherwise, they default to the root path.
    // main-app/src/router.js
const routes = [
  { path: "/vue2/*", name: "vue2", meta: { title: "Vue2子系统" } },
  { path: "/vue3/*", name: "vue3", meta: { title: "Vue3子系统" } },
  { path: "/react16/*", name: "react16", meta: { title: "React16子系统" } },
];

// react16-app/src/App.js
<Router basename={window.__POWERED_BY_QIANKUN__ ? '/react16' : '/'}>
  <Switch>
    <Route path="/detail" component={DetailPage} />
  </Switch>
</Router>

  11. Understand the concept of Sleep Sort

    Sleep Sort is a conceptual sorting algorithm that leverages multi-threading. For each number n in the input array, a separate thread is created that sleeps for n seconds. When a thread wakes up, it outputs its corresponding number. The numbers are thus output in increasing order of their values. Note: This is generally impractical for real-world use due to threading overhead and timing precision issues.

  12. Understand the purpose and benefits of Unit Testing

    Unit testing is used to verify that small parts of code—typically a single function, method, or module—work as expected. It is designed to capture and prevent bugs, ensuring each component can run independently. Key benefits include:

    • Error Detection: Identifies bugs, exceptions, and edge cases early to reduce maintenance costs.
    • Refactoring Support: Provides a safety net to ensure new implementations maintain the same behavior as old ones.
    • Documentation: Test cases serve as living documentation for other developers to understand how to call functions or modules.
    • Code Quality: Encourages the creation of modular, maintainable, and testable code.
    • Automation: Enables Continuous Integration and Continuous Delivery (CI/CD) by running tests automatically after every code change.