- 博客(21)
- 收藏
- 关注
RSS订阅原创 关于ant-design pickrange disabledDate 的问题
记一次ant-design pickrange disabledDate 时间范围为年时，会重复执行上万次，导致很卡的问题。
2023-01-08 17:16:42
249
1
原创 前端实时通信的几种方式
1、短轮询短轮询的原理很简单，每隔一段时间客户端就发出一个请求，去获取服务器最新的数据，一定程度上模拟实现了即时通讯。优点：兼容性强，实现非常简单缺点：延迟性高，请求中有大半是无用，非常消耗带宽和服务器资源，影响性能，2、cometcomet有两种主要实现手段，一种是基于 AJAX 的长轮询（long-polling）方式，另一种是基于 Iframe 及 htmlfile 的流（streaming）方式，通常被叫做长连接。具体两种手段的操作方法请移步Come...
2021-07-14 14:14:09
1705
原创 函数柯里化
函数柯里化的俩中实现方法第一种function curry (fn, currArgs) { return function() { let args = [].slice.call(arguments); // 首次调用时，若未提供最后一个参数currArgs，则不用进行args的拼接 if (currArgs !== undefined) { //args = args.concat(currArgs); args
2021-06-15 18:52:59
134
原创 leetCode刷题，寻找有效的括号
给定一个只包括 '('，')'，'{'，'}'，'['，']'的字符串 s ，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/valid-parentheses著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注明出处。...
2021-06-11 11:28:45
163
1
原创 手写一个简版的vue
Vue源码中实现依赖收集（观察者模式），实现了三个类：Dep：扮演观察目标的角色，每一个数据都会有Dep类实例，它内部有个subs队列，subs就是subscribers的意思，保存着依赖本数据的观察者，当本数据变更时，调用dep.notify()通知观察者 Watcher：扮演观察者的角色，进行观察者函数的包装处理。如render()函数，会被进行包装成一个Watcher实例 Observer：辅助的可观测类，数组/对象通过它的转化，可成为可观测数据核心思想一个Dep对应一个Key,多.
2021-05-22 19:23:51
151
原创 手写一个new 操作符号的功能
创建一个空的简单JavaScript对象（即{}）； 链接该对象（设置该对象的constructor）到另一个对象 ； 将步骤1新创建的对象作为this的上下文 ； 如果该函数没有返回对象，则返回this。function myNew() { const obj = {}; const Constructor = [].shift.call(arguments); // eslint-disable-line obj.__proto__ = Constructor.prototype;
2021-05-21 16:10:36
161
原创 Object.defineProperty 和 Proxy 区别，及vue3为什么采用新的Proxy
Vue3.0 中，响应式数据部分弃用了Object.defineProperty，使用Proxy来代替它。本文将主要通过以下三个方面来分析为什么 Vue 选择弃用Object.defineProperty。1.Object.defineProperty真的无法监测数组下标的变化吗？2. 分析 Vue2.x 中对数组Observe部分源码。3. 对比Object.defineProperty和Proxy。无法监控到数组下标的变化？在一些技术博客上，我看到过这样一种...
2021-04-25 17:54:55
1291
1
原创 从零开始搭建一个建议的脚手架
为什么要搭建cli在前端开发中，在搭建好一套自己满意的代码架子后，希望以后可以在别的开发中也一直沿用。之前或许把这份代码的结构再手动码一份，但这样的重复劳动其实搭建好自己的cli后，就可以通过几个命令来完成了搭建cli准备首先新建自己cli项目完成初始化配置之后。然后完成以下步骤npm init在package.json中新建bin对象，如下图这个对象中存放着之后需要执行的命令及对象的文件。安装搭建cli的包（如上图）dependencies字段中的包。简单介绍下面几个
2021-04-25 14:11:02
81
原创 单例模式
核心思想：限制类实例化次数只能一次，一个类只有一个实例，并提供一个访问它的全局访问点。实现方式：使用一个变量存储类实例对象（值初始为 `null/undefined` ）。进行类实例化时，判断类实例对象是否存在，存在则返回该实例，不存在则创建类实例后返回。多次调用类生成实例方法，返回同一个实例对象。代码：// @Author: lizeconst CreateSingle = (Fn) => { let instance; return (name) => in
2021-04-25 13:45:33
79
原创 leetcode 递增顺序搜索树
给你一棵二叉搜索树，请你按中序遍历将其重新排列为一棵递增顺序搜索树，使树中最左边的节点成为树的根节点，并且每个节点没有左子节点，只有一个右子节点。输入：root = [5,3,6,2,4,null,8,1,null,null,null,7,9]输出：[1,null,2,null,3,null,4,null,5,null,6,null,7,null,8,null,9]题解：中序遍历一遍，记录 head 和 tail，每次新遍历到节点都赋值个 tail.right，tail 指向新节点。..
2021-04-25 11:14:25
85
原创 Webpack5 Vue3 简单打包
项目用到的插件包括：vue-loader-v16/dist/plugin.js： vueloaderPlugin编译vue需要html-webpack-plugin：生成入口html文件webpack-merge：合并配置terser-webpack-plugin：这个插件使用terser来缩小JavaScript。clean-webpack-plugin：每次构建前清理dist文件(不是把dist 文件都清空，而是删除打包的那个文件)；项目目录：pages文件夹里放的是多页面的应用
2021-04-23 11:13:49
459
原创 webpack4 devServer 参数分析
devServermodule.exports = { // ... 各个参数} after： function (app, server) 在服务内部的所有其他中间件之后， 提供执行自定义中间件的功能。 allowedHosts array 此选项允许你添加白名单服务，允许一些开发服务器访问。 before function (app, server) 在服务内部的所有其他中间件之前， ...
2021-04-08 18:39:10
991
原创 webpack的面试题
问题一览webpack与grunt、gulp的不同？ 与webpack类似的工具还有哪些？谈谈你为什么最终选择（或放弃）使用webpack？ 有哪些常见的Loader？他们是解决什么问题的？ 有哪些常见的Plugin？他们是解决什么问题的？ Loader和Plugin的不同？ webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全 是否写过Loader和Plugin？描述一下编写loader或plugin的思路？ webpack的热更新是如何做到的？说明其原理？ 如何利用w
2021-04-08 15:13:16
111
原创 HTTP/2 与 HTTP/3 的新特性
HTTP/1.1 发明以来发生了哪些变化？如果仔细观察打开那些最流行的网站首页所需要下载的资源的话，会发现一个非常明显的趋势。近年来，加载网站首页需要的下载的数据量在逐渐增加，并已经超过了 2100K。但在这里我们更应该关心的是：平均每个页面为了完成显示与渲染所需要下载的资源数已经超过了 100 个。正如下图所示，从 2011 年以来, 传输数据大小与平均请求资源数量不断持续增长，并没有减缓的迹象。该图表中，绿色直线展示了传输数据大小的增长，红色直线展示了平均请求资源数量的增长。...
2021-04-08 14:11:12
189
原创 $on、$off、$once、$emit 简单实现
// @Author: lizeclass EventCenter { static events = {}; $on(type, fn) { // eslint-disable-line if (!EventCenter.events[type]) { EventCenter.events[type] = []; } EventCenter.events[type].push(fn); } $once(type, fn) { // eslint.
2021-04-07 17:05:35
202
原创 链表结构的一些基础方法。
// @Author: lizeclass CNode { element = null; next = null; constructor(element) { this.element = element; // 当前节点的元素 this.next = null; // 下一个节点链接 }}class LinkedList { head = null constructor() { this.head = new CNode('head');.
2021-04-07 16:56:21
85
原创 HTTP1、HTTP2优缺点
HTTP1.1 的缺陷高延迟 — 队头阻塞(Head-Of-Line Blocking) 无状态特性 — 阻碍交互 明文传输 — 不安全性 不支持服务端推送队头阻塞队头阻塞是指当顺序发送的请求序列中的一个请求因为某种原因被阻塞时，在后面排队的所有请求也一并被阻塞，会导致客户端迟迟收不到数据。针对队头阻塞：1.将同一页面的资源分散到不同域名下，提升连接上限。虽然能公用一个 TCP 管道，但是在一个管道中同一时刻只能处理一个请求，在当前的请求没有结束之前，其他的请求只能处于阻塞状态。
2021-04-07 16:48:25
2080
原创 HTTP2.0和HTTP1.X、SPDY相比的新特性
HTTP2.0和HTTP1.X相比的新特性 新的二进制格式（Binary Format），HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。 多路复用（MultiPlexing），即连接共享，即每一个request都是是用作连接共享机制的。一个request对应一个id，这样一个连接上可以有多个request，每个连
2021-04-07 16:35:34
195
原创 网站优化策略
网页内容 1、 减少http请求次数 捆绑文件: 现在有很多现成的库可以帮你将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减少文件的下载次数。 CSS Sprites: 就是把多个图片拼成一副图片，然后通过CSS来控制在什么地方具体显示这整张图片的什么位置 2、 减少DNS查询次数 DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要...
2021-04-07 16:02:45
71
原创 HTTP1、HTTP2区别
1. Http1.x缺陷：线程阻塞，在同一时间，同一域名的请求有一定数量限制，超过限制数目的请求会被阻塞。2. Http1.0(短连接)缺陷：浏览器与服务器只保持短暂的连接，浏览器的每次请求都需要与服务器建立一个TCP连接（TCP连接的新建成本很高，因为需要客户端和服务器三次握手），服务器完成请求处理后立即断开TCP连接，服务器不跟踪每个客户也不记录过去的请求；解决方案：添加头信息——非标准的Connection字段Connection: keep-alive3. Http1.1改进点：
2021-04-07 15:51:09
114
原创 关于ajax post请求跨域问题的解决心得
最近啊，公司有个项目，需要做一个手机端APP的后台管理系统。所以用到了度文本编辑框，经过了好好一番周折，终于弄好了，带到上线的时候发现啊，只能使用ip去访问网页的时候上能穿图片他不会报跨域的问题，而使用域名的时候啊，他就会报一个跨域的问题。真心头疼啊。最后查阅了好多次的资料终于恒公了， 为了防止以后再次遇到这种问题，所以想随后把这个记录一下，也为了方便各位大神们的指点。谢谢…… 下面我
2017-04-14 13:34:34
512
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人