herman_student的博客

原创 手写实现深拷贝

原理：toString() 是 Object 的原型方法，调用该方法，可以统一返回格式为 “[object Xxx]” 的字符串，其中 Xxx 就是对象的类型。对于 Object 对象，直接调用 toString() 就能返回 [object Object]；而对于其他对象，则需要通过 call 来调用，才能返回正确的类型信息。原理：因为内部机制是通过判断对象的原型链中是不是能找到类型的。

转载 数组去重+多维数组扁平化

数组去重与多维数组扁平化是常见的前端处理数据的方式，低代码实现数据交互与数据展示是良好前端所必备；

原创 Ajax原理以及实现

前言： ①Ajax的原理是在用户和服务器之间通过（AJAX引擎）加了—个中间层，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。最关键的一步就是从服务器获得请求数据。...

原创 Javascript closure

什么是闭包？要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量（作用域链）。//第一种var t = 666;function f1(){　　console.log(t);}f1(); //第二种function f2(){　　var z = 777;}f2();console.log(z)//第三种function f1(){　　e=

原创 React的Hooks相关API与Redux状态管理

前言：Hook是raect16.8之后新增的特征，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Redux是相关数据处理与状态管理React的Hooks相关API与Redux事件派发流程新老生命周期对比React16.2及之前版本React16.3之后版本Hooks的API基础HooksuseState：useEffectuseContext额外的 HooksuseReduceruseCallbackuseMemouseRefuseImperativeHandle

原创 前端实现即时通讯的几种方式

前端实现即时通讯的几种方式短轮询长轮询Web SocketSSE前言：由于http协议是请求/响应式的, 每一个 http响应都是由一个对应的 http请求产生的; http 协议是无状态的,多个 http 请求之间是没有关系的。常见的有股票数据echart图实时更新、基金行业批处理某个基金查看全局的无感刷新。主要是以下几种方式短轮询定义：其实就是普通的轮询。指在特定的的时间间隔（如每1秒），由浏览器对服务器发出请求，然后由服务器返回最新的数据给客户端的浏览器。var xhr = new XMLHt

原创 从输入URL到页面加载发生了什么

用户输入URL到页面加载发生了什么整个过程涉及包含：一、输入URL浏览器进行查找二、DNS解析为IP三、根据IP建立TCP连接(三次握手)HTTP请求处理请求返回HTTP响应页面渲染关闭连接（四次挥手）前言：当用户打开浏览器，在地址栏输入完整的url到页面最终结构与数据呈现的过程中，到底发生了什么？这是一个非常经典的前端面试题。涉及到部分资料来源于网络，如有侵权，联系必删！整个过程涉及包含：一、输入URL浏览器进行查找输入URL我们常见的URL地址：http://www.baidu.com。UR

原创 Nuxt.js中使用keep-alive进行页面缓存相关汇总

前言：在Nuxt.js实际的项目开发过程中可能会遇到各种的使用需求场景，其中很多还是后台管理系统的会比较多，并且多数以分页表格的形式展示数据。主要解决从表格进入详情再返回表格当前数据不变化。keep-alive的使用说明Nuxt.js的官方使用针对根目录的layouts文件下配置针对page下配置管理系统效果keep-alive使用无效的解决办法Nuxt.js的官方使用针对根目录的layouts文件下配置<template> <div> <Nuxt keep

原创 Nuxt.js开发需要安装依赖/组件的配置流程

前景：Nuxt.js的开发过程中，我们可能需要对某些需求安装某些便捷插件，提升开发效率。但是nuxt.js不同于vue框架，直接引入依赖在对应页面文件直接import。所以我们在需要对文件做配置（以数字滚动效果插件：vue-count-to.js为例）1.执行安装对应插件的依赖$ npm install vue-count-to --save-dev2.在项目目录下的plugins新增文件 vue-count-to.js 并添加如下代码用于注册全局countTo组件vue-count-to.js

原创 Git 常见操作命令

@@TOCGit代码分支管理一、代码提交1、提交前克隆仓库的代码到本地：git clone XXXXXXXXX //XXXXXX为git的http地址1.1、初次拉取代码提交前需要配置git的用户名跟邮箱$ git config --global user.name "zhangsan"$ git config --global user.email "[email protected]"2、代码提交git add ./XXX //提交指定/所有文件git commit -m "

原创 Git 提交message相关规范

背景Git每次提交代码都需要写commit message，否则就不允许提交。一般来说，commit message应该清晰明了，说明本次提交的目的，具体做了什么操作……但是在日常开发中，大家的commit message千奇百怪，中英文混合使用、fix bug等各种笼统的message司空见怪，这就导致后续代码维护成本特别大，有时自己都不知道自己的fix bug修改的是什么问题。基于以上这些问题，我们希望通过某种方式来监控用户的git commit message，让规范更好的服务于质量，提高大家的研发

原创 internal/modules/cjs/loader.js:883 throw err； ^ Error: Cannot find module ‘destr‘

使用的是nuxt.js搭建的项目，添加插件完成后退出重新yarn就报如下错误：但是实际的代码中并不存在找不到对应依赖文件；解决办法：删除node_modules包清理缓存 npm cache clean --force重新安装依赖 yarn install 或者npm install个人想法：当遇到找不到依赖的文件时，你能非常确定这个存在 可以删依赖清缓存重新安装...

原创 一图看全uni-app相关生命周期

原创 端口被占用解决办法

当遇到多个项目需要在本地运行时，需要对多个项目同时跑并且是运行写死端口的时候，会出现端口被占用，常见错误如下：ps:address一般为127.0.0.1或者0.0.0.0或者localhostprot端口自定义类似于：8002或者8000或者3000解决办法关闭并退出编辑器；“运行”中查找：win+R输入cmd；在命令行中输入netstat -ano，得到端口号对应的PID并记下；杀掉进程的命令：taskkill /pid 12244 /f 其中 /f 表示强制关闭该进程。12244代

原创 运用diff算法的Virtual DOM

什么叫做diff算法?百科解释：①把树形结构按照层级分解，只比较同级元素。②给列表结构的每个单元添加唯一的 key 属性，方便比较。传统的diff算法根据大O推导法（具体算法的问题不做细解）的时间复杂度为O(n^3)比如左侧树a节点依次进行如下对比，左侧树节点b、c、d、e亦是与右侧树每个节点对比，算法复杂度能达到O(n^ 2)，n代表节点的个数：a->e、a->d、a-&g...

原创 一图解释vue.js生命周期历程与执行步奏

慧慧