KeyL-Liucong Technical Documentation
website·Indexed 30 days ago
https://keyl-liucong.github.io/A comprehensive collection of technical guides and notes covering WeChat Mini Program development (including WXS, rendering cache, and system APIs), TypeScript declaration files, JavaScript, CSS, Git, Docker, Webpack 5, and VS Code editing techniques.
What's inside KeyL-Liucong Knowledge Base
- TypeScript is a superset of JavaScript developed by Microsoft. Its primary contributions to the language are a robust type system and support for ES6 features. It is widely used in major frameworks, such as Angular (from version 2.0 onwards) and Vue (refactored in version 3.0).
Overview of ES6 Modules (ESM)
ES6 Modules provide a standardized way to split JavaScript programs into dependent files. Unlike CommonJS or AMD, which use 'runtime loading' (loading a module as an object and accessing properties), ES6 Modules use 'compile-time loading' (static loading). This allows the engine to determine dependencies and input/output variables during compilation, enabling static optimization, macros, and type checking.Overview of the Reflect API
The
Reflectobject is an ES6 API designed for object manipulation. Its primary goals are:- To move internal language methods (like
Object.defineProperty) into a dedicatedReflectobject. - To provide more reasonable return values for object operations (e.g., returning a boolean instead of throwing an error).
- To turn imperative object operations (like the
inoperator ordeletekeyword) into function calls. - To provide a 1:1 mapping with
Proxyhandler methods, allowing developers to easily implement default behavior within a Proxy trap.
- To move internal language methods (like
Overview of Node.js and its Architecture
Node.js is an open-source Web server project that allows JavaScript to be used for backend server development. It is built upon the V8 JavaScript engine (developed by Google) and leverages JavaScript's native event-driven mechanism and single-threaded nature to implement asynchronous I/O, making it highly efficient for building high-performance Web services.Overview of SIMD in JavaScript
SIMD (Single Instruction/Multiple Data) allows JavaScript to execute a single instruction across multiple data points (called "lanes") simultaneously. This is significantly more efficient than the default SISD (Single Instruction/Single Data) mode for computation-heavy tasks such as 3D graphics, physical simulations, image processing, and cryptography.// SISD approach (4 operations) var a = [1, 2, 3, 4]; var b = [5, 6, 7, 8]; var c = []; c[0] = a[0] + b[0]; c[1] = a[1] + b[1]; c[2] = a[2] + b[2]; c[3] = a[3] + b[3]; // SIMD approach (1 operation) var a = SIMD.Float32x4(1, 2, 3, 4); var b = SIMD.Float32x4(5, 6, 7, 8); var c = SIMD.Float32x4.add(a, b); // Float32x4[6, 8, 10, 12]Overview of JavaScript Data Types
ECMAScript defines 8 data types. Primitive types are stored in stack memory (fixed size), while reference types are stored in heap memory (variable size) with their address stored in the stack.
Primitive Types:
- Undefined
- Null
- Boolean
- Number
- BigInt (ES2020)
- String
- Symbol (ES2015)
Complex/Reference Type:
- Object
Overview of React features and core concepts
React is a JavaScript library for building dynamic user interfaces, focusing exclusively on the view layer. Key architectural features include:
- Declarative Design: Developers describe the desired state of the UI, and React handles the updates, contrasting with imperative coding where every step must be manually defined.
- Virtual DOM: To maximize performance and minimize page repaints, React uses a Virtual DOM and a Diffing algorithm to avoid direct, frequent manipulation of the real DOM.
- JSX: A JavaScript syntax extension that simplifies the creation of UI components (though not strictly required).
- Component-Based Architecture: Encourages the creation of reusable components for better scalability in large projects.
- Unidirectional Data Flow: Implements a one-way data flow to reduce code duplication and simplify state management compared to traditional two-way data binding.
Overview of Visual Studio Code
Visual Studio Code (VS Code) is a lightweight, powerful source-code editor developed by Microsoft, available for Windows, macOS, and Linux. It provides built-in support for JavaScript, TypeScript, and Node.js, and supports a wide ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity). Key features include IntelliSense for smart code completion of variables, methods, and imports, and a robust extension marketplace for adding themes, debuggers, and language support.Overview of the Mini-App Development Framework
This development framework simplifies mini-app interface creation by replacing complex UI coding with the authoring of simple YAML files. It is designed to lower the entry barrier for developers, allowing those without extensive development experience to understand and describe page layouts by following the provided documentation and parameter guidelines. Developers focus on adding and assigning required rendering parameters within the YAML files rather than implementing styles or functional logic manually.Overview of Docker and its Core Concepts
Docker is an open-source application container engine written in Go. It packages an application and its dependencies into a single file, creating a virtual container that ensures consistent behavior across different environments ("build once, run everywhere").
Three Core Components:
- Image: A read-only template used to create containers (similar to a VM image).
- Container: A lightweight sandbox and running instance of an image; it adds a writable layer on top of the image.
- Repository: A location to store and share images (public or private), similar to GitHub, using
pushto upload andpullto download.
Overview of the Vue patch algorithm
The
patchalgorithm handles the initial render, updates, and destruction of components. Its core logic includes:- Initial Render: If the old VNode is a real element, it creates the DOM tree and inserts it into the body.
- Update Phase: If both old and new VNodes exist, it executes
patchVnodeto update attributes and recursively callsupdateChildrenfor the diff process. - Optimizations:
- Same-level comparison: Reduces time complexity by not comparing nodes across different levels.
- Depth-first traversal: Uses recursion to process the tree.
- Four Assumptions: It assumes the start and end of the new/old VNode lists may be the same to avoid unnecessary loops.
Overview of Angular framework features and use cases
Angular is a Google-developed framework released in September 2016 that mandates the use of TypeScript. It is specifically designed for large-scale enterprise projects where stability, standardized patterns, and low long-term maintenance costs are prioritized over flexibility.
Key technical advantages include:
- Zero-config CLI: Manages Webpack updates automatically without requiring manual configuration.
- Comprehensive Official Tooling: Provides built-in, battle-tested modules for HTTP, routing, animations, Server-Side Rendering (SSR), and end-to-end (e2e) testing.
- Reactive Architecture: Deeply integrates RxJS, making everything from view operations to HTTP requests reactive.
- Automated Migrations: Offers CLI commands to automatically fix breaking changes during framework upgrades.
- Compiler Abstraction: Uses templates to isolate users from underlying compiler changes, allowing performance and bundle size improvements without requiring code changes.
- TypeScript Ecosystem: The framework and its third-party libraries are developed exclusively in TypeScript.