Desmond

Desmond

An introvert who loves web programming, graphic design and guitar
github
bilibili
twitter
TypeScript 工具类型
属性修饰工具类型 Copy type Partial<T> = { [P in keyof T]?: T[P]; }; type DeepPartial<T extends object> = { [K in keyof T]?: T[K] extends…
TypeScript 逻辑运算
条件类型 Copy type LiteralType<T> = T extends string ? "string" : "other"; type Res1 = LiteralType<"linbudu">; // "string" type Res2…
cover

TypeScript 类型系统

结构化类型系统 Copy class Cat { meow() { } eat() { } // 去掉 eat 不会报错 } class Dog { eat() { } } function feedCat(cat: Cat) { } // 报错! feedCat…
TypeScript 泛型
类型别名中的泛型 Copy type Partial<T> = { [P in keyof T]?: T[P]; }; interface IFoo { prop1: string; prop2: number; prop3: boolean; prop4…
cover

TypeScript 类型编程

类型别名 抽离一组联合类型: Copy type StatusCode = 200 | 301 | 400 | 500 | 502; type PossibleDataTypes = string | number | (() => unknown); const status:…
TypeScript 类型基础
原始类型 Copy const name: string = 'linbudu'; const age: number = 24; const male: boolean = false; const undef: undefined = undefined; const nul:…
前端常用设计模式
抽象行为(behavior)模式 图片预览 我们的任务是这样的,给一个固定列表中的图片元素增加 “预览” 功能。在线演示 对应的 HTML 页面如下所示: Copy <!DOCTYPE html> <html lang="en"> <head> <meta charset…
cover
cover

组件封装的艺术

封装性、正确性、扩展性、复用性 轮播图 在线演示 1. 确定 UI 组件的 HTML 结构 Copy <div class="slider"> <ul> <li class="slider__item--selected"> <img src="https:…
Webpack 性能调优
Webpack 的优化瓶颈,主要是两个方面: Webpack 的构建过程太花时间 Webpack 打包的结果体积太大 构建过程提速策略 不要让 loader 做太多事情 —— 以 babel-loader 为例 最常见的优化方式是,用 include 或 exclude…
cover
cover
cover
cover
cover
cover

文本溢出截断省略

单行文本溢出省略 核心 CSS 语句 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行) text-overflow: ellipsis;(规定当文本溢出时…
cover

Tricks for Vue Composition API

Generically Typed Vue Components Defining components in Setup Generic props Using SFC as a base component Extracting Prop Types from SFC…
cover
cover
cover
cover
cover
cover

HTTP API 认证授权术 [转载]

原文:陈皓 - https://coolshell.cn/articles/19395.html 我们知道,HTTP 是无状态的,所以,当我们需要获得用户是否在登录的状态时,我们需要检查用户的登录状态,一般来说,用户的登录成功后,服务器会发一个登录凭证(又被叫作 Token…
Tips for Reactivity in Vue
Optional Reactivity Copy import { Ref, ref } from 'vue'; type MaybeRef<T> = Ref<T> | T; // example usage // ✅ Valid const raw: MaybeRef…
Shallow Dive into Injections in Vue
Refresh Library authors frequently use provide/inject API to transmit complex contextual information to their components and composition…
Async Function in Vue3 setup()
Problem When using asynchronous setup(), you have to use effects and lifecycle hooks before the first await statement. (details) Copy import…
cover
cover
cover
cover

浅析依赖管理

npm npm 是最早的依赖安装命令行工具,以下是 npm 如何安装依赖的步骤: 发出 npm install 命令 npm 会向 registry 查询模块压缩包的网址 下载压缩包,并将其存放在 ~/.npm 目录下 将压缩包解压到当前项目的 node_modules 目录中…
cover
cover

CSS 渲染性能优化

content-visibility Improve initial load time by skipping the rendering of offscreen content. 通常,许多网站在其页面上有很复杂的图形界面,并且一些内容可能会超出用户浏览器视野范围之外…
React Patterns
Provider Pattern Copy import React, { useState } from "react"; import "./styles.css"; import List from "./List"; import Toggle from "./Toggl…
Ownership of this blog data is guaranteed by blockchain and smart contracts to the creator alone.