TypeScript 通过 keyof 操作符提取其属性的名称

TypeScript 允许我们遍历某种类型的属性,并通过 keyof 操作符提取其属性的名称。keyof 操作符是在 TypeScript 2.1 版本引入的,该操作符可以用于获取某种类型的所有键,其返回类型是联合类型。keyof 与 Object.keys 略有相似,只不过 keyof 取 interface 的键。const persion = { age: 3, text: 'hel

- 阅读全文 -

vue3使用reactive包裹数组如何正确赋值

需求:将接口请求到的列表数据赋值给响应数据arrconst arr = reactive([]); const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败,直接赋值丢失了响应性 // arr = res; // 方法2 这样也是失败 // arr.concat(res); // 方

- 阅读全文 -

px rem em vh vw之间的区别到底是啥?

绝对长度pxpx是像素值,是一个固定的长度,比如我们的米,厘米一样。相对长度为什么我们需要相对长度rem em等?🤔固定长度已经不能满足我们现在的需求了。🌰举例:比如我们在缩小我们屏幕的时候,我们不仅仅是需要缩小我们的盒子的宽高,我们还想要让我们字体大小也随之缩小,这样用户体验会更好一点。remrem 与 px 的计算关系rem的值是px的倍数默认情况下font-size = 16px,那么1re

- 阅读全文 -

手把手教你使用Electron9+vue3开发跨平台桌面应用

Electron 是一个基于 chromium 和 nodejs,可以使用 HTML、CSS、和 JavaScript 构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。虽然 B/S 是膜前开发 ad 主流,但是 C/S 仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用在无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,加上 web 开发成本低

- 阅读全文 -

Typecho博客支持emoji表情设置

介绍大家在typecho博客写文章时,很多人都喜欢使用emoji表情(比如👌🐈这些图标)但是typecho的数据库类型默认不支持emoji编码,因为Emoji是一种在Unicode位于u1F601-u1F64F区段的字符。这个显然超过了目前常用的UTF-8字符集的编码范围u0000-uFFFF。在MySQL中,UTF-8只支持最多3个字节,而emoji是4个字节。所以如果你不修改数据库的话,typ

- 阅读全文 -

如何设计统一登录业务

前言几乎所有的项目都需要登录,无论是权限限制、个性化定制、信息安全等需求,都要通过登录系统来获取用户信息,以便提供后续服务。而一个公司可能会有多个不同的项目,每个项目后端都是共用同一套用户系统的话,就势必会有通用登录的需求出现。通用登录的方式有很多种,下面我们仅探讨前端的实现方案。项目子域名不同,共用一个父域通过设置 cookie 的 domian 属性,可以使得 cookie 携带的内容在父子域

- 阅读全文 -

如何更新自己Fork的代码

以GitHub用户JoyNop为例子,在你操作的时候要把下面的GitHub用户名JoyNop换成你自己的GitHub用户名:注意事项:在更新自己Fork的代码之前,需要先把自己在本地的更改进行提交。1、检出自己在github上fork的dev分支git lcone git@gitxxx.com:JoyNop/qiye-browser.git cd qiye-browser2、增加qiye-bro

- 阅读全文 -

前端JavaScript css遵守各司其职原则

第一个故事:切换到夜间模式在 WEB 开发中,HTML 负责网页的结构,CSS 负责网页上各个元素的展示样式,JS 则负责网页和用户的交互。想要成为一名优秀的前端工程师,首先要做的就是遵守这三者各司其职的原则,让我们的代码易于维护和扩展。但是,有时候我们常常一不小心就破坏了这个原则。又或者,我们为了实现业务需求,根本不管这个规则。这都会导致我们的代码结构混乱,维护困难。那么下面,我就通过一个例子,

- 阅读全文 -

KANO模型:产品人必懂的需求分析法

需求会因人而异,会因文化差异而不同;也会随着时间变化。作为产品设计者,我们应该持续调研需求,对产品进行迭代优化。在做项目做产品的过程中,作为互联网产品设计师的我们,经常会接到来自PM/领导/业务方等等的各种需求。有的时候,哪怕一个小功能、次次次级页面都会争得不可开交。这个时候怎么办呢?到底应该听谁的呢?哪个需求优先级高?哪种呈现方法是更靠谱的呢?今天我们就来聊聊一个非常实用的需求分级方法——KAN

- 阅读全文 -

第 3 章 我们探索和利用视觉结构

信息呈现方式越是结构化和精炼,人们就越能更快、更容易地浏览和理解。要让信息能够被快速地浏览,仅仅把它们变得精炼、结构化和不重复还不够,它们还必须遵从图形设计的规则。结构提高了用户浏览长数字的能力数据专用控件提供了更多的结构采用控件分割输入字段固然优化了视觉结构,但这种方式打断了输入的连贯性。对于填写一个长表单来说,使用菜单等控件使用户被迫将手从键盘上移至鼠标,将视线转移至光标位置。这种思维的打断时

- 阅读全文 -

Vue3 404页面(NotFond)配置方案

全部捕获/ 404未找到路线常规参数只会匹配网址片段之间的字符,并用分隔/。如果我们想匹配任何东西,我们可以使用自定义参数正则表达式,方法是在参数后面紧随括号内添加正则表达式:const routes = [ // will match everything and put it under `$route.params.pathMatch` { path: '/:pathMatch(.*

- 阅读全文 -