- 博客(925)
- 收藏
- 关注
RSS订阅转载 Typescript高级技巧-基本类型中的const
使用对象初始化变量时，TypeScript 认为该对象的属性是可以被更改的。例如，如果您编写了这样的代码：const obj = { counter: 0 };if (someCondition) { obj.counter = 1;}TypeScript 不会认为把 counter 从0改为1是错误的，只要 counter 符合数字类型就可以。function handleRequest...
2023-01-03 12:52:06
528
转载 TS 索引访问类型
我们可以使用索引访问类型来查找另一种类型的特定属性：type Person = { age: number; name: string; alive: boolean };type Age = Person["age"];// type Age = number索引类型本身就是一种类型，因此我们可以与联合类型、keyof 或其他类型配合使用：typeI1=Person["age"|...
2023-01-02 12:00:32
658
转载 使用 shallowRef() 来绕开深度响应
Vue 的响应性系统默认是深度的。虽然这让状态管理变得更直观，但在数据量巨大时，深度响应性也会导致不小的性能负担，因为每个属性访问都将触发代理的依赖追踪。好在这种性能负担通常这只有在处理超大型数组或层级很深的对象时，例如一次渲染需要访问 100,000+ 个属性时，才会变得比较明显。因此，它只会影响少数特定的场景。Vue 确实也为此提供了一种解决方案，通过使用 shallowRef() 和 sha...
2023-01-01 11:19:29
898
转载 TypeScript中的枚举和普通对象的区别
下面定义了一个字符串枚举：enum DayEnum { day = '天', week = '周', month = '月', year = '年'}这样看起来，和对象好像没有什么区别，如果我们建立一个对象，也能建立 key 对 value 的映射。const DayEnum = { day: '天', week: '周', month: ...
2022-12-26 09:41:58
692
转载 TS 中 type 和 interface 的区别
类型别名（type）会给一个类型起个新名字。类型别名有时和接口很像，但是可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。1、都可以描述一个对象或者函数【interface】interface User { name: string, age: number}interface SetUser { (name: string, age: number)...
2022-12-25 16:17:39
699
转载 理解 webpack 打包过程
webpack 是一个打包工具（bundler），它打包的是什么呢？模块。什么是模块？一个文件就是一个模块，但是一个文件可以引入很多个其他模块。那模块能再拆分么？不能了，模块是 webpack 处理的基本单位了，只是对模块做一些打包。那怎么对模块打包呢？首先要找到所有的模块(Module)，从入口模块开始，分析依赖，构成一个图，叫做模块依赖图(ModuleGraph)。然后模块要分成几个包，要有一...
2022-12-20 08:00:50
157
转载 深入理解层叠上下文优先级
我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。某些元素的渲染顺序是由其 z-index 的值影响的。这是因为这些元素具有能够使他们形成一个层叠上下文的特殊属性。文档中的层叠上下文由满足以下任意一个条件的元素形成：文档根元素（<h...
2022-12-19 08:00:54
109
转载 前端如何处理emoji表情符号
前端页面将用户带有emoji表情符号的留言发送给后端保存后，前端页面从后端获取留言再次展现。但是到再次从后端获取留言展示时，emoji表情符号不能正确展示。我就奇怪了,emoji表情也是文本内容,怎么就发送失败呢,我通过Chrome调试之后发现,向后台发送的时候就显示失败了,也就是后台没有存进去,之后我就去找后台联调, 查阅资料之后发现,emoji所占的字节数为4个字节,就是js的编码导致的问题,...
2022-12-18 20:09:06
1346
转载 使用 filter 置灰网站需要注意！
最近在做一个置灰网站的需求，我跟大部分网站一样使用了 CSS 的 filter 滤镜功能，但是事情并没有原本的那么简单，如果使用不当，还会引发线上事故。位置问题代码如下：<!DOCTYPE html><html lang="en"><head> <style> .container { /* filter: graysca...
2022-12-07 19:49:12
393
转载 canvas 对象的像素数据
深入了解 Canvas 画布真实像素的原理，事实上，你可以直接通过 ImageData 对象操纵像素数据，直接读取或将数据数组写入该对象中。ImageData 对象ImageData 对象中存储着 canvas 对象真实的像素数据，它包含以下几个只读属性：width 图片宽度，单位是像素height 图片高度，单位是像素data Uint8ClampedArray 类型的一维数组，包含着 RGBA...
2022-12-04 08:00:14
209
转载 新的CSS视口单位
要调整视口大小，可以使用vw和vh单位。vw=视口大小宽度的1%。vh=视口大小高度的1%。给一个元素 100vw 的宽度和 100vh 的高度，它将完全覆盖视口。虽然现有的设备在桌面上运行良好，但在移动设备上则不同。在那里，视口大小受动态工具栏的存在或不存在的影响。这些是用户界面，如地址栏和选项卡栏。虽然视口大小可以更改，但 vw 和 vh 大小不会更改。因此，大小为 100vh 的元素将从视口...
2022-12-03 11:58:59
452
转载 谈谈过度设计
简单来说，过度设计就是进行了过多的面向未来的设计，进行了不必要的抽象封装，为系统增加了不必要的复杂度。举个例子，你要做一个功能模块，但你考虑到到这个系统里还有几个未完成的模块和你要做的东西类似，所以你决定为此额外做一些抽象和封装，以便将来复用。然而到后来你开发那些相似的模块时你才发现，可能是由于抽象不足或抽象错误，你不得不重新修改之前的封装才能完成复用，导致最终成本实际上还不如不做；或者你发现复用...
2022-11-30 09:41:56
301
转载 核心 Web 指标
Web 指标不断优化用户体验是所有网站取得长远成功的关键。Web 指标都能帮助您量化网站的体验指数，并发掘改进的机会。核心 Web 指标的构成指标会随着时间的推移而发展 。当前针对 2020 年的指标构成侧重于用户体验的三个方面——加载性能、交互性和视觉稳定性——并包括以下指标（及各指标相应的阈值）：Largest Contentful Paint (LCP) ：最大内容绘制，测量加载性能。为了提...
2022-11-29 10:03:31
173
转载 组件库都在使用CSS变量了
CSS 变量是一个非常有用的功能，几乎所有浏览器都支持。（IE：啊这？)如何解决 IE 关于 css var 的适配问题呢？通过 webpack 的 postcss-loader + postcss-css-css-variable 编译生成固定的代码。:root { --white: #fff; --black: #000;}a { border: 1px solid var(-...
2022-11-24 22:45:32
268
转载 KeepAlive 与 LRU 最大缓存实例数
我们可以通过传入 max prop 来限制可被缓存的最大组件实例数。KeepAlive 的行为在指定了 max 后类似一个 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。<KeepAlive :max="10"> <component :is="activeComponent" /></...
2022-11-22 08:00:09
435
转载 中止一个或多个 Web 请求
我们在处理前后端交互的过程中，有时需要仔细斟酌接口的请求时机（例：频繁的Tab切换、树节点切换、数据录入时，请求什么时候发？）或接口返回数据的处理时机（例：接口还没返回时就要切换路由，路由都切换走了，之前请求的数据怎么办？），避免一些无用的请求或者接口返回顺序的差异（例如：同一个按钮点了多次，如果后点的先返回，先点的后返回，怎么办？）。常见的处理方式有：加防抖：控制请求时机。对于频繁操作，只在最后...
2022-11-21 08:00:22
167
转载 css实现三列等宽等间距排列(九宫格)
float设置浮动和外间距每个方块设置左浮动，宽度30%，左外间距2.5%。100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%代码.item { width: 30%; margin-left: 2.5%; margin-bottom: 10px; background: pink; height: 100px; float: left;...
2022-11-20 08:00:31
892
转载 表单提交类型
普通表单提交HTML<form>元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。关于提交表单的属性1.action，处理表单提交的 URL2.enctype，当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的值有：application/x-www-form-urlencoded，mult...
2022-11-19 20:51:35
193
转载 position: sticky 属性
关于 position 属性主要有五个值：staticrelativefixedabsolutesticky常见的就是 relative 和 absolute 这两个属性。relative 表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。absolute 表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。比较复杂的是 sticky 属性。...
2022-11-13 22:48:38
242
转载 小程序中使用分包
分包支持分包的小程序目录结构如下：├── app.js├── app.json├── app.wxss├── packageA│ └── pages│ ├── cat│ └── dog├── packageB│ └── pages│ ├── apple│ └── banana├── pages│ ├── index...
2022-11-12 10:25:55
640
转载 Symbol.iterator 遍历器接口
Iterator（遍历器）的概念JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。[ [1, 2], {a: 1, b: 2}, new Set([1, 2]), new Map([['a',1],['b',2]])]这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员...
2022-11-07 08:00:10
660
转载 Vite HMR API
import.meta是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的 URL。<script type="module"> console.log(import.meta) // {url: 'http://127.0.0.1:5500/dist/index.html?a=1'}</script>im...
2022-11-06 10:51:26
192
转载 尤雨溪：Turbopack真的比Vite快10倍吗？
大家好，我是 CUGGZ。10 月 25 日，Vercel 推出了下一代打包工具：Turbopack，它是基于 Rust 的 Webpack 继任者，其文档中提到，Turbopack 比 Vite 快 10 倍。11 月 1 日，Vue、Vite 作者尤雨溪发表文章 《Is Turbopack really 10x Faster than Vite?》，对 Turbopack 和 Vite 进行了...
2022-11-03 22:39:27
851
转载 小程序与普通网页开发的区别
小程序简介小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层...
2022-10-31 08:00:53
750
转载 组合式 API 中使用 TypeScript
当使用<script setup>时，defineProps()宏函数支持从它的参数中推导类型：<script setup lang="ts">const props = defineProps({ foo: { type: String, required: true }, bar: Number})props.foo // stringprop...
2022-10-30 11:41:16
205
转载 effectScope 创建一个 effect 作用域
effectScope 是 Vue 3.2.0 引入的新 API，属于响应式系统的高阶内容。从字面上理解，它就是 effect 作用域，用于收集在其中所创建的副作用，并能对其进行统一的处理。除非是开发独立的库，我们几乎不会用到 effectScope。尽管如此，了解 effectScope 对于我们理解 Vue 3 源码或是其它开源库（比如 VueUse）还是很有必要的。// 在 scope 中创...
2022-10-23 22:27:10
612
转载 理解vue3的watch函数
计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。在组合式 API 中，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数。侦听数据源类型watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个...
2022-10-19 09:47:55
613
1
转载 复合属性：flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 ...
2022-10-17 22:57:35
169
转载 小程序基础知识
Page(Object object) 注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。//index.jsPage({ data: { text: "This is page data." }, onLoad: function(options) { // 页面加载时触发。一个页面只会调用一次，可以在 o...
2022-10-10 20:59:46
86
转载 深入理解 useState
useStateconst [state, setState] = useState(initialState)返回一个 state，以及更新 state 的函数。在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得，则可以传入...
2022-10-09 20:13:17
389
转载 for-of与其他遍历语法的比较
以数组为例，JavaScript 提供多种遍历语法。最原始的写法就是 for 循环。for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]);}这种写法比较麻烦，因此数组提供内置的 forEach 方法。myArray.forEach(function (value) { c...
2022-09-19 22:30:23
85
转载 async 函数优雅的处理错误
如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject。async function f() { await new Promise(function (resolve, reject) { throw new Error('出错了'); });}f().then(v => console.log(v)).catch(...
2022-09-18 23:01:20
334
转载 理解 rem 方案原理
设计师交付给前端开发一张宽度为750px的视觉稿，设计稿上元素的尺寸、颜色、位置等已做过标注，要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。首先设计稿是基于 iPhone6 设计的也就是宽度 750px。（先不考虑dpr的问题下面会说）然后设置 1rem 等于 100px（ HTML font-size 为 100px），相当于 7.5rem = 100%宽度 = 设备的宽度。750 ...
2022-09-17 15:12:09
84
转载 CSS 行高 line-height 解析
之前设置div中的文本垂直居中的时候，习惯性的使用height和line-height等于相等的值的方式实现垂直居中效果，但是没有深刻理解过line-height这个属性的具体含义，今天抽空查阅了相关文档，也算是比较清晰了解了line-height这个属性以及当他与height值相等时使得文字能垂直居中的原理，简单记录一下。首先抄一下mdn上关于line-height 的相关介绍：line-hei...
2022-09-13 22:39:59
434
转载 消除系统重复代码
很多同学在工作一段时间之后可能都有这样的困境，大家觉得自己总是在写业务代码，技术上感觉好像没有多大的长进，不知不觉就成为了CURD Boy或者Girl，自己想要去改变但是又不知道该从何处进行入手。有的同学会去学习如何做架构、有的同学可能会去学习各种新技术还有的同学甚至转产品经理来试图解除困境。但是我觉得找到跨出这种困境的途径反而还是要从我们每天写的代码入手。即便当前每天做着CRUD的事情，但是我们...
2022-09-09 22:25:14
82
转载 ES6 运算符的扩展
指数运算符ES2016 新增了一个指数运算符（**）。2 ** 2 // 42 ** 3 // 8链判断运算符在写代码的时候，通常读取对象内部的某个属性，往往需要判断一下，属性的上层对象是否存在。比如，读取 user.name 这个属性，安全的写法是写成下面这样。// 如果不存在 user 对象将报错const firstName = user.name || 'default';//...
2022-08-28 18:01:18
62
转载 内容安全策略 ( CSP )
内容安全策略 (CSP) 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段。CSP 被设计成完全向后兼容，不支持 CSP 的浏览器也能与实现了 CSP 的服务器一样正常运行，只是在不支持 CSP 的浏览器会忽略它，默认为网页内容使用标准的同源策略。如果网站不提供 CSP 头部，浏览...
2022-08-26 22:37:19
790
转载 类中的箭头函数
类中的箭头函数this 等于实例class Person { constructor () { this.name = '章三' } handleClick1 = () => { console.log(this.name) return this } handleClick2 () { console.log(this.name) ...
2022-08-24 22:45:03
277
转载 CSS 属性 columns
CSS 属性 columns 用来设置元素的列宽和列数。通常在报纸中容易看到将文字内容拆分为多列。columns 是唯一可以分割内容的 CSS 布局方法。它是一个简写属性，可在单个方便的声明中设置 column-width 和 column-count 属性。与所有简写属性一样，任何省略的子值都将设置为其初始值。要将连续的内容块拆分为多列，可以轻松便捷的实现瀑布流布局。<div class=...
2022-08-22 22:26:03
1125
转载 实现滚动阴影效果
使用四层背景渐变，实现滚动阴影效果，它给用户一个提示，即在可滚动容器中还有其他内容可用。<style> .scroll-shadows { height: 200px; overflow: auto; background: /* Shadow Cover TOP */ linear-gradient(white 30%, ...
2022-08-20 22:50:47
336
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人