- 博客(88)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Threejs绘制有宽度的线（Line2）
在 API 中提供了三类线相关的物体,和两类材质，主要控制线的颜色，宽度等（线宽linewidth不生效）由于底层OpenGL渲染的限制性，线宽的最大和最小值都只能为 1，线宽无法设置，那么线段之间的连接形状设置也就没有意义了，因此这三个设置项都是无法生效的。
2023-10-11 09:58:43
1320
2
原创 使用svg-sprite-loader遇到的问题
由于vue cli默认已经对svg做了处理，所以在使用svg-sprite-loader时有冲突导致图标不能正常显示。然而不仅如此，在改动过老项目的时候，svg多处被用作图片/字体图标使用。对svg做的处理，正则匹配后缀名为.svg的文件，匹配成功之后使用 url-loader 进行处理。加载器用起来真香，配置起来也很简单，网上有很多教程，再=在此就不追述了；仅记录一下我在配置时踩的坑。文件放到不同的目录中，配置不同的。(作为icon的svg)通过上面的配置不同的。
2023-04-20 17:46:30
731
1
原创 【JS】已知p1 和 p2 ，是L上的两点，点p3为直线外一点，求p3在直线L上的投影点p
已知p1 和 p2 ，是L上的两点，点p3为直线外一点，求p3在直线L上的投影点p。
2023-01-16 09:46:00
260
原创 什么是工程化，为什么需要工程化
前端工程化应该包含从编码开始到发布，运行和维护阶段,也有人把 前端工程化 等同于效率工程一切以提高效率、降低成本、质量保证为目的的手段都属于「工程化」
2022-08-26 09:58:38
1955
原创 【LeetCode】二分查找法(持续更新)
系列文章目录文章目录系列文章目录前言704.二分查找[简单]69.x 的平方根[简单]50.Pow(x, n)4.寻找两个正序数组的中位数33.搜索旋转排序数组34.在排序数组中查找元素的第一个和最后一个位置153.寻找旋转排序数组中的最小值162.寻找峰值230.二叉搜索树中第K小的元素287.寻找重复数349.两个数组的交集剑指 Offer 11.旋转数组的最小数字剑指 Offer 53 - I.在排序数组中查找数字 I剑指 Offer 53 - II.0～n-1中缺失的数字前言该文章总结力扣中使
2022-05-27 14:36:23
147
原创 ES6中的get/set
文章目录一、为什么需要使用get/set方法?二、set/get的使用方式三、set/get的一个使用场景：在每次登录的时候检测是否已经登录一、为什么需要使用get/set方法?class中有几个属性修饰符：public 可以被其他所有类访问protected 自身、子类可以访问private 只能被自身访问一个属性如果设置为public类型是非常危险的，会被任意修改。用get/set方法来控制变量，防止他人的恶意修改。二、set/get的使用方式例如：在对象中使用 let o
2022-05-10 10:47:11
2387
原创 init gitbook时报错：cb.apply is not a function
错误信息：根据错误信息中的提示找到polifills.js文件，// polifills.jsvar fs = require('./fs.js')var constants = require('constants')var origCwd = process.cwdvar cwd = nullvar platform = process.env.GRACEFUL_FS_PLATFORM || process.platformprocess.cwd = function() {
2022-05-07 14:29:28
571
原创 【vue】父子组件之间生命周期的执行顺序
调用顺序都是先父后子,渲染完成的顺序是先子后父。销毁操作是先父后子，销毁完成的顺序是先子后父。组件的生命周期：加载渲染过程 子组件在父组件的beforeMount和Mounted之间渲染父breforCreate -> 父created -> 父beforeMounte -> 子breforCreate -> 子created -> 子beforeMounte -> 子mounted ->父mounted 子组件的更新过程父beforeUpd.
2022-05-06 17:29:21
567
原创 tree结构中根据Id获取父节点信息
文章目录问题1：拖拽排序问题2: 展开类目问题1：拖拽排序背景：前几天做了这样一个需求 – 类目（组件选用的el-tree）支持拖拽排序其实el-tree本就可以实现拖拽，只需要添加一个draggable树形就可以了，拖拽完成后全量更新数据即可。但是全量更新数据的性能开销比较大（主要开销在于后端），所以当时技术方案定的是：如果移动到一个空的目录，preCategoryId = null && nextCategoryId = null 如果移动到一个非空目录到最上方，preC
2022-04-20 18:27:18
3915
1
原创 SSE：使用HTTP做服务端数据推送的技术及其他通信技术
文章目录一、SSE使用场景服务端响应示例浏览器处理服务器返回数据SSE使用注意事项使用示例二、轮询三、WebSocket什么是Socket？什么是WebSocket?那么他是如何建立连接？如何进行数据交换？如何维持连接呢？SSE(Server-Sent Events): 通俗说就是一种基于HTTP的，以流的形式由服务端持续向客户端发送数据的技术。一、SSE服务器发送事件，是基于http协议，和WebSocket全双工通道（web端和服务端相互通信）相比，SSE是单通道（服务端推送数据到客户端）。是
2022-04-19 10:15:30
2869
原创 尾递归是什么, 有哪些应用场景？
文章目录一、递归二、尾递归三、尾递归的应用场景1. 数组求和2. 斐波那契数列3. 数组扁平化4. 数组对象格式化一、递归如果一个函数在内部调用自身本身，这个函数就是递归函数其核心思想是把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解一般来说，递归需要有边界条件、递归前进阶段和递归返回阶段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回下面实现一个函数 factorial(x, n)，实现阶乘function factorial（n） { if(n===1) re
2022-04-18 17:35:41
426
转载 【vue】vue模版编译的过程
文章目录一、什么是模版编译二、整体渲染流程三、模板编译内部流程3.1抽象语法树AST3.2 具体流程一、什么是模版编译二、整体渲染流程所谓渲染流程，就是把用户写的类似于原生HTML的模板经过一系列处理最终反应到视图中称之为整个渲染流程。流程图如下：从图中我们也可以看到，模板编译过程就是把用户写的模板经过一系列处理最终生成render函数的过程。三、模板编译内部流程那么模板编译内部是怎么把用户写的模板经过处理最终生成render函数的呢？这内部的过程是怎样的呢？3.1抽象语法树AST我们知
2022-04-15 17:15:08
1233
原创 【vue】— provide/inject的原理
系列文章目录文章目录系列文章目录一、provide/inject的作用及使用方式二、顺道复习一下组件间的通讯方式吧三、源码分析3.1 initInjections3.2 resolveInject3.4 initProvide一、provide/inject的作用及使用方式依赖注入的主要只用是组件之间的传值。那相对于其他方式的特点：优点：祖先组件不需要知道哪些后代组件使用它提供的属性；后代组件不需要知道被注入的属性来自哪里；缺点：组件间的耦合较为紧密，不易重构；提供的属性是非响应式的
2022-04-15 11:35:46
1274
原创 【VUE】— diff算法原理
系列文章目录【VUE】— watch侦听器原理文章目录系列文章目录一、简介二、源码分析2.1 patch函数2.2 sameVnode2.3 patchVnode2.4 updateChildren三、vue3中对于diff算法的优化一、简介在vue中会维护一个和 DOM 节点对应的 vnode 对象。vnode 的 children 数组中对应子节点的 vnode 对象，所以在 vue 中通过 vnode 和真实的 DOM 树进行映射，我们也称之为虚拟树。正是有了虚拟树，当数据更新时。我们可以
2022-04-14 09:44:08
2780
原创 【leetcode】300.最长递增子序列
文章目录题目描述代码实现二分法动态规划法题目描述给你一个整数数组 nums ，找到其中最长严格递增子序列的长度。子序列 是由数组派生而来的序列，删除（或不删除）数组中的元素而不改变其余元素的顺序。例如，[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。示例 1：输入：nums = [10,9,2,5,3,7,101,18]输出：4解释：最长递增子序列是 [2,3,7,101]，因此长度为 4 。示例 2：输入：nums = [0,1,0,3,2,3]输出：4示例
2022-04-13 15:02:54
355
转载 Token的详细说明，看这一篇就够了
文章目录1.基于Token 的身份验证方法2.JWT2.1 Header2.2 Payload2.3 signatrue3.Web安全对于 Token，在很多大型网站中都有所应用，比如 Facebook，Twitter，Google，Github 等等，比起传统的身份验证方法，Token 的扩展性更强，也更安全点，非常适合用在 Web 应用或者移动应用上1.基于Token 的身份验证方法使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。大概的流程是这样的：客户端使用用户名
2022-04-11 15:58:41
5308
原创 前端常见的排序算法
文章目录1.冒泡排序2.快速排序3.插入排序4.选择排序5.归并排序6.希尔排序7.计数排序8.基数排序1.冒泡排序基本思想：重复遍历要排序的数组，每次比较相邻两个元素的大小，如果顺序错误，则交换两个元素的位置步骤：比较相邻两个元素，如果位置不对交换两个元素对每一对相邻的元素重读步骤1，直到最后，把最大（小）元素冒泡的最后一个位置针对所有（除最后一个）元素，重复步骤1，2重复步骤1，2，3，直到排序完成代码实现：function bubbleSort (arr) { let len
2022-04-11 11:04:41
5481
2
原创 Promise的all、any、race、allSettled方法的区别，及手写实现
文章目录一、共同点二、各方法之间的区别2.1返回的`promise`状态改变时机不同2.2 返回的promise实例的终值或者拒因不同2,3 参数为空迭代对象时，返回值不同三、手写实现3.1 promise.all3.2 promise.allSettled3.3 promise.any3.4 promise.race3.5 Promise.prototype.finally一、共同点这些方法的参数都接收一个promise的iterable类型(Array,Map,Set都属于ES6的iterable
2022-04-07 13:37:22
1952
原创 给出一个整数数组，求数组中所有数字可以拼接出的最大整数
题目描述：给出一个整数数组，求数组中所有数字可以拼接出的最大整数。例如：输入：[7,53, 54], 输出: 75453;输入：[1,321,35,4], 输出：4353213;代码实现思路：将数组中所有数字转为字符串，按照首字母大小进行整体排序。如果首字母相同，就通过while循环向后比较，比如52和53比较时，首字母5相同就比较2和3，如果相比较的两个字符串长度不一样，先被循环完的字符串将始终用最后一位字母进行后续比较，比如523和52进行比较时，前两位相同，523的3就和52中的最后
2022-04-06 11:21:15
2158
原创 setTimeout实现setInterval
文章目录一、setInterval存在的问题二、setTimeout实现SetInterval一、setInterval存在的问题直接例子： let startTime = new Date().getTime(); let count = 0; setInterval(function () { count++; console.log( `与原设定的间隔时差了${ new Date().g
2022-04-06 10:40:57
2681
2
原创 链表相关题目（持续更新...）
文章目录1. 链表反转2.合并两个有序链表1. 链表反转题目描述：leetcode-24function revertList (head) { if(!head) return null; let prev = null, curr = head; while(curr) { let next = curr.next; prev = curr.next; curr = next; } return prev;}2.合并两个有序链表题目描述：leetcode-21递
2022-04-02 18:02:13
724
原创 逆时针输出矩阵元素
题目描述： 输入二维数组[[1,2,3],[4,5,6], [7,8,9]], 输出[1,2,3,5,9,8,7,4,5];代码实现： function helper (m, result) { if(m.length===0) { return; } // m,length>=1, 矩阵中至少有一行 let arr1 = m.shift();//除数组的第一项 let arr2 = m.pop();// 移除最后一个数组元素 arr2可能是undefined //
2022-04-02 14:27:46
645
原创 实现：(a == 1 && a == 2 && a == 3) === true
文章目录前言取巧解法隐式转换数据劫持前言这个问题，有取巧的解法，但是当被问到这道题，面试官真正想考察的是你对于隐式转换这个知识点的理解，还有你能否考虑到数据劫持取巧解法let i=1;with({ get a() { return i++; }}){ if(a==1 && a==2 && a==3) { console.log('哈哈哈，成功了')； }}隐式转换js中通过==对两个值进行比较的时候，会做如下操作：将两个被比较的值转换
2022-04-01 14:56:39
295
原创 前端性能优化
文章目录前言1. 调试工具1.1webpack-bundle-analyzer1.2 Network面板1.3 lighthouse面板1.4 performance面板2 优化手段2.1减少HTTP请求2.2 减少资源体积2.3 其他写在最后前言最近项目功能开发基本完成，处于一个稳定版本，现阶段进入一个性能优化阶段。前端自然也进行了一定的性能优化，在这里记录一下。1. 调试工具要进行性能优化，第一步要先了解有哪些性能调试工具，排查拉低性能的问题，才能针对性的去做优化1.1webpack-bund
2022-03-28 10:44:59
5929
原创 【字节笔试】给出虚拟dom的数据结构，如何实现简单的虚拟dom，渲染到目标dom树
文章目录题目描述实现：结果题目描述给出如下虚拟dom的数据结构，如何实现简单的虚拟dom，渲染到目标dom树// 样例数据let demoNode = ({ tagName: 'ul', props: {'class': 'list'}, children: [ ({tagName: 'li', children: ['douyin']}), ({tagName: 'li', children: ['toutiao']}) ]});
2022-03-24 20:27:40
1989
转载 【Vue】— nextTick原理
文章目录前言发现问题异步更新nextTick源码分析总结补充`MutationObserver`前言在做项目的时候，我们经常会用到nextTick，简单的理解就是它就是一个setTimeout函数，将函数放到异步后去处理；将它替换成setTimeout好像也能跑起来，但它仅仅这么简单吗？那为什么我们不直接用setTimeout呢？让我们深入剖析一下。友情提示：在开启本文前，需要对JS事件循环有一定了解；如果对事件循环还不了解的小伙伴，先去了了解一下。发现问题记得之前有一个需求，就是根据文字的行数来
2022-03-24 14:07:26
5973
原创 一道非常有意思【考察基础】的JS面试题
题目：function Foo() { getName = function() { console.log(1); } return this;}Foo.getName = function() { console.log(2); }Foo.prototype.getName = function() { console.log(3); }var getName = function() { console.log(4); }function getName () { consol
2022-03-24 11:41:38
341
原创 函数防抖与函数节流
文章目录一、函数节流（throttle）1.1概念1.2实现1.3使用场景二、函数防抖（debounce）2.1概念2.2实现2.3使用场景三、区别一、函数节流（throttle）1.1概念限制一个函数在一定时间内只能执行一次1.2实现function _throttle(fn,wait,time){ //记录上一次运行的时间 var previous = null; var timer = null; return function(){ va
2022-03-24 11:32:49
124
原创 合并有序数组
文章目录一、[leetcode88] 合并两个有序数组1.1 直接合并后排序1.2 双指针法1.3 逆向双指针二、合并多个有序数组2.1 合并后排序2.1.1拉平数组2.2归并排序一、[leetcode88] 合并两个有序数组题目描述，请看这里解法：1.1 直接合并后排序 function merge(nums1, m, nums2, n) { nums1.splice(m, nums1.length, ...nums2); nums1.sort((a,b) => a-b); }
2022-03-23 19:55:38
2780
原创 实现一个简单的发布订阅模式
文章目录一、发布订阅模式是什么？二、发布订阅模式的优缺点三、实现一个通用的发布订阅模式一、发布订阅模式是什么？发布订阅模式是对象间的一种一对多的关系，由发布者、订阅者、消息管理器三部分组成，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。不论是在程序世界里还是现实生活中，发布—订阅模式的应用都非常广泛。我们先看一下现实中的例子：小明最近看上了一套房子，到了售楼处之后才被告知，该楼盘的房子早已售罄。好在售楼MM告诉小明，不久后还有一些尾盘推出。开发商正
2022-03-22 09:03:05
4456
2
原创 Generator函数
文章目录前言一、Generator是什么？二、Gernerator函数的使用方式2.1示例：2.2next()方法参数2.3for…of循环三、Genarator函数使用示例3.1斐波那契数列3.2遍历完全二叉树四、Generator的原理前言Generator 函数是 ES6 提供的一种异步编程解决方案。一、Generator是什么？语法上，可以把理解成，Generator 函数是一个状态机，封装了多个内部状态。形式上，Generator 函数是一个普通函数。整个Generator函数就是一
2022-03-21 20:18:19
255
原创 你了解Babel吗？
文章目录一、Babel 是什么，有什么用二、 AST 抽象语法树三、Babel 编译流程一、Babel 是什么，有什么用Babel 是 JavaScript 编译器：他能让开发者在开发过程中，直接使用各类方言（如 TS、Flow、JSX）或新的语法特性，而不需要考虑运行环境，因为Babel可以做到按需转换为低版本支持的代码；Babel内部原理是将 JS 代码转换为 AST，对 AST 应用各种插件进行处理，最终输出编译后的 JS 代码。二、 AST 抽象语法树简单定义：以树的形式来表现编程语言的语
2022-03-21 19:02:20
2110
原创 【从浏览器地址栏输入 url 到请求返回的过程】——6. 浏览器渲染页面（浏览器的渲染机制）
文章目录前言一、浏览器渲染的基本流程？1.1 HTML解析出DOM Tree1.2 CSS解析出Style Rules1.3 Render Tree1.4 Layout布局1.5 painting（绘制）二、浏览器渲染性能的优化2.1减少渲染中的重排重绘2.2 优化影响渲染的资源前言相关问题浏览器如何渲染页面有哪些提高浏览器渲染性能的方法一、浏览器渲染的基本流程？不同的浏览器内核不同，所以渲染过程不太一样。虽然主流浏览器渲染过程叫法有区别，但是主要流程还是相同的。下面就WebKit主流
2022-03-21 14:38:40
326
如何进行局部代码重构
2022-03-29
TA创建的收藏夹 TA关注的收藏夹
TA关注的人