- 博客(42)
- 收藏
- 关注
RSS订阅原创 一个合格的高级开发，首先应该写的一手好注释。
4、组件参数形式注释代码示例。1、对象形式的代码注释示例。2、数组形式的注释代码示例。3、函数形式的注释代码示例。
2023-11-10 12:08:42
258
原创 前端工程师梭哈初体验（基于Nest.js写服务端代码）
是一个基于 的开发框架，它使用 编写，提供了一种结构化的方法来构建可扩展的服务器端应用程序。 借鉴了 的设计思想，提供了一种模块化的方式来组织代码，使得应用程序更加易于维护和扩展。 还提供了一些内置的功能，如依赖注入、中间件、路由、异常处理等，使得开发者可以更加专注于业务逻辑的实现。 的目标是提供一种现代化的、可扩展的、高效的开发框架，使得开发者可以更加轻松地构建复杂的应用程序。作为一个前端程序员，应该都对Node.js有所了解，如果你用过或者 框架进行开发需求，那你的电脑上一定已经安装了Node。N
2023-03-30 14:39:58
380
原创 你真的了解JavaScript发布订阅者模式吗？
当我们需要在不同的对象之间建立松散的耦合关系时，发布订阅者模式是一种非常有用的设计模式。在该模式中，发布者对象维护一个订阅者列表，订阅者可以选择订阅任何类型的消息，或者只订阅特定类型的消息。当发布者发布消息时，所有订阅者都会收到通知。
2023-03-22 09:58:38
139
原创 面试测试题：卡牌游戏（请使用Vue3 + Ts 完成）
思路：去掉大小王的扑克牌，合计54张牌，跟我们正常玩扑克牌一样，先洗牌，然后依次发牌。不同的地方就是在于结果判断（这个地方没完成）。3、结果判断算法（未完成）1、洗牌算法（乱序算法）2、发牌算法（依次发牌）
2023-02-15 12:00:47
1258
原创 基于凹凸实验室的个人前端项目规范！（值得一看）
对所有引用都使用 const，不要使用 var（原因：这样做可以确保你无法重新分配引用，以避免出现错误和难以理解的代码）。如果引用是可变动的，使用 let 代替 var（原因：let 是块级作用域的，而不像 var 属于函数级作用域）。请记得 const 和 let 都是块级作用域，var 是函数级作用域。使用 === 和!== 而非 == 和!字符串统一使用单引号的形式 ’ '。禁止链式赋值与链式创建对象。
2022-11-03 10:50:31
1135
原创 JavaScript 处理价格计算时所遇见的精度问题。（math.js，big.js）
js 处理价格计算时遇见的精度问题。（0.1+0.2 !== 0.3）
2022-09-26 14:49:24
871
原创 彻底理解TCP三次握手四次挥手
TCPTCP提供面向有连接的通信传输，面向有连接是指数据通信开始之前先做好两端之间的准备工作。三次握手三次握手：是指建立一个TCP连接时需要客户端与服务端总共发送三次数据包以确认连接的建立。第一次握手：客户端将同步标志位 SYN 置为1，随机产生一个同步序列号 seq =J，并将该数据包发送给服务端，客户端进入一个 SYN_SENT 状态，等待服务端确认。第二次握手：服务端收到客户端的数据包，服务端将同步标志位 SYN置为1，确认标志位 ACK置为1，确认序列号 ack置为J+1
2022-05-20 15:24:26
435
原创 理解浏览器缓存机制
解析：浏览器的缓存机制也就是HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行。为什么需要浏览器缓存HTTP协议在客户端和浏览器建立连接时需要消耗时间，而大的响应需要在客户端和服务端之间多次往返通信才能获得完整的响应，这样就拖延了浏览器可以使用和处理的时间，增加了访问服务端数据和资源的成本，因此利用浏览器的缓存机制重用以前获取的数据就变成了性能优化时需要考虑的事情。缓存过程浏览器每次发起请求都会向浏览器缓存中查找该请求的结果以及缓存标识。浏览器每次拿到返回的请求结果都会将该结果
2022-05-19 14:39:21
204
原创 JS 垃圾回收机制以及垃圾回收策略
垃圾回收机制什么是垃圾回收机制：解释：执行环境负责管理代码执行过程中使用的内存。JS的垃圾回收机制是为了以防内存泄漏，简单来说就是：间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。什么是内存泄漏：解释：是指不再用的内存没有被垃圾回收机制及时释放出来，导致该段内存无法再使用，积少成多，导致系统越来越卡，直至崩溃。什么会引起内存泄漏：1、：意外的全局变量引起的内存泄露2、：闭包（慎用闭包，除非你很明确你的意图）3、：没有清理的 DOM 元素引用4、：遗忘的定时器或者回调怎样避
2022-05-18 15:01:18
472
原创 进程与线程
解释：进程：每个进程都有自己独立的一块内存空间，一个进程可以有多个线程，比如在Windows系统中，一个运行的应用程序就是一个进程。线程：进程中的一个执行任务（控制单元），负责当前进程中程序的执行。一个进程至少有一个线程，一个进程可以运行多个线程，多个线程可共享数据。进程与线程的区别：进程是操作系统资源分配的基本单位，而线程是处理器任务调度和执行的基本单位，线程之间共享进程资源线程运行的本质其实就是函数的执行。函数的执行总会有一个源头，这个源头就是所谓的入口函数，CPU 从入口函数开始执行从
2022-05-12 14:03:54
79
原创 长连接和短连接，长轮询和短轮询
长连接，短连接解释：TCP连接有两种工作方式：短连接方式（Short-Live Connection）和长连接方式（Long-Live Connection）短连接：当客户端有请求时，会建立一个TCP连接，接收到服务器响应后，就断开连接。下次有请求时，再建立连接，收到响应后，再断开。如此循环。这种方式主要有两个缺点：1、：建立TCP连接需要3次“握手”，拆除TCP连接需要4次“挥手”，这就需要7个数据包。如果请求和响应各占1个数据包，那么一次短连接的交互过程，有效的传输仅占2/9，这个利用率太低了。
2022-05-11 16:48:55
886
原创 认识HTTP协议和HTTPS协议
1、HTTP是什么？HTTP (HyperText Transfer Protocol, 超文本传输协议) 是一种应用非常广泛的 应用层协议。所谓 “超文本” 的含义, 就是传输的内容不仅仅是文本(比如 html, css 这个就是文本), 还可以是一些其他的资源, 比如图片, 视频, 音频等二进制的数据。2、HTTP版本迭代HTTP0.9HTTP0.9 是第一个版本的HTTP协议(已过时)。它的组成极其简单，只允许客户端发送GET这一种请求，且不支持请求头。由于没有协议头，造成了HTTP/
2022-05-10 15:23:45
528
原创 JS算法笔记(双指针实现按奇偶排序数组)
*给你一个整数数组 nums，将 nums 中的的所有偶数元素移动到数组的前面，后跟所有奇数元素。 返回满足此条件的 任一数组 作为答案。输入：nums = [3,1,2,4]输出：[2,4,3,1]解释：[4,2,3,1]、[2,4,1,3] 和 [4,2,1,3] 也会被视作正确答案。/** * @param {number[]} nums * @return {number[]} */var sortArrayByParity = function(nums) {
2022-04-29 17:15:43
181
原创 JavaScript：帮你弄懂OSI网络七层协议及TCP/IP协议
OSI什么是OSI：维基百科：开放式系统互联模型（英语：Open System Interconnection Model，缩写：OSI；简称为OSI模型）是一种概念模型，由国际标准化组织提出，一个试图使各种计算机在世界范围内互联为网络的标准框架。定义于ISO/IEC 7498-1。接下来我们来探秘OSI模型具体是什么层次划分：根据建议X.200，OSI将计算机网络体系结构划分为以下七层第1层：物理层第2层：数据链路层第3层：网络层第4层：传输层第5层：会话层第6层：表示层第7
2021-10-29 15:52:48
369
原创 JavaScript：手写new的实现
关于new：什么是new：new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。描述：new 关键字会进行如下的操作：1、创建一个空的简单JavaScript对象（即{}）；2、为步骤1新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象 ；3、将步骤1新创建的对象作为this的上下文 ；4、如果该函数没有返回对象，则返回this。代码： function my_new(fn,...args){ //创建一个新的对象 let o
2021-10-27 15:12:01
267
原创 JavaScript 手写call，apply，bind的实现
思路：call和apply实现思路：判断是否是函数调用，若非函数调用抛异常通过新对象（context）来调用函数给context创建一个fn设置为需要调用的函数结束调用完之后删除fn代码：//callFunction.prototype.my_call = function (context){ //判断是否是函数调用，不是就抛出异常 //这里的this 就是调用my_call的 if(typeof this !== 'function') { throw
2021-10-26 17:05:02
136
原创 JavaScript数组常用方法
JavaScript数组常用方法Array.map()解释：此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组 let arr = [1, 2, 3, 4, 5] let newArr = arr.map(x => x*2) //arr= [1, 2, 3, 4, 5] 原数组保持不变 //newArr = [2, 4, 6, 8, 10] 返回新数组 Array.forEach()解释：此方
2021-10-25 16:45:33
163
原创 JavaScript常用字符串方法汇总
在JS中所有用单引号或者双引号包起来的都是字符串，每一个字符串是由零到多个字符组成，ECMAScript 中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量。1：length 属性解释：length算是字符串中非常常用的一个属性了，它的功能是获取字符串的长度。当然需要注意的是js中的中文每个汉字也只代表一个字符，这里可能跟其他语言有些不一样。 var str = "Hello,JavaSc
2021-10-25 14:17:28
232
原创 JS算法笔记——替换空格
替换空格请实现一个函数，把字符串 s 中的每个空格替换成"%20"。示例 1： 输入：s = “We are happy.”输出：“We%20are%20happy.”思路首先扩充数组到每个空格替换成"%20"之后的大小。然后从后向前替换空格，也就是双指针法，过程如下：i指向新长度的末尾，j指向旧长度的末尾。为什么要从后向前填充，从前向后填充不行么？从前向后填充就是O(n^2)的算法了，因为每次添加元素都要将添加元素之后的所有元素向后移动。代码实现/** * @param {stri
2021-10-22 16:14:08
282
原创 JS算法笔记——反转字符串
反转字符串编写一个函数，其作用是将输入的字符串反转过来。输入字符串以字符数组 char[] 的形式给出。示例 1：输入：[“h”,“e”,“l”,“l”,“o”]输出：[“o”,“l”,“l”,“e”,“h”]思路数组reverse方法最简单，最直接的解法，既然是数组形式输出，直接数组reverse方法倒置数组即可，既然是算法题，肯定是不希望用数组reverse方法来解决。双指针方法对于字符串，我们定义两个指针（也可以说是索引下表），一个从字符串前面，一个从字符串后面，两个指针同时
2021-10-22 15:41:21
212
原创 JS算法笔记——移除链表元素
移除链表元素思路链表的定义具有递归的性质，因此链表题目常可以用递归的方法求解。这道题要求删除链表中所有节点值等于特定值的节点，可以用递归实现。对于给定的链表，首先对除了头节点 head以外的节点进行删除操作，然后判断 head 的节点值是否等于给定的val。如果 head 的节点值等于 val，则head 需要被删除，因此删除操作后的头节点为head.next；如果head 的节点值不等于val，则head 保留，因此删除操作后的头节点还是 head。上述过程是一个递归的过程。递归的终止条件是hea
2021-10-21 16:29:59
489
原创 JS算法笔记——有序数组的平方
有序数组的平方给你一个按 非递减顺序 排序的整数数组 nums，返回 每个数字的平方 组成的新数组，要求也按 非递减顺序 排序。示例 1： 输入：nums = [-4,-1,0,3,10] 输出：[0,1,9,16,100] 解释：平方后，数组变为 [16,1,0,9,100]，排序后，数组变为 [0,1,9,16,100]思路暴力排序数组里面每个数平方之后，再排个序。/** * @param {number[]} nums * @return {number[]} */var so
2021-10-21 15:06:07
172
原创 JS算法笔记---移除元素
移除元素给你一个数组 nums 和一个值 val，你需要 原地 移除所有数值等于 val 的元素，并返回移除后数组的新长度。示例 1: 给定 nums = [3,2,2,3], val = 3, 函数应该返回新的长度 2, 并且 nums 中的前两个元素均为 2。 你不需要考虑数组中超出新长度后面的元素。示例 2: 给定 nums = [0,1,2,2,3,0,4,2], val = 2, 函数应该返回新的长度 5, 并且 nums 中的前五个元素为 0, 1, 3, 0, 4。//时间复杂度O(n
2021-10-21 14:38:11
144
原创 JS每日一题：前端电商 sku 全排列的递归回溯算法
本文内容：https://github.com/sl1673495/blogs/issues/50需求需求描述起来很简单，有这样三个数组：let names = ["iPhone X", "iPhone XS"]let colors = ["黑色", "白色"]let storages = ["64g", "256g"]需要把他们的所有组合穷举出来，最终得到这样一个数组：[ ["iPhone X", "黑色", "64g"], ["iPhone X", "黑色", "256g"]
2021-10-15 17:00:25
322
原创 JS每日一题： JavaScript中的数组和函数在内存分别是如何存储的？
要了解数组和函数在内存中如何存储的，首先的了解数组与函数属于什么数据类型JavaScript数据类型基本数据类型：Number、String、Boolean、Undefined、Null，引用数据类型：Object、Array、Function其次得了解数据结构数据结构名词解释：在计算机科学中，数据结构（英语：data structure）是计算机中存储、组织数据的方式。常见的数据结构：堆栈，队列，数组，链表，树，图，堆积，散列表基本数据类型基本数据类型：基本数据类型保存在栈中，
2021-09-23 16:16:01
1584
原创 JS 每日一题： Proxy 与 Object.defineProperty 的区别
Proxy名词解释：Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。劫持方式：代理整个对象，只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性本质：Proxy 本质上属于元编程非破坏性数据劫持，在原对象的基础上进行了功能的衍生而又不影响原对象，符合松耦合高内聚的设计理念Object.defineProperty名词解释：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修
2021-09-22 15:55:27
580
原创 JS每日一题：写一个方法获取当前时间的前N天
此方法可以获取前N天及后N天时间function GetDateStr(AddDayCount) { var data = new Date(); data.setDate(data.getDate()+AddDayCount);//获取AddDayCount天后的日期 var year = data.getFullYear(); var month = (data.getMonth()+1)<10?"0"+(data.getMonth()+1):(data.ge
2021-09-17 16:23:26
82
原创 JS 每日一题 ：写个方法找出数组中位数差值最小的两个数
//冒泡排序let arr = [1,5,3,8,45,95,152,136]function bubble_sort(arr){let len = arr.length for(var i=0; i<len; i++){ for(var j=0; j<len -1 - i; j++){ if(arr[j] > arr[j+1]){ [arr[j],arr[j+1]] = [arr[j+1],arr[j]] } } } return arr;}.
2021-09-17 16:09:16
595
原创 每日一题：$nextTick的作用
$nextTick( [callback] )官方解释： 将回调延迟到下次 DOM 更新循环之后执行要理解这句话，首先要了解一下vue的异步更新队列，Vue 异步执行 DOM 更新。只要观察到数据变化，不会立即更新DOM,Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 数据被的多次 改变，只会被推入到队列中一次。例如，当你设置 vm.someData = ‘new value’ ，对应的DOM更新会被推到一个队列里，该组件不会立即重新渲染，会在当前tick完毕后，在下一个t
2021-09-10 16:12:50
203
原创 每日一题：如果数据层级超过30层，一般如何渲染页面
vue 数据层级深的时候，会出现无法渲染的问题，底层数据变了，但是也没数据没变 ，可以用this.$forceUpdate()去触发渲染。$forceUpdate()forceUpdate(): 迫使Vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件。结合vue的生命周期，调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数，不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。...
2021-09-10 16:02:52
180
原创 JS 每日一题： 解释下Delete操作符的作用
作用：delete 操作符用于删除对象的某个属性；如果没有指向这个属性的引用，那它最终会被释放。返回值：delete操作符具有返回值，返回值为布尔值，对于所有情况都是true，即使是删除不存在的属性也会返回true，但是也有例外的情况(返回false)，如果属性是不可配置属性(对于不可配置属性的概念，可以参考Object. defineProperty，我第一次听说这个概念的时候也有点蒙圈), 在非严格模式下，返回false，在严格模式下则会抛出语法错误的异常。具体使用：对象属性不存在 （如果删除对
2021-09-09 15:19:52
395
原创 JS 每日一题： 请解释下DOM 元素事件执行的顺序
要理解DOM 元素事件执行的顺序,首先得了解什么是DOM，什么是事件，执行顺序等DOM文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。事件事件指可以被 JavaScript 侦测到的行为。即鼠标点击、页面或图像载入、鼠标悬浮于页面的某个热点之上、在
2021-09-09 14:57:50
424
原创 for 循环时 key 的作用 及diff算法
写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？本文容截选至：https://blog.csdn.net/weixin_42707287/article/details/113994483标准答案：vue和react 都是采用diff算法来对比新旧虚拟节点，从而更新节点，在vue的diff函数中（待会我们再来探究diff函数）在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key区对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key
2021-06-22 14:53:47
399
原创 JS手写节流
节流let timer, flag;/** * 节流原理：在一定时间内，只能触发一次 * * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */function throttle(func, wait = 500, immediate = true) { if (immediate) { if (!fl
2021-06-02 17:16:14
144
原创 JS手写防抖
防抖let timeout = null;/** * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数 * * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */function debounce(func, wait = 500, immediate = false) { // 清
2021-06-02 17:14:49
78
原创 项目重构
为啥要重构代码 之前一直以为系统重构就是那些系统架构师、大牛们玩的高端玩意儿，现在想想，个人项目已经迭代更新四十多次了，随着业务需求的增加，问题也会越来越多。业务繁杂，代码结构混乱，层次不清，存在很多冗余代码。重构代码也就很有必要了。重构代码原则1、项目每个模块定位清晰明确。2、项目结构清晰，代码风格优雅、内容高质量，开发严格按照合理的设计模式和编程思想基本原则。3、项目功能交互上的一个极致体验，功能上不卡顿不闪退，交互上满足每一个产品需求细节。4、可扩展性（引用一句大佬的话语：代码是写给人
2021-04-02 15:33:28
196
2
原创 JS算法笔记—二分查找
JS算法笔记—二分查找//二分查找是一种基于比较目标值和数组中间元素的教科书式算法。//如果目标值等于中间元素，则找到目标值。//如果目标值较小，继续在左侧搜索。//如果目标值较大，则继续在右侧搜索。//时间复杂度：O(logN)。 空间复杂度：O(1)。//二分查找var search = function(nums, target) { let left = 0; // 初始左边界 let right = nums.length - 1; // 初始右边界 // 如果le
2021-03-30 16:44:59
81
原创 JS算法笔记—快速排序
JS算法笔记—快速排序//快速排序let arr = [5,7,9,6,4,2,78,56,55,98,123] function quickSort2(arr, start, end) { while(start >= end) return let pivot = start, pivotVal = arr[pivot], idx = pivot + 1 while (idx <= end) { if (arr[idx] < pivotVal) {
2021-03-30 11:43:27
67
原创 JS算法笔记---快速排序
//快速排序function quickSort(arr){ function swap(arr,right,left){ var tmp = arr[right]; arr[right]=arr[left]; arr[left]=tmp; } function partition(arr,left,right){//分区操作， var pivotValue=arr[right]//最右面设为标准 va
2021-03-30 11:36:39
68
原创 JS 算法笔记–-冒泡排序
JS算法笔记–冒泡排序//冒泡排序let arr = [1,5,3,8,45,95,152,136]function bubble_sort(arr){let len = arr.length for(var i=0; i<len; i++){ for(var j=0; j<len -1 - i; j++){ if(arr[j] > arr[j+1]){ [arr[j],arr[j+1]] = [arr[j+1],arr[j]] } } } re
2021-03-30 11:23:03
103
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人