楚楚梦厦的博客

Mac配置多个不同git域名的ssh公钥。当存在同时需要git在GitHub、gitee、gitlab等多个不同git托管平台进行。之后复制并copy到GitHub或者gitlab的新建的ssh中。之后一直回车就可以，会默认在~/.ssh目录下生成。之后一直回车就可以，会在~/.ssh目录下生成。将url替换为ssh。

NGINX同时监听多个80端口匹配多个不同的域名，多个域名同时监听80端口结果被覆盖，NGINX代理多个vue项目

js手写发布订阅，js和vue中的发布订阅设计模式原理简单实现

背景浏览器在解析a标签的时候，默认会有鼠标右键显示“在新标签页中打开链接”的功能，但有的情景不适合用a标签直接进行路由跳转。比如我遇到这个问题的项目，a标签直接跳路由会有不知道什么原因的bug。所以只能用router.push来跳转。思路首先排除a标签直接href跳转，我的项目会有bug。但是最后必须要有a标签，因为这个是浏览器解析的最快最亲近的方法。所以用到了contextmenu事件，在不鼠标右键的时候，给定一个不能直接跳转的a标签，跳转采用vue-router的方式。在监听到contex

我理想中的react脚手架本地运行后的结果是这样的：但是在新的Windows笔记本用create-react-app创建react项目启动后是这样的：这种结果的我个人感觉的缺点就是：覆盖了项目localhost地址，每次想重新点一下需要找半天。如果项目有个warning或者error会导致日志出现一堆没用的error根本找不到真正的error的位置，而且报错后会大面积覆盖掉localhost地址。对于有强迫症的，当然不能容忍这个东西我的解决方法：起初我以为是create-react-a

1. 背景怎么在Windows中使用Linux命令？–> Git bash有的Windows环境不知道为什么就是无法正确安装nvm并正确通过nvm安装node，今天在公司的笔记本上安装create-react-app发现提示node版本太低，必须要升级到14以上才能用，于是在git bash中研究了一下。2.在git bash中安装nvm直接通过Linux命令安装curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.3

回流必将引起重绘，重绘不一定会引起回流。1. 浏览器流式布局模型浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。

概括：DNS解析发起TCP连接(3次握手)发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析渲染页面连接结束(4次挥手)。1. DNS解析解析： 输入www.baidu.com网址后，首先在本地的域名服务器中查找，没找到去根域名服务器查找，没有再去com顶级域名服务器查找，如此的类推下去，直到找到IP地址。DNS优化：DNS缓存： DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务

ES61. let和const2. 解构赋值3. 对象扩展4. 数组扩展5. 箭头函数6. Set7. Map1. let和const不存在变量提升。暂时性死区（temporal dead zone，简称 TDZ)：在代码块内使用const命令和let命令声明变量之前，该变量都不可用不允许重复声明let不允许在相同作用域内，重复声明同一个变量。const 命令1).const声明一个只读的常量。一旦声明，常量的值就不能改变2).对于const来说，只声明不赋值，就会报错。let命令声明变量

1. 常见的基本/引用数据类型基本数据类型： Number、String 、Boolean、Null和undefined。基本数据类型是按值访问的，可以直接操作保存在变量中的实际值。引用数据类型： Object基本上除了基本数据类型都是引用数据类型，如Array、Function、Date、RegExp、Error和自定义封装类等Object类型(根类)。2. 数据类型的判断typeof, instanceof, constructor, Object.prototype.toString.call

《JavaScript高级程序设计》这样描述：闭包是指有权访问另一个函数作用域中的变量的函数；通俗来说，本质就是上级作用域内变量的生命周期，因为被下级作用域内引用，而没有被释放。就导致上级作用域内的变量，等到下级作用域执行完以后才正常得到释放。常见的闭包问题如下：// 测试1console.log('测试1-----start-------------------------------')function testFun01() { var num = 6; return

