- 博客(92)
- 收藏
- 关注
RSS订阅原创 typescript 高阶类型 Exclude 和 Extract
typescript 的高阶类型 Exclude 和 Extract ，主要是对多个联合类型取差集和交集。
2022-04-18 21:16:38
524
原创 typescript 之 Exclude 和 Extract
typescript 种 Exclude 和 Extract 主要就是对多个联合类型的取交集和差集的高级类型。
2022-04-14 21:19:10
3910
原创 ts 之 Pick 和 Omit
typescript 的高级类型 Pick 和 Omit，主要作用就是从一个已知的类型中，取出子集，作为一个新的类型返回。
2022-03-30 22:09:30
18827
原创 vue 面试题总结
1. vue 的优缺点：优点模板式的语法，简单易学，容易上手；虚拟 DOM 保证了在操作 dom 的形式下，性能的下限。缺点：模板式的语法不够灵活；缺乏高阶教程与文档；2. vue 组件的传值方式？props 与 $emit 的实现 父子 组件的传值；event bus，将父级作为桥梁，实现同级组件传值；provide/inject 实现深度嵌套组件之间的传值，顶级定义的数据，任何一层的子级都可以访问，虽然官方不推荐使用，但是用好了，能带来意想不到的好处；vuex 状态管理工
2022-03-15 15:37:25
1723
原创 前端设计模式之中介者模式
定义定义一个中介对象来封装一系列对象之间的交互，使原有对象之间的耦合松散，且可以独立地改变它们之间的交互。中介者模式又叫调停模式，它是迪米特法则的典型应用。与代理模式不同，代理模式是一对一结构中，代替某方与另一方沟通的模式；而中介者模式是一种一对多结构中，作为一个单独的结构，将这种一对多关联转变为一对一的关联，提高系统的灵活性，使得系统易于维护和扩展。结构抽象中介者（Mediator）角色：它是中介者的接口，提供了同事对象注册与转发同事对象信息的抽象方法。具体中介者（Concrete Media
2022-02-13 21:34:04
182
原创 前端设计模式之备忘录模式
定义保存一个对象的某个状态，以便在适当的时候恢复对象，备忘录模式属于行为型模式。解决的问题各种 word 等文本域之类的功能，其中的 撤回 功能；可以考虑用来优化列表，保存对应的页码的数据，优化页面加载数据。结构备忘录模式的主要角色如下。备忘录（Memento）角色：具体对象的结构；发起人（Originator）角色：设置当前数据和获取当前数据的对象；管理者（Caretaker）角色：对备忘录进行管理（一般是通过一个 List结构 保存多个 Memento），提供保存与获取备忘录的功
2022-02-11 16:29:54
345
原创 var let const 与 变量提升和函数提升
1. 变量提升 和 函数提升通常JS引擎会在正式执行之前先进行一次预编译，在这个过程中，首先将变量声明及函数声明提升至当前作用域的顶端，然后进行接下来的处理。使用 var 声明，存在变量提升的情况:console.log(a); // undefinedvar a = 1;console.log(a); // 1// ======= 实际等效于 =========var a;console.log(a); // undefineda = 1;console.log(a); //
2022-02-09 15:51:06
705
原创 前端设计模式之策略（Strategy）模式
定义策略（Strategy）模式定义了一系列算法，并将每个算法封装起来，使它们可以相互替换，且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式，它通过对算法进行封装，把使用算法的责任和算法的实现分割开来，并委派给不同的对象对这些算法进行管理。策略（Strategy）模式最核心的一点就是，每个算法的结构是一样的，体现在 js 中，可能就是入参和返回值一样，这样才能保证可以相互替换。结构：对 ts 而言，抽象的 算法 类，定义好每个算法的结构；对于 js 而言，就是一个 顶级类 ，所有具体的
2022-02-07 20:33:01
530
原创 前端设计模式之状态模式
定义状态（State）模式的定义：对有状态的对象，把复杂的“判断逻辑”提取到不同的状态对象中，允许状态对象在其内部状态发生改变时改变其行为。简单的说，就是定义好各个状态（一般是定义好的），通过一个中间对象来设置和获取当前状态，并执行对应状态的方法。结构：环境类（Context）角色：也称为上下文，它定义了客户端需要的接口，内部维护一个当前状态，并负责具体状态的切换。具体状态（Concrete State）角色：实现抽象状态所对应的行为，并且在需要的情况下进行状态切换。解决的问题：状态模式
2022-01-28 16:57:34
549
原创 前端设计模式之命令模式
定义命令（Command）模式的定义如下：将一个请求封装为一个对象，使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通，这样方便将命令对象进行储存、传递、调用、增加与管理。命令模式最主要的一个功能就是解耦，将发出请求的部分与执行请求的部分分离开，通过命令对象进行连接。命令模式的结构(也可以不是类，而是方法，主要是思路而不是具体的形式)：具体命令类（Concrete Command）角色：是抽象命令类的具体实现类,连接实现者与调用者，它拥有实现者对象，并通过调用实现者的功能来完
2022-01-27 13:36:14
395
原创 前端设计模式之模板模式
定义在模板模式（Template Pattern）中，一个抽象类公开定义了执行它的方法的方式/模板。它的子类可以按需要重写方法实现，但调用将以抽象类中定义的方式进行。这种类型的设计模式属于行为型模式。简单来说： 在一个 abstract 类中，定义好要执行的方法，同时定义好方法的执行顺序，然后在子类中，去具体实现方法，最后调用封装了执行顺序的方法。结构：abstract 类，其中封装了执行顺序的方法，以及每一步要执行的抽象方法；子类，实现了各种方法，最后调用父类中 执行顺序 的方法。为了
2022-01-25 14:29:20
300
原创 前端设计模式之观察者模式
解决的问题：观察者模式： 主要是用来解决一（被观察者）对多（观察者）的关系。如教室中，一个老师对多个学生，老师作为被观察者（Subject），而学生作为观察者（Observer），当老师发出指令时，学生就需要做出响应。定义：对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。主要结构：一个被观察者，内部需要维护一个与所有观察它的对象数组；多个观察者，内部必须的一个 update 函数，需要在被观察者状态更新后，作出响应。实现// 学生类，
2022-01-19 17:28:16
711
原创 JavaScript 继承那些事
什么是继承？通过某种方式让一个对象可以访问到另一个对象中的属性和方法，我们把这种方式称之为继承。通过定义，可以得到的结论：继承的目的就是对可以某些通用 属性和方法 的 共用，以达到减小开销的目的。什么是好的继承？由于继承的目的是为了减小开销，那么一个好的继承，标准就是：在继承实现的过程中创建的额外对象越少越好；创建出来的对象，副作用越小越好（每种创建方式的影响各不相同）。1. 原型链继承本质就是通过原型对象 prototype 对象来实现继承。function Father() {
2022-01-17 15:42:38
396
原创 前端设计模式之组合模式
定义组合模式 允许以相同的方式处理单个对象和对象的组合体；意图是将对象组合成树形结构以表示 “部分 - 整体” 的层次结构；Composite 使得用户对单个对象和组合对象的使用具有一致性。使用场景：其实就定义来看，真的是比较模糊，很难总结出一个比较核心的规律。先从使用场景开始看，组合模式 一般使用率不高，但是当需要使用时，基本就说明必用不可。文件系统：文件包括，目录和文件两个部分，整体可以明白，文件就是一个树结构，目录可以包含目录，可以包含文件，文件作为一个叶子节点，不存在下一级，
2022-01-12 16:21:29
277
原创 前端设计模式之桥接模式
桥接模式桥接（Bridge）是用于把抽象化与实现化解耦，使得二者可以独立变化。这种类型的设计模式属于结构型模式，它通过提供抽象化和实现化之间的桥接结构，来实现二者的解耦。简单的说，就是将比较独立的功能，抽离成单独的组件，然后再需要使用到它的地方，按照使用方式的不同，在进行排列组件。其实这也是现代前端框架组件化思想的来源，不管是 react 还是 vue，开发的过程中，都是尽可能的拆分出各种独立的功能，然后单独开发管理，最后通过各种排列组合实现整个系统。示例设想如果要绘制矩形、圆形、正方形，我们至
2022-01-04 15:58:07
405
原创 nth-of-type() 详解
nth-of-type() 详解ele:nth-of-type(n)表示选择父元素下的第 n 个 ele 元素，其中 n 可以是正整数、公式或者关键字。同时， ele 一般是标签选择器。<style> * { margin: 0; padding: 0; } .box { width: 400px; height: 200px; margin: 100px auto; border: 1px solid #ccc; }
2021-12-29 14:17:34
15602
2
原创 前端设计模式之代理模式
代理模式在某些情况下，一个客户不想或者不能直接引用一个对象，此时可以通过一个称之为“代理”的第三者来实现间接引用。代理对象可以在客户端和目标对象之间起到中介的作用，并且可以通过代理对象去掉客户不能看到的内容和服务或者添加客户需要的额外服务。代理模式需要的三个必不可少的对象被代理的对象；做代理的对象；使用代理对象的对象。简单的理解这三个对象，以买车为例：被代理的对象 可以理解成汽车厂家，厂家只负责生产车子，所以此时就需要 4s店 来提供销售和服务，此时 4s店 就是 做代理的对象，作为消
2021-12-27 09:57:19
568
原创 python3 作用域链
当前结论，基于 python3，不一定使用 python2.作用域分类L （Local） 局部作用域（一般指函数，在函数内部定义的则是局部变量）E （Enclosing） 闭包函数外的函数中G （Global） 全局作用域B （Built-in） 内建作用域访问规则访问规则链：L => E => G => B解释一下：从 局部作用域 开始查找，如果 局部作用域 不存在，则往上一层（也就是指嵌套函数）开始查找，如果上一层也不存在，则继续向上，一直到（这个过.
2021-12-20 09:46:15
566
原创 前端设计模式之抽象工厂模式
抽象工厂模式：工厂方法模式 主要是作用与同一类产品，比如说：手机，而 抽象工厂模式 是对一产品簇的抽象，比如说， 小米有小米手机，小米笔记本…如果说 工厂方法模式 是对同一类产品的抽象，那么 抽象工厂模式 就是对同一类簇的抽象，也可以说是对一个复杂对象，进行更细致的抽象；简单的类比，小米从当初的小米手机发展成小米商城，小米一开始创建时，只有小米手机这一类产品，此时可以用 工厂方法模式，管理小米手机，但是当小米日益庞大，就需要更细致的划分，比如，小米手机，小米笔记本… 这个时候，就相当于 抽象工厂模
2021-12-15 15:32:34
331
原创 前端设计模式之简单工厂模式
简单工厂模式就是对同一类对象创建过程的抽象，在形式上它仅仅只是通过 if 等判断语句，根据不同条件去生成不同对象，且只能创建已经设计的好的数据，如果要添加新的数据，必须手动添加。interface IPhone { name: string; price: number;}enum Phones { hw, mi}// 这里的 Shop 则表示一个工厂，它将数据包裹，根据需求提供数据。class Shop { // 华为手机 hwPhone:IPhone = {.
2021-12-10 15:18:26
315
原创 vue3 script setup + ts 实践
ts + setup本文是对vue3.x 语法的实践，不会单独的介绍某个具体的 API 语法，详细语法请参考 vue官网；此次文章中使用的是 script setup + ts 的用法，个人比较喜欢的一种语法，感觉是 vue3 关于 ts 的终极实践。顶层属性任何在 script setup 声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用; 但仅仅是使用，由于不是响应式数据，没有双向绑定，所以不会在页面上同步更新。<template>
2021-12-08 15:19:39
4469
原创 JavaScript 之 Event Loop
概述JavaScript 属于单线程语言（除了 web work）。单线程，必然导致了代码需要一行行的去执行，但是一些耗时的操作（http 请求等），如果还是使用同步的方式，比如会导致页面阻塞，所以这个时候就需要异步操作。在 JavaScript 中，处理这种异步操作的机制就是 事件循环(Event Loop)。Event Loop执行逻辑JavaScript 从上到下开始执行代码，当遇到异步任务时，将异步任务放到任务队列中，当整个文件的代码都执行完成后（也可以理解成执行栈中的代码都执行成），
2021-12-06 14:41:00
424
原创 关于 Event Loop 中 async/await 的表现
前言文关于 Event Loop 中 async/await 的表现，文章中表述的观点，纯属个人的一些猜测与验证，如有不对，敬请斧正。猜测1由于 微任务 是后加入到 任务队列 中的，且 Promise 也属于 微任务，那么大胆猜测， async/await 的异步任务，也属于微任务。console.log(111);setTimeout(() => { console.log(222);}, 0);(async () => { console.log(333);
2021-12-06 14:39:09
681
原创 Dart Future 使用
FutureDart 的异步对象，类似于 Javascript 中的 Promise。Future 表示一个异步操作返回的结果；Future 是一个泛型类；Future 实现异步的原因是通过 dart 的 event loop，这里不过多赘述。基本使用import 'package:http/http.dart' as http;Future getIp() { final url = 'https://httpbin.org/ip'; return http.get(url
2021-11-29 15:59:28
1956
1
原创 eslint 配置 ts + react
安装配置# 安装 eslintnpm i eslint -D# 使用 ts 的解析器npm i @typescript-eslint/parser -D# 添加 ts 相关规则npm i @typescript-eslint/eslint-plugin -D# 添加 react, hooks 相关的规则npm i eslint-plugin-react eslint-plugin-react-hooks -D添加配置文件module.exports = { "root": t
2021-11-24 10:14:48
916
原创 Eslint 配置详解
eslinteslint 默认没有规则，需要手动配置 .eslintrc.* 中添加规则。// .eslintrc.jsmodule.exports = {}root默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果你想要你所有项目都遵循一个特定的约定时，这将会很有用，但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslint Config 字段下
2021-11-23 16:53:24
4719
1
原创 JS设计模式之工厂模式
JS设计模式之工厂模式工厂模式大体分为三类： 简单工厂模式、 工厂方法模式、抽象工厂模式。三者之间的关系，也是渐进式的，抽象化的范围也是越来越高。1. 简单工厂模式：对同一类对象创建过程的抽象，在形式上它仅仅只是简单的通过 switch 等判断语句，根据不同条件去生成不同对象，且只能创建现有的数据，如果要添加，必须手动添加。interface IPhone { name: string; price: number;}enum Phones { hw, mi}/
2021-11-19 17:25:11
2308
原创 react-router-dom v6 使用
react-router-domreact-router-dom v6 整体体验相对于 v5 ，体验要好更多，最大的一个改变，就是曾经的 Route 不可嵌套，整个路由配置必须拆分成若干小块，除非通过 react-router-config 这种插件，才可以实现对整个路由的管理，然而现在，不需要任何插件就可实现对路由配置的管理。官网地址: react-router当前例子，根据分支对应例子：react-router-dom-v6-examplev6 与 v5 的区别当前环境安装npm
2021-11-19 00:09:01
24840
7
原创 dart 之 Map
Map是一种无序的 键值对 映射，可以称为 哈希 或者是 字典 。定义 Map1. 不指定泛型 // 1. 使用 Map 作为类型，此时 `key-value` 均不需要设置类型 Map person1 = {"name": "zs", "age": 19}; person1["sex"] = "men"; // 2. 使用 var 作为类型，此时 `key-value` 均不需要设置类型 var person2 = {}; person2['name'] = "ls";
2021-11-05 15:33:30
1425
原创 Dart 之 函数
Function箭头函数语法 => 表达式 是 { return 表达式; } 的简写， => 有时也称之为 箭头 函数。int max(int a, int b) { return a > b ? a : b;}dynamic max1 = (int a, int b) => a > b ? a : b;int a = max(2, 3); // 3int b = max1(2, 3); // 3参数函数可以有两种形式的参数： 必要参数 和 可
2021-11-03 15:57:25
179
原创 typescript 之 keyof
keyofTypeScript 允许我们遍历某种类型的属性，并通过 keyof 操作符提取其属性的名称。该操作符可以用于获取某种 类型 的所有键，其返回类型是 联合类型，简单的说，它是作用于类型的，返回类型为联合类型。效果将类型对应的对象中的属性解构出来，并作为联合类型返回。直接作用 interface 类型时， interface 对应的为对象， keyof 将对象中的属性名都结构出来，并作为联合类型返回。interface IPerson { name: string,
2021-10-20 15:15:48
3602
原创 js 之 Generator
GeneratorGenerator 函数是 ES6 提供的一种异步编程解决方案，它返回的就是一个 Iterator 结构，同时它是 async/await 的底层。基本语法function* gen() { yield 1; yield 2; yield 3; return 4;}const genIt = gen();genIt.next(); // {value: 1, done: false}genIt.next(); // {value: 2, done: fal
2021-09-29 15:42:47
415
原创 Compose 与 pipe 函数
Compose 函数将需要嵌套执行的函数平铺;嵌套执行指的是一个函数的返回值将作为另一个函数的参数。嵌套执行的函数const demo = (x) => x^2 + 2console.log(demo(2)) // 6函数平铺：const compose = (...args) => // 将函数按照固定顺序排列，准备执行 (x) => args.reduce((accu, current) => current(accu), x)cons
2021-09-28 09:32:25
91
原创 python 列表推导式
列表推导式每一个 for 按照一定的规则循环后，返回一个变量。1.基本用法list1 = [x * 2 for x in range(10)]print(list1) # [0, 2, 4, 6, 8, 10, 12, 14, 16, 18]2.增加 if增加 if 则只有通过 if 判断的数据，才会输出list1 = [x * 2 for x in range(10) if x % 2 == 0]print(list1) # [0, 4, 8, 12, 16]3. 多个 fo
2021-09-24 09:05:51
337
原创 git 更新本地分支
问题：由于在远程删除了分支，有时候本地不能更新到，所以再次操作已删除的分支时git会报错， 此时只需要刷新一下分支列表即可正常操作。解决：git remote update origin --prune# 简写git remote update origin --p...
2021-09-17 13:26:26
4768
原创 Iterator
遍历器（ Iterator ）本质是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。作用：为各种数据结构，提供一个统一的、简便的访问接口；使得数据结构的成员能够按某种次序排列；ES6 创造了一种新的遍历命令 for...of 循环， Iterator 接口主要供 for...of 消费。执行方式调用 Iterator 接口，返回一个指针对象，指向当前数据结构的起始位置，.
2021-09-13 21:34:03
54
原创 基于 `rollup` 搭建 vue 的组件
基于 rollup 搭建 vue 的组件简单的说，因为对很多类型的静态资源处理没有 webpack 强大，但是基于 Tree-shaking 原理用来打包 lib的话，打出来的包，干净，小。所以 rollup 比较适合打包小型的 lib 库，不适合用来做开发。1. 项目传送门主要流程和包2. 初始化项目npm init -ynpm i -D rollup3. 添加配置文件// rollup.config.jsexport default { input: 'src/main.js
2021-09-06 16:40:55
1543
原创 koa-router 使用
基础koa-router 是一个class;支持 get|put|post|patch|delete|del;all匹配所有的方法；// 导入 koa， koa2.x 中，koa 是一个类，需要用大写开头const Koa = require('koa')const Router = require('koa-router')const app = new Koa()const indexRouter = new Router()indexRouter.get('/', (ctx)
2021-05-19 11:16:46
329
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人