DOCSEARCHbyAlgolia
Submit Docs

FE Code Challenges

website·Indexed 30 days ago

https://mingyuli97.github.io/blog/

A collection of front-end coding challenges and technical notes, featuring JavaScript API implementations (Promise.all, Promise.race, Array.prototype.map), design patterns like publish-subscribe, and data structure exercises such as tree-to-list conversion and deep copying. The site also includes backend notes on MySQL operations and detailed design analysis of Vue.js reactivity and rendering systems.

Tokens
74.4K
Snippets
301
Records
483
Agent score
75%

What's inside FE Code Challenges

  1. Overview of the Vue template compilation process

    Vue template compilation converts a developer's template string into a render function. This process occurs in three distinct stages:

    1. Parsing: The template string is parsed to generate an Abstract Syntax Tree (AST) representing the virtual DOM.
    2. Optimization: The AST is recursively traversed to mark static nodes and static root nodes to optimize the Diffing process.
    3. Generation: The optimized AST is used to generate the final render function.

  2. Overview of TypeORM and its supported platforms

    TypeORM is an Object-Relational Mapping (ORM) framework designed to work with TypeScript and JavaScript (ES5, ES6, ES7, ES8). It allows developers to interact with databases using object-oriented patterns instead of writing raw SQL. It is compatible with a wide range of platforms, including NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, Expo, and Electron.

  3. Understand Node.js Stream types

    Streams in Node.js are abstract interfaces used to handle streaming data by breaking it into small chunks. This reduces memory consumption and improves data transfer efficiency. There are four primary types of streams:

    • Readable: Used to read data from a source (e.g., reading a file or an HTTP request).
    • Writable: Used to write data to a destination (e.g., writing to a file or an HTTP response).
    • Duplex: A stream that supports both reading and writing simultaneously (e.g., an SSH session).
    • Transform: A type of Duplex stream that can transform the data as it is read and written (e.g., data compression or encryption).

  4. Specify acceptable response formats with the Accept header

    The Accept header informs the server about the media types (Content-Type) the client can handle and their relative priority (using the q parameter).
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

  5. Understand how Tree Shaking removes dead code in Webpack

    Tree Shaking relies on the static analysis capabilities of ES6 import and export to remove code during the compilation phase. It targets 'Dead Code', which includes:

    1. Code that will never be executed (e.g., code inside an if (false) block or code following a return statement).
    2. Variables or functions that are declared/assigned but never used.
    function foo() {
  if (false) {
    console.log('This will be shaken out');
  }
  return;
  console.log('This will also be shaken out');
}

function unusedFn(x) {
  return x + 1;
}
// unusedFn is never called, so it can be removed

  6. Understand CDN core concepts and architecture

    A Content Delivery Network (CDN) is a distributed system of servers (edge servers) located in various geographical locations. The primary goal is to store content closer to the end-user to reduce latency and avoid fetching data from a distant origin server for every request.

  7. Understand the goals and components of Frontend Engineering

    Frontend Engineering (前端工程化) is defined as a series of toolchains designed to reduce costs, improve efficiency, and ensure quality. It primarily consists of two pillars:

    1. Standardization (规范化): Establishing consistent directory structures, file naming conventions, coding standards (using tools like ESLint and Prettier), and Git workflow specifications.
    2. Compilation (编译): Transforming source code into browser-compatible formats. This includes using Babel for modern JavaScript syntax conversion, using CSS pre-processors like Less or Sass, and compiling TypeScript (TS) into JavaScript via tsc or Babel.

  8. Intercept object operations using Proxy

    The Proxy object allows you to create a wrapper for another object (the target), enabling you to intercept and customize fundamental operations such as property lookup, assignment, enumeration, and function calls. A Proxy is initialized with the target object and a handler object containing 'traps' (methods) that define the interception behavior.
    const obj = { name: 'limy' };
const handler = {
  get(target, property) {
    console.log('get', target, property);
    return target[property];
  },
  set(target, property, value) {
    console.log('set', target, property);
    target[property] = value;
    return true; // set traps should return a boolean
  }
};

const proxy = new Proxy(obj, handler);
console.log(proxy.name); // Triggers 'get' trap
proxy.name = 'ccc';      // Triggers 'set' trap

  9. Vue rendering process workflow

    The Vue rendering pipeline follows these three primary steps:

    1. Template Compilation: The template is compiled into an Abstract Syntax Tree (AST), which is then converted into a render function.
    2. Virtual DOM Generation: The render function is executed to produce a Virtual DOM (vnode).
    3. DOM Patching: The patch function is called, using createElement recursively to convert the Virtual DOM into the actual real DOM.

  10. Understand Pinia core features

    Pinia is a state management store for Vue with the following key characteristics:

    1. Stores are independent and distinguished by a unique key.
    2. There are no Mutations; Actions support both synchronous and asynchronous operations.
    3. State and actions are accessed directly without the need for commit or dispatch patterns.

  12. Understand the Rollup build process

    Rollup operates in two primary phases: the Build phase and the Output phase.

    1. Build Phase: Rollup parses module content and dependency relationships. The result is a bundle object that stores these relationships and exposes generate and write methods. It does not perform the actual bundling of code into a final file yet.
    2. Output Phase: This phase handles the actual bundling of code. The write method writes the final bundle to disk, whereas the generate method does not.