daidai's Blog - Frontend Development Notes

Taro is a multi-platform framework that supports H5, ReactNative, and various mini-programs including WeChat, JD, Baidu, Alipay, ByteDance, QQ, DingTalk, Enterprise WeChat, and Feishu.

Key syntax and architectural notes:

• Syntax is consistent with React or Vue.
• Uses mini-program components (HTML is also supported).
• Mini-program API calls are accessed via the Taro. namespace.
• Routing is configured within the page field rather than using a traditional router.
• Network requests are made using Taro.request() instead of axios.

The <head> element contains information about the page that is not displayed to the user. Key tags include:

• <meta charset="utf-8" />: A self-closing tag that sets the character encoding to UTF-8 to ensure proper display of international characters.
• <title>: Defines the browser tab title. It should be placed after the <meta> charset tag.
• SEO Meta tags: Use name="description" and name="Keywords" to improve search engine optimization (SEO) and matching rates.

To improve performance and security in large projects, a three-tier architecture is used to prevent a single server from becoming a bottleneck. This introduces a middle layer (often implemented using Node.js or PHP).

• B/S/S (Browser/Server/Server) or C/S/S (Client/Server/Server):
  • First Server: Handles business logic processing.
  • Second Server: Handles data processing and management.

Vue 2 achieves reactivity by combining data hijacking with a Publisher-Subscriber pattern. When a Vue instance is created, it recursively traverses the data object and uses Object.defineProperty to convert properties into getters and setters.

Key components of the reactivity system:

1. Observer: Recursively adds getters and setters to data objects to detect changes.
2. Compile: Parses template directives, replaces variables with data, and binds update functions to DOM nodes.
3. Watcher: Acts as the bridge between Observer and Compile. It registers itself with a dependency tracker (Dep) and triggers the update() method to refresh the view when the Observer notifies it of a change.
4. Dep: The dependency manager that collects and notifies subscribers (Watchers).

Procedural programming focuses on the steps required to solve a problem, implementing them via a sequence of function calls. It generally offers higher performance and is suitable for hardware-level programming (e.g., microcontrollers) but lacks flexibility and reusability.

Object-Oriented Programming (OOP) decomposes problems into objects that collaborate based on their functions. It is characterized by encapsulation, inheritance, and polymorphism. OOP is more flexible, easier to maintain, and better for large-scale collaborative projects, though it may have lower performance than procedural programming.

A modern web page is composed of three distinct layers to ensure the separation of structure, style, and behavior:

• HTML (HyperText Markup Language): Defines the structure and content of the page.
• CSS (Cascading Style Sheets): Handles the visual presentation, layout, and styling.
• JS (JavaScript): Implements the interactive logic and behavior.

Web applications typically follow one of two primary two-tier architectures:

1. B/S (Browser/Server) Architecture: The application runs in a browser.
   • Pros: No installation required, users always access the latest version, and it is cross-platform (works across monitors, phones, iPads).
2. C/S (Client/Server) Architecture: The application is a standalone client installed on the device.
   • Pros: Generally faster performance.
   • Cons: Requires manual download and updates.

Developers and designers use specific tools to move from concept to code:

• XMind: Used for creating mind maps to analyze page structures, business functions, and process flows.
• Axure RP / Modao (墨刀): Used for creating professional prototypes (wireframes) to visualize layout and interaction before UI design begins.
• Photoshop: Used for processing visual assets and materials.
• WebStorm: Used for actual coding and development.

Vue implements the MVVM (Model-View-ViewModel) pattern to provide two-way data binding.

• Model: The data layer.
• View: The DOM/UI layer.
• ViewModel: The glue (Vue instance) that integrates the Observer, Compile, and Watcher to ensure that changes in the Model update the View, and user interactions in the View update the Model.