DOCSEARCHbyAlgolia
Submit Docs

VitePressBlob Documentation

website·Indexed 30 days ago

https://jiangshuangquan.github.io/VitePressBlob/

A technical knowledge base covering front-end development fundamentals, including CSS (layout, box model, animations, and masks), TypeScript (decorators, vue-class-component, and tsconfig.json), Regular Expressions, and engineering practices such as Webpack build strategies, AST, and Jest unit testing. It also includes source code analysis of jQuery (jq) core logic, XHR requests, and event triggers.

Tokens
35.1K
Snippets
186
Records
231
Agent score
75%

What's inside VitePressBlob

  1. Overview of vue-class-component

    vue-class-component allows developers to define Vue components using classes. This approach provides several advantages:

    • Class-based Components: Use classes to define components, enabling inheritance and the mixing of functionality.
    • Decorators: Use decorators to specify component options, lifecycle hooks, and custom properties.
    • Mixins: Reuse common logic and functionality across multiple components via mixins.
    • TypeScript Support: Full TypeScript support for creating type-safe Vue components.

  2. Overview of CSS layout methods

    There are eight primary ways to handle layout in CSS:

    • Normal Flow: display: block or inline
    • Float Layout: float: left or right
    • Positioning Layout: position: relative, absolute, or fixed combined with top, bottom, left, right, and z-index
    • Table Layout: Using table series attributes
    • Flexbox Layout: display: flex or inline-flex and flex series attributes
    • Multi-column Layout: column series attributes
    • Grid Layout: display: grid or inline-grid and grid series attributes
    • Responsive Layout: Using relative units (em, rem, vw, vh, vmin, vmax) and Media Queries

  3. Overview of vue-property-decorator

    vue-property-decorator is a Vue.js plugin based on decorator syntax that extends the way Vue components are defined, making Single File Components (SFCs) more concise and readable. It relies internally on vue-class-component to transform TypeScript classes into Vue instances using metaprogramming.

  4. Understand the purpose of tsconfig.json

    TypeScript uses the tsconfig.json file as its primary configuration file. The presence of this file in a directory marks that directory as the root of a TypeScript project. The file typically serves two main purposes: specifying which files should be compiled and defining the compilation options.

  5. Understand Horizontal and Vertical Fuzzy Matching in RegExp

    Regular expressions provide 'fuzzy matching' to handle variable string lengths or variable characters at a specific position.

    • Horizontal Fuzzy Matching: Matches strings where the length is not fixed. This is typically achieved using quantifiers like {m,n}.
    • Vertical Fuzzy Matching: Matches a specific position in a string that can be one of several different characters. This is achieved using character sets like [abc].
    // Horizontal: match 'a', then 2 to 5 'b's, then 'c'
var regexH = /ab{2,5}c/g;
'abc abbc abbbc abbbbc abbbbbc abbbbbbc'.match(regexH);
// => ["abbc", "abbbc", "abbbbc", "abbbbbc"]

// Vertical: match 'a', then any one of 1, 2, or 3, then 'b'
var regexV = /a[123]b/g;
'a0b a1b a2b a3b a4b'.match(regexV);
// => ["a1b", "a2b", "a3b"]

  7. Understand Abstract Syntax Tree (AST) basics

    An Abstract Syntax Tree (AST) is an abstract representation of the syntactic structure of source code. It represents the programming language's grammar in a tree-like format, where each node in the tree corresponds to a specific structural element of the source code (such as literals, identifiers, expressions, and statements).

  8. Understand jQuery attribute and property hooks mechanism

    jQuery uses a 'hooks' pattern to allow special handling of specific attributes or properties. Before performing an operation, jQuery checks if the attribute name exists in a corresponding hooks object. This allows the library to provide custom logic for certain properties while maintaining a generic path for others. The hooks are looked up as follows:

    • Attribute hooks: jQuery.attrHooks[name.toLowerCase()]
    • Property hooks: jQuery.propHooks[name]
    • Value hooks: jQuery.valHooks[this.type] or jQuery.valHooks[this.nodeName.toLowerCase()]
    // Example of how hooks are resolved internally
const hooks = jQuery.attrHooks[name.toLowerCase()];
const propHooks = jQuery.propHooks[name];
const valHooks = jQuery.valHooks[this.type] || jQuery.valHooks[this.nodeName.toLowerCase()];

  9. Understand Jest unit testing basics

    Unit testing involves verifying the smallest testable units of software. In Jest, two primary functions are used: test(), which defines the test case and determines if it passes, and expect(), which specifies the expected outcome (the 'expectation') of the code being tested.

  10. Import code snippets from external files

    Import code snippets from existing files using the <<< syntax. You can specify line highlighting, custom language overrides, and line numbers within curly braces {}. The @ prefix refers to the project source directory (defaults to the project root unless srcDir is configured).
    <<< @/filepath

<!-- With line highlighting -->
<<< @/filepath{1,2,4-6}

<!-- With language override (e.g., C#) -->
<<< @/snippets/snippet.cs{c#}

<!-- With language override and line numbers -->
<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}

  11. Manage internal and external links in VitePress

    VitePress handles links specifically for SPA navigation and external security:

    • Internal Links: Converted to router links. index.md files in subdirectories are automatically treated as the directory root (e.g., /foo/index.md becomes /foo/). You can omit the .md extension or use .html.
    • External Links: Automatically assigned target="_blank" and rel="noreferrer".
    [Home](/) <!-- root index.md -->
[foo](/foo/) <!-- index.html of directory foo -->
[bar - three](../bar/three) <!-- omit extension -->
[bar - three](../bar/three.md) <!-- append .md -->
[vuejs.org](https://vuejs.org) <!-- external link -->

  12. Verify third-party scripts using Subresource Integrity (SRI)

    To ensure that third-party scripts have not been tampered with, use the integrity attribute on <script> or <link> tags. This attribute should contain a base64-encoded cryptographic hash of the file.
    <script
  src="https://example.com/example-framework.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux..."
  crossorigin="anonymous"
></script>