- 博客(85)
- 收藏
- 关注
RSS订阅
原创 for，for in , for of 和forEach四者对比
for，for in , for of 和forEach四者都是用于循环的，但是每个使用场景都是有所不同，接下来进行一个对比1. 可枚举对象const person = { name: 'henry', age: 26,};for (const key in person) { console.log(key);}//输出结果：name agefor (const value of person) { console.log(value);}// TypeError: pers
2020-08-25 15:05:38
511
原创 DNS解析
迭代：客户端发出一次请求，对方如果没有授权回答，它就会返回一个能解答这个查询的其它名称服务器列表，客户端会再向返回的列表中发出请求，直到找到最终负责所查域名的名称服务器，从它得到最终结果。即 Time To Live，翻译过来是生存时间，TTL是指DNS解析记录在DNS服务器上的生存时间（区别于请求包的TTL）。：向dns服务器查询一个域名，刚好这个域名是本服务器负责，返回的结果就是授权回答。迭代查询，又称作重指引,返回的是最佳的查询点或者主机地址.递归查询时，返回的结果只有两种:查询成功或查询失败.
2023-10-06 11:37:06
194
原创 前端监控日志产品
百度统计谷歌分析友盟sentryfundebug、frontJs、岳鹰当然还有一些前端监控产品：OneApm、听云PS：加粗的是博主用过的。
2023-09-28 17:41:19
306
原创 npm 实现原理
每个 semver 都对应一段版本允许范围，如果两个模块的版本允许范围存在交集，那么就可以得到一个兼容版本，而不必版本号完全一致，这可以使更多冗余模块在 dedupe 过程中被去掉。当发现有重复模块时，则将其丢弃。这一步将会更新工程中的 node_modules，并执行模块中的生命周期函数（按照 preinstall、install、postinstall 的顺序）。工程本身是整棵依赖树的根节点，每个首层依赖模块都是根节点下面的一棵子树，npm 会开启多进程从每个首层依赖模块开始逐步寻找更深层级的节点。
2023-09-11 15:00:18
559
原创 Windows命令行删除文件和文件夹
2.rmdir /Q /S 目录 删除文件夹（非空）/S 除目录本身外，还将删除指定目录下的所有子目录。/Q 安静模式，带 /S 删除目录树时不要求确认。命令帮助 删除文件夹（空）rd /S 文件夹路径。del 文件名.后缀。
2023-06-08 17:13:11
3586
原创 CentOS 7.6安装 MongoDB 5.0.2
进入下载官网 https://www.mongodb.com/try/download/community。选择右侧MongoDB Community Server。运行下面语句（下载地址可以换成你自己想要的版本）安装位置：/usr/local/mongodb。：此处.conf文件路径一定不能出错。修改/etc/profile配置。终端输入mongo即可。
2023-06-08 15:21:40
795
原创 linux配置nginx环境
如果不指定-c，nginx在启动时默认加载conf/nginx.conf文件，此文件的地址也可以在编译安装nginx时指定./configure的参数(–conf-path= 指向配置文件（nginx.conf）)注：安装之前需要手动创建上面指定的nginx文件夹，即/var/temp、/var/temp/nginx、/var/run/nginx/文件夹，否则启动时报错。可以进入/usr/local/nginx查看文件是否存在conf、sbin、html文件夹，若存在则安装成功。(2).重新加载配置文件。
2023-06-08 15:16:06
1468
原创 JS实现私有变量
还可以通过在返回新对象之前对其进行增强，这种方式适合要返回的单例对象需要是某个特定类型的实例，同时还必须给它添加额外属性或方法的场景。这样就可以返回一个能够被 instanceof 操作符确定类型的对象，同时这个对象还有着对应的私有变量和操作私有变量的特权方法。特权方法定义在this上，用new实例化后，就可以访问到在new的过程中隐式调用构造函数时产生的私有变量（不知道new过程的。立即执行函数内部挂载一个构造函数到外部变量上，然后把特权方法定义在够着函数的原型上，实例化后可通过原型链访问到特权方法。
2023-03-22 21:00:20
584
1
原创 前端工程化：ESLint、Prettier、husky、lint-staged以及vscode的配置
当然，这些代码检查如果可以在编写的时候就格式化会更好，这就需要配置vscode，这里能够。现在vite大行其道，那怎么都少不了用。，想快速的可以直接看怎么。
2023-03-21 15:52:59
150
1
原创 cnpm报错‘cnpm‘不是内部或外部命令，也不是可运行的程序或批处理文件
cnpm报错‘cnpm‘不是内部或外部命令，也不是可运行的程序或批处理文件
2022-06-11 11:37:22
9835
2
原创 async原理实现
前言如果不了解使用的可参考 async 函数，这里不再赘述。想要看原理的童鞋，需要了解下 Generator函数原理async实现就是将 Generator 函数和自动执行器，包装在一个函数里。async function fn(args) { // ...}function fn(args) { return spawn(function* () { // ... })}所有的 async 函数都可以写成上面的第二种形式，其中 spawn 函数就
2022-05-31 17:57:13
356
原创 bind原理及模拟实现
前言如果不了解bind的使用的请前往 Function.prototype.bind，这里不在赘述。想要看bind原理的童鞋，需要对以下知识有了解：闭包原型链this的指向Array.prototype.slicenew的过程Object.create思路bind方法不会立即执行函数，而且需要保存一个入参，所以这里利用到了 闭包改变函数的作用域，因此要利用 apply 或者 call方法来实现获取函数的所有入参arguments，以及使用 slice 转化出一个数组先利用上
2022-05-25 20:47:59
681
原创 Promise原理及其源码
本文不对 Promise 的用法进行说明，不了解的请前往 ES6 Promise教程接下来，我们来一边分析一边手撸代码1. promise基本结构new Promise((resolve, reject) => { setTimeout(() => { resolve('FULFILLED') }, 1000)})构造函数Promise必须接受一个函数作为参数，我们称该函数为handle，handle又包含resolve和reject两个参数，它们两都是函数。.
2022-05-17 17:01:56
672
原创 算法：基数排序
前言如果想深入了解的话建议先看看 算法概述为了方便用来测试的数组一成不变，我们可以来一个随机数组const arr = []const arrLength = 11 //可以随机长度 Math.floor(Math.random() * 30) + 1for (let i = 0; i < arrLength; i++) { arr.push(Math.floor(Math.random() * 99) + 1)}console.log(arr, 'arr')算法描述基数排
2022-04-27 17:46:17
115
原创 算法：桶排序
前言如果想深入了解的话建议先看看 算法概述为了方便用来测试的数组一成不变，我们可以来一个随机数组const arr = []const arrLength = 11 //可以随机长度 Math.floor(Math.random() * 30) + 1for (let i = 0; i < arrLength; i++) { arr.push(Math.floor(Math.random() * 99) + 1)}console.log(arr, 'arr')算法描述桶排序
2022-04-27 12:31:08
133
原创 算法：计数排序
前言如果想深入了解的话建议先看看 算法概述为了方便用来测试的数组一成不变，我们可以来一个随机数组const arr = []const arrLength = 11 //可以随机长度 Math.floor(Math.random() * 30) + 1for (let i = 0; i < arrLength; i++) { arr.push(Math.floor(Math.random() * 99) + 1)}console.log(arr, 'arr')算法描述计数
2022-04-26 20:53:58
1883
原创 算法：堆排序
前言如果想深入了解的话建议先看看 算法概述为了方便用来测试的数组一成不变，我们可以来一个随机数组const arr = []const arrLength = 11 //可以随机长度 Math.floor(Math.random() * 30) + 1for (let i = 0; i < arrLength; i++) { arr.push(Math.floor(Math.random() * 99) + 1)}console.log(arr, 'arr')算法描述堆排
2022-04-26 19:45:53
526
原创 算法：归并排序及优化
前言如果想深入了解的话建议先看看 算法概述为了方便用来测试的数组一成不变，我们可以来一个随机数组const arr = []const arrLength = 11 //可以随机长度 Math.floor(Math.random() * 30) + 1for (let i = 0; i < arrLength; i++) { arr.push(Math.floor(Math.random() * 99) + 1)}console.log(arr, 'arr')算法描述该算法
2022-04-25 18:02:48
1358
原创 算法：希尔排序及优化
前言如果想深入了解的话建议先看看 算法概述为了方便用来测试的数组一成不变，我们可以来一个随机数组const arr = []const arrLength = 11 //可以随机长度 Math.floor(Math.random() * 30) + 1for (let i = 0; i < arrLength; i++) { arr.push(Math.floor(Math.random() * 99) + 1)}console.log(arr, 'arr')算法描述希尔排
2022-04-25 16:41:20
286
原创 算法：快速排序及优化
前言如果想深入了解的话建议先看看 算法概述为了方便用来测试的数组一成不变，我们可以来一个随机数组const arr = []const arrLength = 11 //可以随机长度 Math.floor(Math.random() * 30) + 1for (let i = 0; i < arrLength; i++) { arr.push(Math.floor(Math.random() * 99) + 1)}console.log(arr, 'arr')算法描述来到快
2022-04-24 12:24:26
1669
原创 算法：插入排序及优化
前言如果想深入了解的话建议先看看 算法概述为了方便用来测试的数组一成不变，我们可以来一个随机数组const arr = []const arrLength = 11 //可以随机长度 Math.floor(Math.random() * 30) + 1for (let i = 0; i < arrLength; i++) { arr.push(Math.floor(Math.random() * 99) + 1)}console.log(arr, 'arr')算法描述此算法
2022-04-22 18:41:57
893
原创 算法：选择排序及优化
前言如果想深入了解的话建议先看看 算法概述为了方便用来测试的数组一成不变，我们可以来一个随机数组const arr = []const arrLength = 11 //可以随机长度 Math.floor(Math.random() * 30) + 1for (let i = 0; i < arrLength; i++) { arr.push(Math.floor(Math.random() * 99) + 1)}console.log(arr, 'arr')算法描述首先在
2022-04-21 17:46:24
980
原创 算法：冒泡排序及优化
前言如果想深入了解的话建议先看看 算法概述为了方便用来测试的数组一成不变，我们可以来一个随机数组const arr = []const arrLength = 11 //可以随机长度 Math.floor(Math.random() * 30) + 1for (let i = 0; i < arrLength; i++) { arr.push(Math.floor(Math.random() * 99) + 1)}console.log(arr, 'arr')算法描述比较
2022-04-21 15:40:54
172
原创 关于算法复杂度的理解
前言一般我们谈到算法题，都会涉及到复杂度，如时间复杂度、空间复杂度。下面，我们具体讲讲复杂度是怎么表示的分析要解释复杂度的概念，我们拿最常见的冒泡排序来讲解一下：假如有一组数组 [4,3,2,1]冒泡排序的思路是两两比较大小，看是否需要换位置，因此上面的数组需要进行如下对比：(4,3),(4,2),(4,1),(3,2),(3,1),(2,1)，看出来了吗，其实就是我们学数学时的排列组合，上面这个就是C3(2)，结果是： 3*(3-1)/2=6所以冒泡排序的复杂度为：n*(n-1)/2当然
2022-04-20 12:32:21
289
原创 VUE三个版本数据驱动更新视图机制对比
视图更新对比vue1 小粒度更新，精确追踪到数据变化所影响的dom变化，精确更新变化的dom实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。具体的实现代码可前往： 实现一个简易版的vue1也可以参考：vue早期源码学习vue2 以组件粒度为范围，组件内diff式更新
2022-04-07 17:00:50
1210
原创 实现一个简易版的vue1
/** * 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。 * 实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。 * 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。 */function Vue (options) { var self = this; this.data = options.data; this.methods = op
2022-04-07 16:10:13
99
原创 vue1历史源码解析：数组更新检测
前言我们先来看看vue对应数组更新检测的文档：数组更新检测1、Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：push()pop()shift()unshift()splice()sort()reverse()2、Vue.js 不能检测到下面数组变化：直接用索引设置元素，如 vm.items[0] = {}；修改数据的长度，如 vm.items.length = 0。解析Q：数组更新检测的整体思路是什么呢？A：通过重新包装数据中数组的pus
2022-04-06 19:07:39
989
原创 Vue脚手架（安装vue2/vue3）
一、node、npm安装及使用1、安装node、npm直接在官方网站中下载安装安装完成检查是否安装成功node -vnpm -v使用taobao镜像（新镜像）加速npm install -g cnpm --registry=https://registry.npmmirror.com2、安装vue-cli2卸载vue3.X+（如果安装过）npm uninstall -g @vue/cli安装vue2npm install vue-cli -g检查是否安装成功vue -V
2022-03-30 11:44:05
2214
原创 函数作用域
先来一段代码var a = 1function handle(){ if(true){ var a = 1 let b =2 const c = 3 }}handle()然后我们来看下执行过程中，各个作用域的表现从上面的截图我们可以看到有三种作用域，分别是全局作用域Global（一般指window）函数作用域Local（局部作用域）块状作用域Block全局变量会挂载在window上面局部变量在函数内部创建，一旦函数执行完释放后就会被回
2022-03-08 14:25:28
110
原创 vue3新的组件
1.Fragment在Vue2中: 组件必须有一个根标签在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用2.Teleport什么是Teleport？—— Teleport 是一种能够将我们的 组件html结构 移动到指定位置的技术。<teleport to="移动位置"> <div v-if="isShow" class="mask"> <div class="dialog"
2022-03-02 14:18:18
569
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人