- 博客(101)
- 收藏
- 关注
RSS订阅
原创 实现LRU缓存淘汰算法
LRU:缓存淘汰算法,最近最少使用淘汰队列class LRUCache{ constructor(size){ this.capacity = size; this.cache = new Map(); } // 队列 先前先出 对头进 队尾出 get(key){ if(this.cache.has(key)){ let temp = this.cache.get(key); .
2022-01-03 00:50:25
806
原创 获取对象属性的方法和注意点
// 每一个属性绑定一个depfunctiondefineReactive(data,key,val=data[key]){// 内部使用了闭包letdep = newDep();Object.defineProperty(data,key,{enumerable:false,configurable:true,get(){// dep.depend()console.log('访问');return val; },set(newVal){if(val===newVal){ret
2021-12-29 01:49:51
643
原创 git日常上线流程
1.本地分支上传远端git push2.切换到master主分支。git checkout master3.拉取最新git pull4.新建分支 merge/日期先切换 git checkout merge/20210528切换没有的话新建+切换 git checkout -b merge/202105285.合并自己的分支到merge/日期分支（合分支之前必须要保证自己的分支已经发到远端）git merge origin/feature/paymentInfo-2020-5-256
2021-05-30 22:34:49
372
原创 State Hook
State HookState Hook是一个在函数组件中使用的函数（useState），用于在函数组件中使用状态useState函数有一个参数，这个参数的值表示状态的默认值函数的返回值是一个数组，该数组一定包含两项第一项：当前状态的值第二项：改变状态的函数一个函数组件中可以有多个状态，这种做法非常有利于横向切分关注点。注意的细节useState最好写到函数的起始位置，便于阅读useState严禁出现在代码块（判断、循环）中useState返回的函数（数组的第二项），引用不
2021-05-22 21:29:19
68
原创 Sql日志
sql日志是为了记录一些之前的所有操作,一般是为了查看一些误操作之前的操作是什么,便于维护，node中常用的日志库是log4js写好日志配置 专门写在一个文件中 导出日志对象（一个日志类别就是一个对象）const log4js = require("log4js");const path = require("path");log4js.configure({ //日志配置文件 appenders: { sql: { //定义一个sql日志出口 ...
2021-05-15 23:27:20
1514
原创 剑指 Offer 06. 从尾到头打印链表
剑指 Offer 06. 从尾到头打印链表输入一个链表的头节点，从尾到头反过来返回每个节点的值（用数组返回）。示例 1：输入：head = [1,3,2]输出：[2,3,1]var reversePrint = function(head) { if(head===null){ return []; } let arr = []; while(head!==null){ arr.push(head.val)
2021-05-09 22:59:49
62
原创 剑指 Offer 07. 重建二叉树
剑指 Offer 07. 重建二叉树输入某二叉树的前序遍历和中序遍历的结果，请重建该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如，给出前序遍历 preorder =[3,9,20,15,7]中序遍历 inorder = [9,3,15,20,7]返回如下的二叉树： 3 / \ 9 20 / \ 15 7解法：分治法递归根据前序找到根节点的值 找到根节点在中序中的位置 找出中序和前序的左右子树 再继续.
2021-05-09 22:58:05
68
原创 剑指 Offer 05. 替换空格
剑指 Offer 05. 替换空格请实现一个函数，把字符串s中的每个空格替换成"%20"。示例 1：输入：s = "We are happy."输出："We%20are%20happy."方法：字符串转数组 替换数组值时间复杂度：O(n) 空间复杂度：O(n)var replaceSpace = function(s) { // return s.replaceAll(" ","%20") //时间复杂度 O(n) 空间复杂度O(n) ...
2021-05-09 15:39:37
51
原创 剑指 Offer 04. 二维数组中的查找
1剑指 Offer 04. 二维数组中的查找在一个 n * m 的二维数组中，每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个高效的函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。示例:现有矩阵 matrix 如下：[ [1, 4, 7, 11, 15], [2, 5, 8, 12, 19], [3, 6, 9, 16, 22], [10, 13, 14, 17, 24], [18, 21, 23,
2021-05-09 15:16:12
101
原创 剑指 Offer 03.数组中重复的数字
剑指 Offer 03. 数组中重复的数字找出数组中重复的数字。在一个长度为 n 的数组 nums 里的所有数字都在 0～n-1 的范围内。数组中某些数字是重复的，但不知道有几个数字重复了，也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。示例 1：输入： [2, 3, 1, 0, 2, 5, 3] 输出：2 或 3方法：利用哈希表 如果哈希表中有该键,直接返回该键 无改键时随便赋值（这里复制为true）时间复杂度：最坏O(n) 最好O(1)空间复杂...
2021-05-09 14:59:52
58
原创 网络常见面试题
网络部分Http和Https的区别？一、传输信息安全性不同1、http协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。2、https协议：是具有安全性的ssl加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。二、连接方式不同1、http协议：http的连接很简单，是无状态的。2、https协议：是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网络协议。三、端口不同1、http协议：使用的
2021-05-06 18:15:26
233
1
原创 MockJs常见用法总结
属性值是字符串 Stringconsole.log( Mock.mock({ 'data1|1-4': '陈学辉', *//随机重复1-4次* 'data2|3': '好帅', *//固定重置3次* }));属性值是数字 Numberconsole.log( Mock.mock({ 'number1|+1': 100, *//整数，自动加1并且初始值为100* 'number2|1-100': 12, *//整数，1-10
2021-05-06 17:59:25
952
原创 手动搭建一个https服务器,并颁发证书
1.下载安装openssl（用于生成秘钥颁发证书）mac自带window：https://slproweb.com/products/Win32OpenSSL.html2.生成CA证书，CA钥和CA公钥生成CA私钥,并用des3算法进行加密：openssl genrsa -des3 -out ca-pri-key.pem 1024生成CA公钥：openssl req -new -key ca-pri-key.pem -out ca-pub-key.pem生成CA
2021-05-05 22:49:33
644
1
转载 前端常用设计模式
前端的设计模式是什么设计模式一个比较宏观的概念，通俗来讲，它是软件开发人员在软件开发过程中面临的一些具有代表性问题的解决方案。当然，在实际开发中不用设计模式同样也是可以实现需求的，只是在业务逻辑比较复杂的情况下，代码可读性及可维护性变差。所以随着业务逻辑的扩展，了解常用设计模式解决问题是非常有必要的。前端的设计模式的基本准则 单一职责原则：每个类只需要负责自己的那部分，类的复杂度降低。 开闭原则：一个实体，如类、模块和函数应该对扩展开放，对修改关闭，让程序更稳定更灵活。
2021-05-04 20:10:07
229
原创 文件流
什么是文件流？数据从一个地方流到另一个地方可读流(Readable):外部设备(磁盘,网卡,显卡,打印机等等) --->>> 内存可写流(Writeable):内存 --->>> 外部设备(磁盘,网卡,显卡,打印机等等)双工流(Duple):内存 <<<---->>>外部设备(磁盘,网卡,显卡,打印机等等)为什么需要流？(节约内存)外部设备与内存中的数据规模不一致 内存小 外...
2021-05-03 01:58:35
1863
原创 IO模块
什么是IO?对外部设备的输入与输出,外部设备(磁盘,网卡,显卡,打印机等等)，IO速度往往低于内存与CPU之间的交互速度.fs模块由于IO的速度远远满于CPU和内存之间的交互速度,如果使用同步代码的话,在做IO是时会阻塞js的执行(js执行是cpu直接与内存交互),因此基本所有的api都是异步执行的,node12之后回调可以使用fs.promise.api 写1.readFile(filename,encoding) readFileSync 同步读代码const fs =...
2021-05-03 01:39:15
812
原创 手动封装获取文件子目录和内容
const fs = require("fs");const path = require("path");class File{ constructor(filename,size,name,ctime,utime,isFile){ this.filename = filename; this.name = name; this.size =size; this.ctime = ctime; this.uti.
2021-05-02 20:07:49
89
原创 Node常用基本内置模块
一、OS模块 查看操作系统信息const os = require("os");console.log(os); console.log(os.EOL); //换行符console.log(os.cpus().length); //内核 8核console.log(os.freemem()/2**30); //剩余内存 多少kbconsole.log(os.homedir()); //用户目录 C:\Users\Lenovoconsole.log(os.hostn.
2021-05-01 23:37:29
163
原创 CSRF跨站请求伪造
什么是跨站请求伪造？（用户访问恶意网站）1.用户在登录正常网站时,会获取到正常站点的令牌，以cookie形式保存2.当用户访问恶意网站时,恶意网站通过某种形式去请求正常网站(请求伪造),由于用户已获取此站点的令牌，因此直接进入正常站点,模拟用户操作，进行攻击防御：1.设置cookie的samesite 在跨站请求时是否携带cookie strict 严格 所有的跨站都不允许携带cookie 但有时可能会导致用户体验不好,比如从csdn跳到牛客让你重新登录 ...
2021-04-27 22:31:58
97
原创 跨站脚本攻击XSS
XSS跨站脚本攻击 Cross Site Scripting分为两种类型存储型和反射性对于存储型XSS而言，只要用户正常浏览网页，就会中招，所以危害极大。而对于反射型XSS而言，需要诱导用户去点击恶意链接才能中招。1.存储型（在不知情下就被攻击）恶意用户向服务器提交了恶意内容（script脚本等），服务器保存了收到的内容当普通用户访问时，会返回恶意内容，进而进行脚本攻击（正常访问,比如打开微博,看一下今天的热点然后被攻击了）比如恶意用户给提交的是这种内容,到你请求时,服务器渲染页面.
2021-04-27 21:59:06
61
原创 手写数组方法
封装一个forEachArray.prototype.myForEach = function (fun) { for (var i in this) { if (this.hasOwnProperty(i)) { fun(this[i], i, this); } }}封装一个filterArray.prototype.myFilter = function (fun) { var arr = []; //定义一个新的
2021-04-26 23:49:06
95
原创 Unicode编码和Base64编码
JavaScript定义了 6个全局方法用于 Unicode字符串的编码和解码，说明如表所示。 方法 说明 escape() 使用转义序列替换某些字符来对字符串进行编码 unescape() 对使用escape()编码的字符串进行解码 encodeURI() 通过转义某些字符对 URI进行编码 decodeURI() 对使用encodeURI()方法编码的字符串进行解码 encodeURIComponent() 通过某些转义字符...
2021-04-26 23:11:08
1601
原创 行级元素和块级元素的margin和padding
行级元素padding都生效，但margin上下不生效 div{ display: inline; background-color: aqua; padding: 10px 10px; margin: 10px 10px; }块级级元素padding，margin都生效（inline-block也一样）div{ display: block;
2021-04-26 22:49:55
416
原创 数组扁平化的几种方法
// 数组扁平化let arr = [1, 2, [2, 3]];console.log(arr.flat(Infinity));arr.toString().split(",").join(",");//利用join将其转化为字符串 再分割console.log(arr.toString().split(",").map((el) => { return Number(el);}))//利用join将其转化为字符串 在分割console.log(arr.join(".
2021-04-25 12:28:02
78
原创 LeetCode13:罗马数字转整数
罗马数字转整数Category Difficulty Likes Dislikes algorithms Easy (62.41%) 1282 - TagsCompanies罗马数字包含以下七种字符:I，V，X，L，C，D和M。字符 数值I 1V 5X 10L 50C 100D ...
2021-04-25 12:25:48
72
原创 手写事件总线
事件总线可以解决所有组件之间进行通信的问题function EventBus() { // 对象存储事件{ event1:[handle1,handle2],event2:[handle1,handle2]} // 监听事件时 接受参数 先判断是否有这个事件 没有的话为这个事件创建一个set用于存储事件函数 // 然后将事件函数添加到set中 //用于存储所有事件 const listeners = {}; retur
2021-04-22 13:27:22
109
原创 vue.config.js常用配置
1.devserve 配置开发服务器2.Publicpath 配置基地址 BASE_URL等于publicpath的值 Type:string Default:'/' 部署应用包时的基本 URL。用法和 webpack 本身的output.publicPath一致 3.runtimeCompiler 是否开启运行时编译 开启会在运行是进行编译 并给打包结果中加入编译器 Type:boolean Default:false 是否...
2021-04-20 21:16:21
321
原创 AJAX
AJAX,全称Asynchronous JavaScript and XML 是一种用于在Web页面中实现异步数据交互，无需重新加载整个页面，就可以更新部分网页的技术，可以通过缓存来提高页面性能。异步：ajax在发送请求时.不需要等待服务器返回结果，就可以再次进行发送。局部刷新：他可以在页面不刷新的情况发送请求,拿取数据,局部刷新。在传统的网页中，如果想发送客户端信息到服务器，需要建立一个HTML 表单然后GET或者POST数据到服务器端用户需要点击提交按钮来发送数据信息，然后等待服务器响应请求，页面重
2021-04-20 18:07:54
68
原创 动画
动画transition 过渡 transition-property: css属性/none/all 默认all transition-duration: 过渡时间 秒 transition-timeting-function:过渡动画类型 默认ease linear: 线性过渡 等同于贝塞尔曲线(0.0,0.0,1.0,1.0)两个坐标 剩下的查api transition-delay: 过渡延迟时间 秒animation
2021-04-19 22:23:01
73
原创 响应式布局
思考以前多设备展示需要开发不同的页面响应式布局 只需要让用户在不同的设备上看到的页面呈现的效果是完美的1css像素 !=== 设备像素 （跟据屏幕分辨率和设备分辨率调节）meta 调节视口大小 跟据不同分辨率进行相应调节 以展示给用户的大小差不多name = ‘viewport’content=‘width=device-width,initial-scale=1.0’width = device-width; 在iphone/ipad上面横竖屏都等于竖屏宽度 不自适应initia
2021-04-19 22:16:15
140
原创 Vue优化
使用key对于通过循环生成的列表，应给每个列表项一个稳定且唯一的key，这有利于在列表变动时，尽量少的删除、新增、改动元素使用冻结的对象冻结的对象不会被响应化使用函数式组件参见函数式组件使用计算属性如果模板中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性以缓存它们非实时绑定的表单项当使用v-model绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致vue发生重渲染（rerender），这会带来一些性能的开销。特别是当用户改变表单项时，页面有一些动画正在
2021-04-16 00:40:20
85
原创 vue过渡与动画
内置组件Transition官网详细文档：https://cn.vuejs.org/v2/guide/transitions.html时机Transition组件会监控slot中唯一根元素的出现和消失，并会在其出现和消失时应用过渡效果具体的监听内容是：它会对新旧两个虚拟节点进行对比，如果旧节点被销毁，则应用消失效果，如果新节点是新增的，则应用进入效果如果不是上述情况，则它会对比新旧节点，观察其v-show是否变化，true->false应用消失效果，false->true应用进
2021-04-16 00:39:38
75
原创 Vue生命周期
创建vue实例和创建组件的流程基本一致首先做一些初始化的操作，主要是设置一些私有属性到实例中运行生命周期钩子函数beforeCreate进入注入流程：处理属性、computed、methods、data、provide、inject，最后使用代理模式将它们挂载到实例中运行生命周期钩子函数created生成render函数：如果有配置，直接使用配置的render，如果没有，使用运行时编译器，把模板编译为render运行生命周期钩子函数beforeMount创建一...
2021-04-16 00:37:26
169
原创 v-model原理
v-model即可以作用于表单元素，又可作用于自定义组件，无论是哪一种情况，它都是一个语法糖，最终会生成一个属性和一个事件当其作用于表单元素时，vue会根据作用的表单元素类型而生成合适的属性和事件。例如，作用于普通文本框的时候，它会生成value属性和input事件，而当其作用于单选框或多选框时，它会生成checked属性和change事件。v-model也可作用于自定义组件，当其作用于自定义组件时，默认情况下，它会生成一个value属性和input事件。<Comp v-model="data"
2021-04-16 00:36:08
140
原创 vue组件之间有哪些通信方式？
父子组件通信绝大部分vue本身提供的通信方式，都是父子组件通信prop最常见的组件通信方式之一，由父组件传递到子组件event最常见的组件通信方式之一，当子组件发生了某些事，可以通过event通知父组件style和class父组件可以向子组件传递style和class，它们会合并到子组件的根元素中示例父组件<template> <div id="app"> <HelloWorld style="color:red" c
2021-04-16 00:33:34
190
原创 插槽原理
父组件再用子组件的插槽式 想到于创建一个函数 函数里面的返回值是一个vnode 在子组件插槽内然后调用这个函数 将得到vode放到相应位置作用域插槽可以进行传参(参数可以解构) 普通插槽相当于不能传参而已左边就相当于创建一个右边那样的函数 然后子组件插槽 调用这个函数...
2021-04-15 13:26:13
323
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人