Cao Note Interview and Technical Documentation
website·Indexed 30 days ago
https://caolinchao2.github.io/cao_noteA comprehensive collection of technical notes and interview preparation materials covering full-stack development. Key topics include JavaScript fundamentals and simulations, Vue 2 and Vue 3 core concepts, browser rendering and caching, HTTP, CSS, Java multi-threading, Spring ecosystem, distributed systems, Python asynchronous programming, and CI/CD practices with Testcontainers.
What's inside Cao Note
- Testcontainers is a modern integration testing solution that allows developers to run real Docker containers during the JUnit lifecycle. Unlike H2 (which simulates database behavior) or Mockito (which simulates return values), Testcontainers provides a high-fidelity environment by using the exact same versions of databases, message queues, and caches used in production. It automatically handles pulling images, waiting for containers to be ready, and cleaning up resources via the Ryuk (Resource Reaper) container to prevent leaked containers after JVM crashes.
Overview of Structural Design Patterns in Frontend Development
Structural patterns focus on how classes and objects are composed to form larger structures. Common patterns used in frontend development include:
- Proxy: Provides a substitute or placeholder for another object. Used in virtual scrolling, image lazy loading, and JavaScript Proxy-based reactivity.
- Decorator: Dynamically adds behavior to an object. Used in Higher-Order Components (HOC) and TypeScript decorators.
- Adapter: Converts one interface into another. Used for browser API compatibility and data format adaptation.
- Composite: Handles tree-like structures. Used in React/Vue component trees and menu rendering.
- Facade: Simplifies a complex system interface. Used to encapsulate complex APIs or utility libraries.
- Bridge: Separates abstraction from implementation. Used in cross-platform rendering.
- Flyweight: Shares fine-grained objects to minimize memory. Used to optimize lists with a large number of repetitive elements.
Overview of Browser Architecture components
Modern browser architecture is composed of several key layers and threads:
- Top Level: User Interface, Main Process, and the Browser Kernel.
- Rendering Engine: Contains the JS Engine, Execution Stack, and Event Trigger Thread.
- Asynchronous Handling:
- Message Queue: Manages Microtasks and Macrotasks.
- Network Thread: Handles asynchronous network requests.
- Timer Thread: Manages timers (e.g., setTimeout/setInterval).
Overview of Spring Cloud Core Components
Spring Cloud provides a set of tools for building distributed systems:
- Service Registry & Discovery: Nacos, Eureka (Nacos supports both registration and configuration, and allows switching between CP and AP modes).
- Configuration Center: Nacos Config.
- API Gateway: Spring Cloud Gateway (built on WebFlux for non-blocking I/O).
- Service Invocation: OpenFeign.
- Circuit Breaking & Rate Limiting: Sentinel, Resilience4j.
- Load Balancing: LoadBalancer.
- Distributed Tracing: Sleuth + Zipkin or SkyWalking.
Overview of Mockito for Java testing
Mockito is a popular Java testing framework used to create and configure mock objects, which allows developers to isolate the code under test by simulating the behavior of complex dependencies.Overview of Micro Frontend Architecture
Micro frontend architecture involves splitting a frontend application into smaller, simpler, and independent modules. Each module can be developed, tested, and deployed independently.
Key benefits include:
- Technology stack independence (different modules can use different frameworks).
- Independent development and deployment.
- Incremental upgrades of the system.
- Independent runtimes.
Common challenges to address include:
- Style isolation (preventing CSS leakage between modules).
- Communication mechanisms between micro-apps.
- Performance overhead due to multiple runtimes.
- Management of shared dependencies.
const microFrontends = { description: '将前端应用拆分为更小、更简单的独立模块,每个模块可以独立开发、测试、部署', benefits: ['技术栈无关', '独立开发部署', '增量升级', '独立运行时'], challenges: ['样式隔离', '通信机制', '性能开销', '公共依赖'] }Overview of Creational Design Patterns in Frontend Development
Creational patterns focus on the mechanisms of object creation. Common patterns used in frontend development include:
- Singleton: Ensures a class has only one instance. Used in Vuex/Pinia stores, global configurations, and popup managers.
- Factory: Encapsulates object creation logic. Used for creating different UI components or request instances.
- Abstract Factory: Creates families of related objects. Used in theme systems (e.g., Dark/Light theme component factories).
- Builder: Constructs complex objects step-by-step. Used in configuration builders or request builders.
- Prototype: Creates objects by cloning. Used in React component reuse and deep copying of objects.
Overview of Java project CI/CD workflow
A typical Java project CI/CD pipeline consists of several sequential stages to ensure code quality and reliable deployment. The standard flow is:
- Code Submission: Pushing code via Git.
- Code Analysis: Static analysis using tools like SonarQube, Checkstyle, or PMD.
- Unit Testing: Logic verification using JUnit, TestNG, or Mockito.
- Build & Package: Compiling source code into JAR/WAR files using Maven or Gradle.
- Image Construction: Packaging the application into a Docker image (e.g., via Docker or Jib).
- Test Deployment: Deploying to a staging/pre-release environment using kubectl, Helm, or Ansible.
- Integration Testing: End-to-end testing with REST Assured, Selenium, or Testcontainers.
- Production Deployment: Final release via Spinnaker, ArgoCD, or Jenkins.
Overview of Spring Framework Modules
The Spring Framework is organized into several key modules:
- Core Containers: Beans, Core, Context, and SpEL (the foundation for IOC).
- AOP: Aspect-Oriented Programming for decoupling cross-cutting logic.
- Data Access: JDBC, ORM, and Transaction management.
- Web: Spring MVC and WebFlux.
- Testing: Support for unit and integration testing.
Spring Boot and Spring Cloud are extensions built on top of these core modules.
Overview of Behavioral Design Patterns in Frontend Development
Behavioral patterns focus on communication between objects. Common patterns used in frontend development include:
- Observer: One-to-many dependency notification. Used in event systems and reactive data.
- Publish-Subscribe: Decouples publishers from subscribers. Used in EventBus and cross-component communication.
- Strategy: Allows switching between a family of algorithms. Used in form validation, animation strategies, and sorting.
- State: Changes behavior based on internal state. Used in state machines (e.g., XState) and UI state transitions.
- Chain of Responsibility: Processes requests in a chain. Used in middleware, Vue Router guards, and event bubbling.
- Template Method: Defines the skeleton of an algorithm. Used in React/Vue component lifecycles.
- Iterator: Sequentially accesses elements of a collection. Used in JavaScript Iterators and Generators.
- Command: Encapsulates a request as an object. Used for undo/redo functionality and operation logs.
- Memento: Saves and restores previous states. Used for state history rollback.
- Mediator: Decouples communication between objects. Used in coordinating dialog components.
- Visitor: Separates an operation from the object structure. Used in AST (Abstract Syntax Tree) traversal.
Overview of Spring Cloud Alibaba Microservices Architecture
A typical Spring Cloud Alibaba microservices architecture consists of the following layers and components:
- API Gateway (Spring Cloud Gateway): Acts as the single entry point for clients/apps, handling authentication, rate limiting, routing, and CORS.
- Microservices (Business Logic): Independent services (e.g., Auth, Business, Order) that handle specific domain logic.
- Service Discovery & Configuration (Nacos): A centralized server used for service registration, discovery, and dynamic configuration management.
- Traffic Control & Circuit Breaking (Sentinel): A dashboard and agent system used for flow control and preventing cascading failures (snowball effect).
- Distributed Tracing (Zipkin / SkyWalking): Tools used to visualize the full call chain across multiple services for debugging and performance monitoring.
Overview of the Mini Program Logic Layer
The logic layer of the mini program framework uses a JavaScript engine to provide the runtime environment for developer code and specific WeChat mini program features. It processes data and sends it to the view layer, while receiving event feedback from the view layer.
Key constraints: The logic layer does not run in a browser; therefore, Web APIs such as
windowanddocumentare unavailable.