- 博客(109)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 pm2的优势
1.保持程序的一直运行2.系统崩溃时可以自动重启3.维护升级时不需要重载4.日志记录功能5.使用多进程，充分利用CPU多核、机器的全部内存、一个进程的内存具有限制 多进程之间需要进行资源·共享，需要所有进程去访问同一个redis进程的通讯机制：共享内存、消息传递、管道机制...
2021-10-29 10:16:26
388
原创 jwt使用
登录验证1.在输入框中输入账号和密码，利用axios发送到后端的某一个接口(/token)2.后端接受账号和密码之后，遍历数据库中的对象，判断用户名和密码是否存在且正确，不正确的话返回错误信息3.定义token生成方法，参数是user.id，权限数字4.下载jsonwebtoken库，利用库中的sign方法生成token，sign接受几个参数，第一个对象是用户基本信息对象，第二个对象是密钥，第三个对象是过期时间5.当用户名和密码验证通过时，将生成的token返回给客户端6.浏览器读取
2021-09-06 20:53:07
183
原创 微信小程序和H5的区别
1.运行环境H5运行在浏览器上，微信小程序运行在一个基于浏览器内核完全重构的内置浏览器2. 兼容性H5兼容性很多，微信小程序基本没有3.读取系统权限微信小程序读取系统权限，H5一般不会4.运行流畅度小程序的流畅性会高于H5网页需要在浏览器渲染微信小程序是直接运行在微信上，没有渲染过程，初期会卡顿，切换的过程中与普通程序类型...
2021-07-28 12:14:49
483
原创 微信授权登录过程
1.网站需要在微信后台通过审核获得AppID、AppSecret等参数2.当用户选择二维码登录时，网站后台根据OAuth2.0协议，携带AppID、AppSecret参数，向微信后台发送请求3.微信后台收到请求后，返回二维码4.网站后台将二维码发送至网站前端5.用户使用微信扫码时，微信客户端会向微信后台发送请求6.微信后台向网站后台发送授权临时票据code7.网站后台在授权临时票据加上AppID、AppSecret参数，发送给微信后台8.微信后台返回access_token数值
2021-07-26 10:36:07
27991
转载 js正则表达式
声明方式字面量形式new形式常用方法1.test：匹配到返回true，没有匹配到返回falsepattern.test(string)2.exec：返回匹配项及其索引pattern.exec(string)3.replace：替换字符string.replace(pattern,'a')4.match：将所有匹配项以数组形式返回string.match(pattern)修饰符g：全局匹配i：忽略大小写m：多行匹配字符组\d：
2021-07-25 18:07:58
122
原创 二叉树的基本概念
二叉树：每个节点有最多两个子节点满二叉树：除最后一层外，每个节点都有两个子节点完全二叉树： 除最后一层外，其他层节点数目都为该层最大值， 最后一层的节点集中在左侧 平衡二叉树（AVL二叉树）：每个节点左右两颗子树的高度相差不超过1二叉查找树：任意节点的左节点小于根节点，右节点大于根节点查找次数等于二叉查找树的高度二叉查找树会出现瘸腿的情况，影响查找性能红黑树：自平衡的二叉查找树1.节点为黑色或者红色2.根节点为黑色，...
2021-07-25 13:41:06
171
原创 前端路由和后端路由
后端路由每次跳转到不同的url，都需要重新访问服务器，此时的渲染可以是前端渲染也可以是后端渲染前端渲染每跳转到不同的url，使用的是前端的hash值进行导向服务器不会解析#后面的内容但是可以监听window.location.hash获取到实际是对onHashChange进行监听利用JS进行DOM的替换在切换的过程中只需要关注接口数据的改变就行页面的跳转不需要涉及js和css等文件的重新请求...
2021-07-23 18:40:54
96
原创 前端渲染和后端渲染
后端渲染浏览器接受从服务端的数据即为完整的HTML字符串，浏览器直接解析和页面渲染前端渲染浏览器接受从服务端的数据可以是JSON数据、合法的html字符串等，再将这些信息组成完成的HTML字符串，再进行解析和页面渲染比较1.性能问题后端渲染将所有用户HTML页面的生成工作集中在服务器上，前端渲染是在各个用户终端上进行渲染2.开发难度后端渲染开发难度较大，后端开发人员开发工作量较大...
2021-07-23 18:27:57
222
原创 单页面应用和多页面应用
多页面应用每个页面单独开发，每次页面跳转时，需要向服务器发送请求，返回一个新的HTML文档，进行全部页面的刷新单页面应用由一个页面主框架和多个页面片段组成 ，每次页面跳转时，通过JS进行局部代码段的替换，完成页面的局部刷新单页面应用的优点：1.页面跳转迅速，不需要重新发送Http请求2.便捷实现转场动画3.页面主框架代码可以复用4.数据传输实现容易（多页面必须使用url,cookie,localstorage等进行数据传参）单页面应用的缺点：1.首次请求时时间较长
2021-07-23 16:58:11
597
原创 gulp和webpack的区别
1.gulp是一个构建工具，主要完成代码压缩、编译转化、自动刷新等工作webpack最开始作为项目的打包工具，随着plugin和loader功能的完善，webpack已经可以实现绝大多数项目构建功能2.gulp适用于多页面应用开发，对于目前的模块化开发适用性较差webpack适用于单页面应用开发3.gulp易于学习，易于使用，webpack学习比较复杂，学习较为困难...
2021-07-23 14:15:31
1224
原创 HTTP结构问题
请求报文请求行 请求头 空行 请求体请求行：请求方式 URL HTTP协议和版本号请求头：包含很多属性Accept：客户端接受响应的数据类型Referer：请求发送的URLCookie：进行Cookie数据的传输Cache-Control：响应内容是否缓存和缓存类型Host：请求服务器的域名和端口请求体：请求数据param1=value1¶m2=value2响应报文响应行 响应头 空行 响应体响应行 ：HTTP协议和版本号 状...
2021-07-23 13:37:46
83
原创 虚拟内存的含义
在执行程序时，可以将程序的一部分放在内存中，其余部分放在外存中当访问的内容不存在时，操作系统将所需的部分从外存中调入内存操作系统还会将不需要的部分移除到外存中给用户提供了比实际更大的内存，所以称为虚拟内存...
2021-07-23 12:51:14
151
原创 中断和异常
概念中断指的是CPU暂停正在执行的程序，转为执行中断处理程序，执行完毕后返回原程序断点继续执行一般把广义的中断分为外中断（中断）和内中断（异常）区别1.中断是由于外部事件导致的，异常是CPU内部正在执行的指令导致的2.中断可以被屏蔽，异常无法屏蔽且必须立刻执行共性系统针对某些特殊情况作出的应对策略...
2021-07-23 12:33:19
316
原创 死锁的原因及解决办法
概念多个进程在运行过程中由于争夺资源造成的一种僵局，没有外力的作用，进程将无法继续进行资源分类可剥夺资源：一个资源被一个进程持有时，可以被其他进程剥夺，CPU、主存等不可剥夺资源：一个资源被一个进程持有时不能强行回收，只能等待进程执行完毕后释放，打印机等永久资源：可重复使用型资源临时资源：消耗型资源产生死锁原因1.竞争不可剥夺资源\临时资源（硬件中断、信号、消息、缓冲区内的消息等）进程P1使用了打印机，进程P2也请求打印机，进程P2使用了磁带机，进程P1也请求磁带机.
2021-07-23 11:57:15
172
原创 操作系统分类
1.运行设备分类PC操作系统:windows\MacOS\linux服务器操作系统:windows server\linux移动设备操作系统:安卓\IOS2.使用环境和功能特征1.批处理操作系统用户提交任务给操作员,操作员积攒任务达到一定数目的时候,进入计算机进行运行2.分时操作系统用户通过自己的终端连接至主机操作系统将CPU的时间分为时间片,以时间片为单位轮流为各个终端服务3.实时操作系统在一定的时间范围内对请求做出响应4.嵌入式操作系统运行在嵌入式
2021-07-22 18:06:52
202
原创 操作系统的基本概念
1.结构层次用户—应用程序—操作系统—硬件2.功能操作系统是一种系统软件用于控制和管理整个计算机系统硬件和软件资源主要完成计算机的资源分配和任务调度等工作为应用程序和用户提供便捷的接口和环境3.资源管理1.CPU管理2.存储器管理3.文件管理4.设备管理4.QQ视频通话过程1.在文件夹中找到QQ.exe2.将程序放入内存中3.CPU执行4.分配摄像头设备5.用户和计算机之间的接口1.用户直接使用的命令接口2.用户间接使用的程序接口.
2021-07-22 17:41:33
114
原创 set、map、weakset、weakmap的区别
1.setset表示集合，可以存储原始值和对象引用，存储的数据必须是唯一值size()add()delete()has()clear()2.mapmap表示字典，用键值对的形式存放数据，键和值可以是原始值和对象引用size()set(key,value)get(key)has(key)delet(key)clear()3.weaksetweakset是弱集合，存储的数据只能是对象，对对象的引用是弱引用在没有其他引用和该键引用同一对象，这个对象将会被垃圾.
2021-07-22 16:10:33
1301
原创 数组降维方法
递归算法function method(arr) { let res = []; let toArr = function(arr) { for (let i = 0; i < arr.length; i++) { if (arr[i] instanceof Array) { toArr(arr[i]) } else { res.push(arr[i]
2021-07-21 17:25:32
165
原创 响应式布局
em：根据其父元素font-size进行计算rem：根据根元素（html)的font-size进行计算vm：根据可视化区域宽度和高度最小的计算，1vm=1%width||1%heightvw：根据可视化区域宽度计算，1vm=1%widthvh：根据可视化区域高度计算，1vm=1%height...
2021-07-21 16:56:00
80
原创 webpack构建流程
校验配置文件 ：读取命令行传入或者webpack.config.js文件，初始化本次构建的配置参数 生成Compiler对象：为webpack事件流挂上自定义hooks webpack开始读取配置的Entries，递归遍历所有的入口文件 run/watch：如果运行在watch模式则执行watch方法，否则执行run方法 compilation：创建Compilation对象回调compilation相关钩子，依次进入每一个入口文件(entry)，使用loader..
2021-07-19 18:27:06
125
原创 webpack的钩子函数
class Compiler extends Tapable { constructor(context) { super(); this.hooks = { /** @type {SyncBailHook<Compilation>} */ shouldEmit: new SyncBailHook(["compilation"]), /** @type {AsyncSeriesHook<Stats>} */ done: new AsyncSerie.
2021-07-19 18:22:27
1530
原创 手写loader
// txt-loader.js var utils = require('loader-utils')module.exports = function(source) { var options = loaderUtils.getOptions(this) || {}; // 删除console语句 if(options.deleteConsole) { source = source.replace(/console\.(log|dir|info)..
2021-07-19 17:36:04
86
原创 vue-router中的导航钩子
1.全局导航钩子前置钩子函数：router.beforeEach((to,from,next){})后置钩子函数：router.afterEach((to,from)=>{})全局解析守卫：router.beforeResolve()2.单个路由导航钩子实际上是在路由规则上配置的beforeEnter3.组件导航钩子beforeRouteEnter渲染该路由对应组件前调用beforeRouteUpdate路由改变，但依然渲染该组件时调用beforeRouteL.
2021-07-19 16:33:54
1100
转载 keep-alive的使用
概念keep-alive是vue中的内置组件，当它包裹动态组件，会缓存不活动的组件功能1.防止重复渲染2.减少加载时间3.减少性能消耗原理1.创建时，将需要缓存的vnode节点保存在this.cache中2.渲染时，如果符合缓存规则，就从this.cache中将vnode节点取出进行渲染生命周期函数1.activated2.deactivated简单使用在占位符外面包裹keep-alive<template> <div id=.
2021-07-19 15:11:09
175
原创 浏览器兼容性问题
HTML+CSS1.各浏览器标签的margin和padding的默认数值不同利用css对标签默认值进行统一2.块级元素float布局和margin一同使用时，margin的值比实际大一点（IE6）在float的标签样式控制中加入 display:inline;3.行内元素display:block，再使用float和margin，margin的值比实际大一点（IE6）在float的标签样式控制中加入 display:inline;4.透明度不兼容添加兼容性语句，每个浏览器单.
2021-07-19 13:39:58
315
1
原创 JS常见的设计模式
1.单例模式无论调用多少次只会产生一个实例let obj=(function(){ return { fn1(){}, fn2(){}})()2.构造器模式可以产生多个实例对象并且可以共有一些方法class Fn(){ constructor(name){ this.name=name;}getName(){}}3.工厂模式根据条件不同产生不同的结果function factory(){ .
2021-07-19 13:07:13
187
原创 类型转换方法
转化成布尔值1.利用Boolean()方法2.两个！！3.使用==时隐式转换方法转化为数值型1.Number()2.parseInt()3.parseFloat()转化为字符串类型1.toString()2.string()3.+" "4.join()
2021-07-19 00:05:21
97
原创 手写vue双向绑定原理
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g.
2021-07-18 23:55:47
96
原创 发布订阅者模式简单实现
let sub1 = { update: function() { console.log(1); }};let sub2 = { update: function() { console.log(2); }};let sub3 = { update: function() { console.log(3); }};function Dep() { this.subs = [sub1, s.
2021-07-18 23:46:58
123
原创 Object.defineProperty()简单使用
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g.
2021-07-18 23:35:03
69
原创 vuex的使用
1.先导入vue，再导入vuex2.创建vuex对象const store=new Vuex.Store({...})3.在父组件中添加store:store，父组件和其所有的子组件都可以使用statestate用于保存共享数据注意：使用时采用this.$store.state.DateName调用<div>{{this.$store.state.msg}}</div>const store=new Vuex.Store({ st
2021-07-18 18:08:50
158
1
原创 loader和plugin
loader：加载器，webpack只能打包js，json文件，而对于css、图片等无法打包，loader的主要作用就是进行文件转化，仅仅是为了打包服务，主要运行在文件打包之前。plugin:插件，对webpack功能的拓展，针对打包过程中的某些事件节点执行自定义操作，不仅仅是为了打包服务，运行在文件的整个编译周期中。常用的loader:babel-loader babel-corestyle-loader css-loaderfile-loader url-loaderless..
2021-07-17 16:00:51
377
原创 webpack基本概念
简介webpack是一个打包工具，它会从一个入口文件开始递归分析所有模块的依赖关系，根据依赖关系将模块打包成一个或多个文件主要功能1.依赖管理2.代码合并压缩3.语法转换4.性能优化入口entry:webpack进行依赖关系构建和打包的入口文件 ，入口文件可以是一个或者多个一般是src/main.js// Webpack .config.jsmodule.exports = { entry: { pageOne: './src/pageOne/app.
2021-07-17 15:24:50
149
原创 前端工程化
传统开发过程中会出现依赖关系复杂、命名冲突、项目结构复杂等问题，不利于开发和维护。因此提出了前端工程化，便于团队合作，提升开发效率主要包括模块化、组件化、规范化等特点1.模块化将一个大的文件拆分成多个相互依赖的小文件，每个文件都是一个单独的模块，只对外暴露相应的接口，降低模块之间的耦合性（这里一般指的是JS文件和CSS文件）2.组件化将页面上每个独立可视可交互的区域视为一个组件，每个组件独立开发，各组件之间不会相互影响，可以对单个组件进行替换修改等工作3.规范化主要包括项
2021-07-17 14:17:26
63
原创 vue-cli是什么
概述vue-cli是vue.js的脚手架，用于生成vue.js+webpack的项目模板vue-cli生成项目的三种方式1. 交互式命名行,3.x以上vuecreatemy-project2. 图形化界面,3.x以上vueui3. 旧模板，2.xvueinitwebpackmy-project...
2021-07-17 13:21:15
288
原创 this指向问题
1.全局作用域中的this指向的是window2.非严格模式下，函数中的this指向函数调用者3.严格模式下，函数中的this指向undefined4.构造函数中的this指向实例对象5.箭头函数的this指向函数定义时的对象6.DOM事件处理函数中this一般指向DOM元素本身（IE级除外）7.匿名函数的this一般指向window8.定时器中函数的this指向window9.利用call\apply\bind等能够改变this的指向...
2021-07-16 23:03:50
65
原创 变量提升与匿名函数
a存在变量提升，所以a等于undefinedvar a = 1;let b = 4;(function() { console.log(a);//undefined var a = 3; let b = 4; console.log(a, b);//3,4})()var a = 1;let b = 4;function try1() { var a = 3; console.log(a);//undefined let b =.
2021-07-16 22:30:43
475
1
原创 $nextTick是什么
概述$nextTick 是一个用于在DOM更新完成后执行回调函数的方法vue的数据更新是一种延迟异步更新在vue中修改数据后，页面不会立刻更新，而是开启一个队列，并且缓存同一轮事件循环中的所有数据改变。在缓冲时会除去重复的操作,等到下一轮事件循环时，才开始更新。此时通过DOM操作获取的数据仍然是未更新的数据$nextTick能够监听的DOM更新完成异步更新队列Vue在观察到数据变化时，并不是直接更新DOM，而是开启一个队列，并且缓存同一轮事件循环中的所有数据改变。在缓冲时会除去.
2021-07-16 17:39:53
2808
原创 vue项目的优化
1.生成打包报告2.第三方库启用CDN3.Element-UI组件按需加载4.路由懒加载5.首页内容定制1.页面顶部的进度条效果使用nprogress包，在github上找到安装方法进行包的安装（npm install --save），或者在vue可视化界面上选择安装依赖，安装运行依赖调用...
2021-07-16 16:43:15
87
原创 vue2.x和vue3.x的区别
1.懒观察在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。2.精准变更通知2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有哪一个属性的 watcher 才会重新运行。3.diff算法优化为虚拟DOM增加静态标志4.生命周期钩子函数5
2021-07-13 22:39:47
4871
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人