前端开发
-
From 0 to 1: Implementing Micro-frontend Architecture 001 [Study Notes]
Micro-frontends, JS isolation, CSS isolation, element isolation, lifecycle, preloading, data communication, application navigation, multi-level nesting. Note: This uses Mermaid's flowchart syntax, which is supported by Markdown renderers such as Typora, VitePress, and some Git platforms. Retained: Host application main-vue3; child applications: child-nuxt2-home, child-vue2-job, child-vu...
-
Nuxt3: Beginner's Guide and Principles Introduction [Learning Notes]
Nuxt 3: Getting Started and Principles 💡 What is Nuxt 3? Nuxt 3 is a full-stack frontend framework built on Vue 3 and Vite, supporting: Server-Side Rendering (SSR) Static Site Generation (SSG) Single-Page Applications (SPA) Building full-stack applications (with API support) Nuxt 3 is an "enhanced version" of Vue, helping you simplify project structure and development workflow. 🔧 Core Principles Feature How Nuxt Handles It ✅ Page Routing Automatic root...
-
TS Everest 004 [Study Notes]
Type manipulation type-1 // Built-in // Partial, Required, Readonly for modifying types // Pick, Omit for manipulating data structures // Exclude, Extract for manipulating union types // Parameters, ReturnType, infer // String types, template literal types `${}` + infer, PartialPropsOptional ...
-
TS Everest 003 [Study Notes]
Decorator // Decorator // Can only be used in classes (on the class itself, or class members) // Decorators, class decorators, property decorators, accessor decorators, parameter decorators //
1. Type Decorator: Used to extend a class, or can also return a subclass. //
First, `experimentalDecorators` must be enabled in `tsconfig.json`. `const classDecorator1 = -
TS Mount Everest 002 [Study Notes]
Generics /* * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git &a…
-
TS Everest 001 [Study Notes]
Course Outline: Set up a TypeScript development environment. Master TypeScript's basic, union, and intersection types. Understand the purpose and usage of type assertions in detail. Master type declaration methods for functions and classes in TypeScript. Master the purpose and definition of type aliases and interfaces. Master the application scenarios of generics and apply them proficiently. Flexibly apply conditional types, mapped types, and built-in types. Create and use custom types. Understand the concepts of namespaces and modules, and how to use...
-
In-depth Understanding of ES6 001 [Study Notes]
Block-Level Scope Binding
Previously, `var` variable declarations, regardless of where they were declared, were considered to be declared at the top of their scope. Since functions are first-class citizens, the typical order was `function functionName()`, followed by `var variable`.Block-Level Declarations
Block-level declarations are used to declare variables that cannot be accessed outside the scope of a specified block. Block-level scope exists in:
- Inside functions
- Within blocks (the region between `{` and `}`)Temporal Dead Zone
When the JavaScript engine scans code and finds variable declarations, it either hoists them to the top of the scope... -
In-depth Understanding of ES6 002 [Study Notes]
Strings and Regular Expressions. Strings and Regular Expressions. JavaScript strings have always been built based on 16-bit character encoding (UTF-16). Each 16-bit sequence is a code unit, representing a character. String properties and methods like `length` and `charAt()` are all constructed based on these code units. The goal of Unicode is to provide a globally unique identifier for every character in the world. If we limit the character length to 16 bits, the number of code points will not...
-
In-depth Understanding of ES6 003 [Study Notes]
Function parameter default values, as well as some details about the `arguments` object, how to use expressions as parameters, and the temporal dead zone for parameters. Previously, setting default values always relied on expressions containing the logical OR operator. When the preceding value was false, the latter value would always be returned. However, this became problematic if we passed 0 as an argument, requiring type verification. For example, `function makeRequest(url,timeout,callback){ timeout = t...`
-
In-depth Understanding of ES6 004 [Study Notes]
Extending object functionality
Ordinary objects: objects that possess all default internal behaviors of a JavaScript object.
Exotic objects: objects that possess certain internal behaviors that deviate from the default.
Standard objects: objects defined in the ES6 specification, such as Array/Date.
Built-in objects: objects that exist in the JavaScript execution environment when the script begins execution; all standard objects are built-in objects.
Object literal syntax extensions:
Shorthand for property initializers: when an object's property has the same name as a local variable, there's no need to write the colon and value.
Shorthand syntax for object methods...