DOCSEARCHbyAlgolia
Submit Docs

Frontend Development Learning Notes

website·Indexed 31 days ago

https://docsv3.hgyn23.cn

A collection of technical guides and notes on frontend development, featuring deep dives into Vue.js (Vue 2 and 3) reactivity, the double-ended diff algorithm, and template DSL compilers. It covers JavaScript core concepts like Promises/A+, design patterns, debounce/throttle implementations, and browser rendering processes, alongside practical guides on site deployment and low-code platform schemes.

Tokens
52.6K
Snippets
171
Records
265
Agent score
50%

What's inside Frontend Notes

  1. Overview of the Vue.js Template Compilation Workflow

    Vue.js template compilation is the process of translating a template DSL (Domain Specific Language) into a JavaScript render function. The workflow consists of three primary stages:

    1. Parse: Performs lexical and syntactic analysis on the template string to produce a Template AST.
    2. Transform: Converts the Template AST into a JavaScript AST.
    3. Generate: Converts the JavaScript AST into final JavaScript code (the render function).
    const templateAST = parse(template) // Template parsing
const jsAST = transform(templateAST) // Template transformation
const code = generate(jsAST) // Code generation

  2. Overview of Mustache template syntax

    Mustache is a logic-less template engine that uses 'mustaches' (double curly braces) to identify placeholders for dynamic data.

    Key syntax elements include:

    • {{data}}: A variable placeholder. It outputs the value associated with the key data from the provided data object.
    • {{#data}} ... {{/data}}: A section block. It is used for conditional rendering or iterating over a list (similar to v-for in Vue).
    • {{.}}: An enumeration placeholder used inside a section block to output the current item in an array iteration.
    // Example: Variable interpolation
var template = `<div>{{data}}</div>`;
var data = "hello world";
var html = mustache.render(template, data);
// Output: <div>hello world</div>

// Example: Array iteration
var template = `<div>{{#hobbies}}<li>{{.}}</li>{{/hobbies}}</div>`;
var data = { hobbies: ["singing", "dancing", "rap"] };
var html = mustache.render(template, data);
// Output: <div><li>singing</li><li>dancing</li><li>rap</li></div>

  3. Architecture of a simple Mustache Render function

    The core of a template engine is the render function. It follows a two-step process: first, it parses the template string into a set of Tokens (an intermediate representation similar to an AST), and then it combines these tokens with the provided data to produce the final HTML string.
    window.my_templateEngine = {
  render(templateStr, data) {
    // 1. Convert string template to tokens array
    var tokens = parserTemplateToTokens(templateStr);
    // 2. Combine tokens with data to render the final template
    var resTemplate = renderTemplate(data, tokens);
    return resTemplate;
  }
};

  4. Understand Block Formatting Context (BFC) and its rendering rules

    A Block Formatting Context (BFC) is a rendering area in a web page defined by the W3C CSS2.1 specification. It has a specific set of rendering rules that determine how child elements are positioned and how they interact with other elements.

    Key rendering rules for BFCs include:

    1. Vertical margins of BFCs collapse.
    2. A BFC region will not overlap with the box of a floating element.
    3. A BFC acts as an independent container; elements outside the BFC do not affect elements inside it.
    4. When calculating the height of a BFC, floating elements are included in the calculation.

  5. Understand the difference between Forward Proxy and Reverse Proxy

    Proxies act as intermediaries between a client and a server. The primary difference lies in which side of the connection the proxy represents:

    • Forward Proxy: Deployed on the client side. It hides the identity of the actual client from the server. The server perceives the request as coming from the proxy server rather than the original client.
    • Reverse Proxy: Deployed on the server side. It hides the identity of the actual backend server from the client. The client perceives the response as coming from the proxy server, while the actual server providing the response remains invisible to the client.

  6. Understand ES6 Class inheritance mechanism

    ES6 class inheritance is syntactic sugar for prototype-based inheritance. Specifically, it implements a pattern known as parasitic combination inheritance to handle both instance properties and static methods.
    class Person {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
    eating() {
        console.log(this.name + ' eating');
    }
}

class Student extends Person {
    constructor(name, age, sno) {
        super(name, age);
        this.sno = sno;
    }
    study() {
        console.log(this.name + this.sno + ' studying');
    }
}

  7. Understand Chrome's Multi-Process Architecture

    Modern browsers like Chrome use a multi-process architecture to improve stability and security. The primary processes include:

    • Browser Process: The main process managing the browser shell and coordination.
    • Renderer Process: Responsible for rendering the page (one per tab/site).
    • GPU Process: Handles graphics compositing and hardware acceleration.
    • Network Process: Manages network requests and data retrieval.
    • Plugin Process: Handles browser plugins.

  8. Implement the Observer Pattern in JavaScript

    The Observer pattern defines a one-to-many dependency between objects. When a target object's state changes, it automatically notifies all registered observer objects to update themselves. In JavaScript, this is frequently referred to as the Publish-Subscribe (Pub-Sub) pattern, where the two core roles are the 'Publisher' and the 'Subscriber'.

  9. Understand Vue.js Server-Side Rendering (SSR) benefits

    Server-Side Rendering (SSR) is a technique where the server handles the assembly of the page's HTML structure before sending it to the browser, which then binds state and events to make it interactive. Unlike Single Page Applications (SPA) that rely on AJAX to fetch JS and render HTML on the client, SSR provides the complete template and data upon the first request. Key benefits include:

    • Better SEO: Search engine crawlers can directly view fully rendered pages.
    • Faster Time-to-Content: Improved initial load performance, especially on slow networks or devices.

  10. Understand JavaScript Generator functions and the Iterator protocol

    A Generator function is a state machine that returns an iterator object. Unlike regular functions, Generators can be paused and resumed. The yield keyword acts as a pause marker. Calling the .next() method on the iterator resumes execution until the next yield or the end of the function. Each .next() call returns an object with value (the yielded value) and done (a boolean indicating if the generator has finished).
    function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();
hw.next(); // { value: 'hello', done: false }
hw.next(); // { value: 'world', done: false }
hw.next(); // { value: 'ending', done: true }
hw.next(); // { value: undefined, done: true }

  11. Use the State Pattern to manage complex object behaviors

    The State pattern allows an object to alter its behavior when its internal state changes, making the object appear as if it has changed its class. This pattern is specifically used to simplify complex conditional expressions that control an object's state by transferring the logic into a series of state-specific classes.

  12. Understand the JavaScript Event Loop execution mechanism

    JavaScript is single-threaded, meaning all synchronous tasks execute on the main thread in an execution context stack. To handle asynchronous operations without blocking the main thread, JavaScript uses an Event Loop.

    The core cycle is as follows:

    1. All synchronous tasks in the call stack are executed until the stack is empty.
    2. Once the stack is empty, the engine checks the microtask queue. If it contains tasks, all microtasks are executed sequentially until the queue is empty.
    3. After the microtask queue is cleared, the engine picks the first available macrotask from the macrotask queue and pushes it onto the call stack for execution.
    4. This process repeats indefinitely.

    Crucially, microtasks always execute before the next macrotask in the same event loop cycle.