1. 强缓存给浏览器缓存设置过期时间，超过这个时间之后缓存过期,浏览器需要重新请求。expires(老版本http1.0)给浏览器设置了一个绝对时间用GMT格式的字符串，当浏览器时间超过这个绝对时间之后，重新向服务器发送请求。如下：Expires: Wed Feb 20 2019 11:25:41 GMT弊端: Expires返回的是服务器的时间，但判断的时候用的却是客户端的时间，这就导致Expires很被动，因为用户有可能改变客户端的时间，导致缓存时间判断出错，这也是引入Cache-Contr

1. XSS是什么Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等XSS 常见的注入方法：在 HTML 中，恶意内容以 script 标签形成注入。在标签的 href、src 等属性中，包含 javascript: (伪协议)等可执行代码。onload、onerror、onclick 等事件中，注入不受控制代码

浏览器事件环模型中的宏任务（macrotask）和微任务（microtask）：针对异步任务宏任务：setTimeout、setInterval、 setImmediate微任务：promise.then()、process.nextTick(node的)、Object.observer。执行完主逻辑中的同步任务。取出微任务队列中的任务执行，直到队列被完全清空。取出宏任务队列中的一个任务执行。重复 1到3，直到宏任务队列被清空。示例： /*--------------------

前端动态控制移动端聊天室语音气泡长度 rem适配移动端语音气泡长度HTML5实现语音气泡

在触屏(移动端网页)中，聊天室类型的输入框很常见，但是很多都是自定义样式的，直接改造input标签会很麻烦。给div标签设置contenteditable属性可以达到input标签的效果还能轻松的自定义样式。利用input事件和v-text可以达到动态绑定“input”输入框的效果利用focus和blur方法可以控制“input”输入框的键盘展开收起<div contenteditable="true" ref="inputMsg" v-text="inputText" @input="i

scrollTop无效 前端聊天室自动滚动到页面底部 前端聊天室滚动到顶部加载更多 scroll事件

目录1.DOM2. ECMAScript62.1 let 和 const.2.2 数据类型的判断（typeof, instanceof, constructor, Object.prototype.toString.call()）2.3 箭头函数2.4 深拷贝和浅拷贝2.5 set和map数据结构2.6 Promise3.跨域3.1. javascript 的同源策略4. 闭包5. 原型链6.new1.DOMinnerHTML和innerText的区别？  innerText属性可以获取到元素内部的

在做基于vue的PC管理后台项目的时候遇到了有UI要求的需求，这时候当然不能把element照搬到项目中，这个项目历时1个月，几乎是天天10点到3点回家…仅次写下留念1.html结构el-menu标签在这里唯一的作用就是充当侧边栏外面的边界…并对其默认样式进行了修改<template> <el-menu :default-active="defaultActive" router :unique-open

iPhone小程序webview中获取不到sessionStorage/localStorage前端监听页面缓存

前端在苹果手机中new Date()返回NaN

判断移动设备是Android还是IOS且是不是微信浏览器 ul+li模拟select标签vue模拟select标签

最近做小程序需要实时获取input中的value值，觉得还是很重要的，再写一遍，以加深印象。对于该input标签<input bindinput='diseaseNameInput' value="{{diseaseName}}"></input>在js中可以：data: { diseaseName: ''} // 实时获取input的数据值diseas...

Vue项目线上部署 CentOS7服务器 阿里云 express代理

清除浮动 clearfix的添加位置

Vue点击图片查看大图 v-viewer 放大缩小拖拽

nvm for windows node版本管理工具 nrm镜像管理工具安装

Vue面试题整理1. v-if与v-show的区别以及使用场景2. 说说你对 SPA 单页面的理解，它的优缺点分别是什么？3. 详细阐述一下导航守卫4. 怎样理解 Vue 的单向数据流5. computed 和 watch 的区别和运用的场景？6.Vue 生命周期7. Vue 的父组件和子组件生命周期钩子函数执行顺序8. 父组件监听子组件的生命周期9. keep-alive10. 组件中 data...

目录第一章. HTML(5)第二章. CSS(3)第三章. JavaScript3.1 DOM3.2 ES6第四章. Node第五章. Vue第六章. 计算机网络第七章. 数据结构第一章. HTML(5)第二章. CSS(3)第三章. JavaScript3.1 DOMinnerHTML和innerText的区别？  innerText属性可以获取到元素内部的文本内容，不同的是它会自...

jwt token 权限校验 令牌