- 博客(85)
- 收藏
- 关注
RSS订阅原创 2022年终总结——工作第五年
沪飘第五年，虽然欠了银行一屁股钱，但也算是有车有房有媳妇儿了，22年的年度目标只完成了3/8，23年我要化身鸡血战士了！
2023-01-11 15:38:06
1636
2
原创 关于前端安全性那些事
1、XSS攻击 2、 Iframe 3、跨站请求伪造（Cross-site request forgery） 4、ClickJacking（点击劫持）5、HTTPS重定向问题 6、CDN劫持
2022-10-21 14:56:04
1503
原创 从零开始搭建一个私有前端组件库
本文包含了组件库搭建、为组件库提供类型文件、npm私服搭建、组件库国际化、组件按需引入、自定义主题、为组件库编写文档、包体积优化等一系列过程
2022-01-06 17:35:05
9609
5
原创 基于ts封装axios
除了基础的设置token，和token失效对应操作后，还支持自动取消重复请求，和请求失败后的重试策略，其中重试策略支持针对特定的错误码进行重试。
2021-12-16 11:10:54
3436
原创 vue test utils 使用笔记
1、任何导致操作 DOM 的改变都应该在断言之前 await nextTick 函数// 错误不会被捕获it('will time out', done => { Vue.nextTick(() => { expect(true).toBe(false) done() })})// 接下来的三项测试都会如预期工作it('will catch the error using done', done => { Vue.config.errorHandle
2021-12-03 16:49:50
1024
原创 如何基于el-table封装一个方便好用的table组件
之前听到很多人讲在用 element-ui 的 table 组件时，还是自己循环 el-table-column 去实现的！每个页面都这么写想想就头大，另外万一产品要求你项目中所有的表格都要扩展一个功能，比如说按shift，可以实现数据行多选？那岂不是当场傻眼！我们完全可以基于el-table去封装一个组件，基于**配置**自动生成表格。
2021-11-30 17:24:25
6065
5
原创 为什么v-for不推荐使用index做为key
本文续接上篇 我终于搞懂了vue的diff算法为什么v-for不推荐使用index做为key引用这篇掘金文章中所列出的两种情况，本文只对分析过程做一些图示补充1、节点reverse即数组倒置时假设如下代码，值直接以文本格式绑定在dom节点内部 <div> <span v-for="(item,index) in arr" :key="index" >{{item}}</span> </div>当使用index作为key时，我们来.
2021-11-10 16:43:45
1817
原创 我终于理清了vue的diff算法
> 1、最近好几个月都比较忙，刚好项目接近尾声，今天终于抽出来了一点时间重新捋了一下diff算法，具体的解析后面抽时间补上，画了个大概的图，可以配合代码注释凑活着看> 2、草稿箱里也放了好多篇想写的文章，后面整理成一个系列慢慢发出来@[TOC](diff算法)### 1、怎么更好的阅读源码这个问题困扰我挺久的，在网上搜过大佬们谈怎么阅读源码的心得，总觉得拿来自己套用起来并不适用，这里分享下自己阅读源码时的思路 - 明确自己的主线任务，即自己读这个源码是想干嘛，写代码过程中遇到问题，需要解惑？还
2021-10-15 18:17:45
433
原创 2020年终总结——工作第三年
好吧，犹豫了那么一秒，最后还是决定用统一的标题。2020年的主色调该是#eb8534，日出日落的颜色。18年一整年是在从学生阶段过渡到成人阶段，有对新生活的无限期待。19年的整个历程，是找不到自己的定位，看不清未来，自我放弃与自我驱动的激烈冲突。20年，如果按照自己现在选择的路一直走下去，甚至一眼就能看穿自己直到30岁之前的生活轨迹。对于19年年终总结时对20年的期望，勉强完成了百分之75吧。落户武汉具体时间记不清了，大概四五月份吧。走的大学生落户，一周不到就办完了。都很顺利，没啥好说的.
2021-02-08 16:25:06
422
原创 Cordova App 热更新 超详细教程
目前Cordova平台我找到的热更新方案有两种 1. 使用cordova-hot-code-push插件 [GitHub仓库地址](https://github.com/nordnet/cordova-hot-code-push) 2. 使用 cordova-plugin-code-push [GitHub仓库地址](https://github.com/Microsoft/cordova-plugin-code-push) 第一个插件，已经官宣不再维护了。第二个插件是微软官方提供的。果断选择
2020-12-17 15:01:11
3501
原创 Cordova设置iOS App启动页
前言iOS13推出后要求开发者必须在今年4月之前使用LaunchScreen.storyboard启动，不能再使用之前Image.asset中的LaunchImage方式了。对于使用原生iOS的开发者来说，操作起来就是在xcode里面点点点，控件拖一拖设置一下.但是对于我们使用cordova开发混合App的开发者来说，不熟悉xcode的话，操作起来会很懵。（我硬是在那搞了两个小时也没搞好！）看下Cordova 官方对于这两种方式的解释：There are two mechanisms for dis
2020-12-10 15:47:41
1223
1
原创 webpack常用plugin和loader，以及打包优化
一、开发环境1、插件1.1、webpack dev servewebpack-dev-server实际上相当于启用了一个express的Http服务器+调用webpack-dev-middleware。它的作用主要是用来伺服资源文件。这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会用webpack实时的编译，再用webpack-dev-middleware将webpack编译后文件会输出到内存中。适合纯前端项目，很难编写后端服
2020-11-20 14:50:56
1519
原创 关于axios请求源码分析
Axios的特点：请求返回Promise，可以很方便的进行链式调用可以附加拦截器：请求拦截器、响应拦截器可以随时取消未完成的请求客户端支持防御 XSRF（跨站请求伪造）会帮你转换请求数据和响应数据在node.js中发送请求使用http，在浏览器使用XMLHttpRequest
2020-10-24 08:26:30
501
原创 使用Cordova打包H5到安卓
1、配置开发环境安卓的话，随便搜一下都有很多，这里放一个相对比较详细的 传送门安装cordova 就直接看官方文档 官网链接2、创建项目cordova create 文件名 appid app名称cordova platform add ios/androidcordova cordova plugin addcordova build...
2020-09-29 16:44:45
2165
原创 关于Ionic3 +Cordova 开发App中遇到的问题和解决方案
ImagePicker 相关1、选择照片闪退解决方案：参考自 传送门把红框里改掉，改成v4:26.+，原来是v4:27.+猜测是与当前指定的Android版本不匹配。2、ImagePicker选择的照片质量下降当ImagePickerOptions 配置了宽高之后，哪怕配置了图片质量为100，选择的照片质量也会下降，去掉宽高就好了。我怀疑这里的宽高指的是分辨率吧？ chooseFromAlbum() { const options: ImagePickerOptions
2020-09-18 17:34:03
1207
原创 .Net Core使用 VS 附加到进程调试
前言必须要吐槽下，最近app有些新功能，需要真机调试（如何在真机调试中，查看log信息我后面会补篇博客），然后顺带着调试接口也不怎么方便，就搞一下附加进程调试，结果搞这个附加到进程调试搞了我两个小时，终于在中午吃饭的时候成功了。google了各种帖子，博客，各种解决方案，大多数都是复制粘贴来的博客，没一个好使的，还是自己整理一个靠谱点一、发布到IIS准备工作：这里要注意配置一定要选Debug。第一步发布到IIS，这个没什么好说的。xxxx填一下就好了二、设置应用程序池这里按照微软官方文
2020-08-04 12:49:31
1394
4
原创 TS实现观察者模式和发布订阅模式
观察者模式的定义：观察者模式指的是一个对象（Subject）维持一系列依赖于它的对象（Observer），当有关状态发生变更时 Subject 对象则通知一系列 Observer 对象进行更新。简单来说就是 A 对 B 的某个属性敏感，当B的这个属性发生变化时，A要及时做出相应的处理。此时A就是观察者Observer，B就是被观察者Subject。通过一个热水器的例子来实现以下观察者模式： - 温度检测装置可以获取到水的实时温度，用来判断水是不是烧开了。需求：在水加热到100℃时关闭电源
2020-07-09 17:42:16
1260
4
原创 关于抽象工厂模式的定义和实现
前言部分摘自：《设计模式之禅》 这本书抽象工厂模式的定义为创建一组相关或相互 依赖的对象提供一个接口，而且无须指定它们的具体类。一个好理解的例子：讲了女娲造人的故事。人是造出来了，世界也热闹了，可是低头一看，都是清一色的类型，缺少关爱、仇恨、喜怒哀乐等情绪，人类的生命太平淡了，女娲一想，猛然一拍脑袋，忘记给人类定义性别了，那怎么办？抹掉重来，于是人类经过一次大洗礼，所有的人种都消灭掉了，世界又是空无一物，寂静而又寂寞。由于女娲之前的准备工作花费了非常大的精力，比如准备黄土、八卦炉等
2020-05-22 16:31:46
440
原创 关于工厂模式的定义和实现
前言部分摘自：《设计模式之禅》 这本书工厂模式的定义：定义一个用于创建对象的接口，让子类决定实例化哪一个类。工厂方法使-一个 类的实例化延迟到其子类。一个好理解的例子：东汉《风俗通》记录了一则神话故事， 开天辟地，未有人民，女娲搏黄土做人”，讲述的内容就是大家非常熟悉的女娲造人的故事。开天辟地之初，大地上并没有生物，只有苍茫大地，纯粹而洁净的自然环境，寂静而又寂寞， 于是女娟决定创造一个新物种(即人类)来增加世界的繁荣，怎么制造呢?别忘了 女娲是神仙，没有办不到的事情，造人的过程是这样的，
2020-05-21 16:30:14
291
原创 关于单例模式的定义和实现
前言摘自：《设计模式之禅》单例模式的定义：确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。一个好理解的例子：自从秦始皇确立了皇帝这个位置以后，同一时期基本上就只有一个人孤零零地坐在这个位置。这种情况下臣民们也好处理，大家叩拜、谈论的时候只要提及皇帝，每个人都知道指的是谁，而不用在皇帝前面加上特定的称呼，如张皇帝、李皇帝。这一个过程反应到设计领域就是，要求一个类只能生成一个对象（皇帝），所有对象对它的依赖都是相同的，因为只有一个对象，大家对它的脾气和习性都非常了
2020-05-19 17:26:33
378
原创 为什么依赖注入出现的频率这么高？
依赖注入（Dependency Injection）是用于实现控制反转（Inversion Of Control）的最常见的方式之一。那么什么是控制反转？**控制反转**：是面向对象编程中的一种设计原则，常用于解耦。因为大多数应用程序都是由两个或是更多的类通过彼此的合作来实现业务逻辑，这使得每个对象都需要获取与其合作的对象（也就是它所依赖的对象）的引用。如果这个获取过程要靠自身实现（也就是通过new一个你要使用的对象），那么这将导致代码高度耦合并且难以维护和调试。而控制反转就是为了解决这个问题。简
2020-05-06 15:38:38
454
原创 数据结构-什么是图和图的遍历
什么是图？图：表示多对多的关系。包含：一组顶点：通常用V(Vertex)表示的顶点集合一组边：通常E(Edge)表示边的集合，也就是顶点对无向边：v — w 两个顶点之间无论任何方向都可以连通 ，常用( v, w )表示有向边：v —> w 也就是只允许从顶点A到顶点B，常用< v, w >表示不考虑重边和自...
2020-04-28 16:16:00
837
原创 数据机构-哈夫曼树
什么是哈夫曼树？先来看哈夫曼树的定义：哈夫曼树（Huffman Tree）是在叶子结点和权重确定的情况下，带权路径长度最小的二叉树，也被称为最优二叉树。看到这个定义我是一脸懵逼的，什么叶子节点和权重还好，那么路径是指什么呢，一个节点到另一个节点之间的途径？而且带权路径长度又是指什么呢？什么是路径？在一棵树中，从一个结点到另一个结点所经过的所有结点，被我们称为两个结点之间的路径。上面的...
2020-04-22 17:11:24
281
原创 数据结构-JavaScript实现堆
什么是堆？这里的堆和内存的堆是不一样的，这里的堆是一种储存方式。堆其实是一种优先队列，也就是说队列中存在优先级，比如队列中有很多待执行任务，执行时会根据优先级找优先度最高的先执行。堆的实现一般使用完全二叉树实现堆。最大堆：一棵完全二叉树中儿子节点永远小于父亲节点。最小堆：一棵完全二叉树中儿子节点永远小于父亲节点。另外从根节点，到任意节点路径上都是有序的。如下图左边蓝色为最大堆，右...
2020-04-21 14:04:23
679
原创 数据结构-JavaScript实现二叉查找树的相关操作
若它的左子树不空，则左子树上所有结点的值均小于它的根结点的值； 若它的右子树不空，则右子树上所有结点的值均大于它的根结点的值。 它的左、右子树也分别为二叉排序树。二叉搜索树作为一种经典的数据结构，它既有链表的快速插入与删除操作的特点，又有数组快速查找的优势；所以应用十分广泛，例如在文件系统和数据库系统一般会采用这种数据结构进行高效率的排序与检索操作。
2020-04-14 17:09:58
136
原创 数据结构-第一阶段学习线性表的总结
1、当需要进行频繁的查找检索操作时，建议使用顺序表存储。因为顺序表可以使用下标很方便的进行查找，而链表需要循环遍历整个链表，直至找到目标。2、当需要进行频繁的插入删除操作时，建议使用链表存储。因为链表插入删除操作只需要改变指针的指向即可，而顺序表插入删除时，目标位置后的其他元素都要进行移动
2020-04-02 17:36:54
343
转载 评估算法的时间和空间复杂度
原文链接：https://baijiahao.baidu.com/s?id=1609024533531824968&wfr=spider&for=pc前言程序是用来解决问题的，是由多个步骤或过程组成的，这些步骤和过程就是解决问题的算法。解决一个问题有多种方法，也就有多种算法。每一种算法都可以达到解决问题的目的，但花费的成本和时间不尽相同，从节约成本和时间的角度考虑，需要找出最...
2020-04-02 11:32:36
541
原创 数据结构-JavaScript实现链式队列
// 节点类 class Node { data: any; next: Node | null; constructor(value: any) { this.data = value; this.next = null } } // 队列的链式实现 ...
2020-04-01 16:58:48
327
1
原创 数据结构-JavaScript实现顺序队列、双向队列、循环队列
// 顺序队列，使用了js里的Array class Queue { data: any[]; size: number; constructor(maxlength: number) { this.data = []; this.size = maxlength; } ...
2020-04-01 16:49:49
247
原创 数据结构-JavaScript实现顺序栈
{ class Stack { data: Array<any>; top: number; // 栈顶 size: number; constructor(maxLength: number) { this.data = new Array(maxLength); ...
2020-03-26 16:49:34
193
原创 VsCode配置自己喜欢的字体，背景，妈妈再也不担心我写代码枯燥了
先看效果图：涉及到的改动：1、背景图全屏的插件2、VsCode图标插件3、VsCode主题4、程序员鼓励师5、字体我用的win10自带的，大小调到16
2020-03-12 11:38:26
397
转载 Vue响应式原理和简单实现
Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter从而监听数据，当数据变化时通知视图更新。
2020-02-29 23:07:31
294
原创 总结下Vue和Angular组件交互方式
回想起来Vue和Angular，他们的父子组件的交互方式不管是组件传值的方式，还是监听值发生变化的方式都很相似，心里第一个想法就是他们的实现是不是也极为相似，还是让熟悉其中一个框架的人能迅速上手另一个？另外因为没用过React，不了解React组件交互是怎样的。这会儿特别想去读一下他们组件交互相关的源码，后面再来填上这个坑吧！
2020-02-28 17:18:57
2646
原创 Vue组件的插槽笔记
1.普通插槽父组件写法：<ShoppingCar> <button>按钮</button></ShoppingCar>子组件写法：<template> <slot> <span>默认为span</span> </slot></template>...
2020-02-28 17:18:49
220
原创 对于js中apply和call的区别和用法
在学习js继承的时候，apply和call出现的频率很高，心里也只是有个大概的理解，刚好今天有时间，就整理一下。首先，apply和call是干嘛用的？一句话概括：用来重定义 this 这个对象的！听起来好像很懵，来看代码： function Person(skinColor = 'yellow', gender = 1, age = 1) { ...
2020-01-13 16:54:02
389
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人