npm引入依赖包时版本符号的探究记录
关于NPM引入依赖包时，版本管理（例如 ^、~ ）等符号的探究记录
符号
描述
示例
描述
>
大于某个版本
> 7.8.1
大于7.8.1版本
>=
大于等于某个版本
>= 7.8.1
大于等于7.8.1版本
<
小于某个版本
<7.8.1
小于7.8.1版本
~
补丁会更新
~7.8.1
大版本号是7，小版本号是8，补丁版本号大于等于1
^
次版本和补丁版本可增（常用）
> 7.8.1
大版本号是7，小版本号可以大于等于8，补丁版本号可以大于等于1
*
最新版本
*
永远都用最新版
node npm 等环境已经正常这里测试用语言国际化 vue-i18n 来测试
探究过程1、先来试试 ^ 符号1.1.安装执行命令 指定安装 `^7.0.0123npm install vue-i18n@7.0.0+ vue-i18n@7.0.0added 1 package from 1 contributor in 4.347s
1.2.查看一下 package.json，现在是7.0.01 ...
React是如何防xss的
本文会先回顾xss攻击的概念和类型，再介绍react中做了哪些事情来实现xss安全性防御。
XSS 攻击Cross-Site Scripting （跨站脚步攻击）简称XSS, 是一种代码注入攻击。XSS攻击通常指利用网页漏洞，攻击者通过技巧注入xss代码到网页，因为浏览器无法分辨哪些是可信的，导致XSS脚步被执行。XSS脚本通常能够窃取用户数据并发送到攻击者的网站，或者冒充用户，调用目标接口并执行攻击者指定操作。
XSS攻击类型反射型
XSS脚本来自当前HTTP请求
当服务器在HTTP请求中接收数据并将该数据拼接在HTML中返回时
123456789// 某网站具有搜索功能，该功能通过URL参数接收用户提供的搜索词// https://xxx.com/search?query=123// 服务器在此URL的响应中回显提供的搜索词:<p>您的搜索是：123 </p>// 如果服务器不对数据进行转义等处理，则攻击者可以构造如下链接进行攻击// https://xxx.com/search?query=<img src="empty.png&qu ...
React如何实现插槽
新入职的实习单位有React的项目，后面可能要写。在初学react的过程中觉得对比vue学习会上手得更快。今天突然想到的问题是React如何实现类似Vue的插槽效果。下面是个人总结。
一、插槽的概念插槽是一种让组件变得更加灵活和可复用的技术。它允许我们在组件内部预留一些位置，然后在组件使用时填充这些位置，实现外部内容的嵌套。
二、实现React插槽的方法在React中，实现插槽可以通过两种方式：props传递和children属性。
1.通过props传递：这是一种最简单的插槽实现方式，父组件通过props将内容传递给子组件。
123456789101112131415import React from 'react';function Card(props) { return ( <div className="card"> {props.header} </div> );}function App() { return ( < ...
长短轮询和长短连接的区别
轮询与长轮询最开始的“实时”并非真正的实时，而是由客户端每隔一段时间询问一下服务端是否有新数据产生，而客户端的轮询间隔决定了数据有多实时。
轮询的过程如下：
客户端发起请求
服务端马上响应，不论有无新数据。
等待 n 秒（即一个轮询间隔）后，客户端再次发起请求。
服务端依旧马上响应。
如此往复。
可以看到如果数据更新出现在两次轮询之间（一般来说，轮询间隔都是以秒为单位，所以数据几乎都会出现在两次轮询之间），那么最新的数据会经历一定的延迟才能送达。
于是，聪明的开发者就发明了一个长轮询方案。
长轮询的过程如下：
客户端发起请求。
服务端不马上响应，而是等待到数据更新到达后才响应客户端。（当然，一定的等待时间后还是没有数据更新的话也是会响应的。）
客户端处理响应后，马上发起下一个长轮询请求。
如此往复。
与轮询相比，长轮询的优势就在于，数据更新几乎没有延迟就能送达到客户端。同时也减少了客户端与服务端建立连接的次数，降低了连接建立的开销。
短连接与长连接轮询与长轮询常常也会跟短连接长连接比较。总的来说，短链接就是每次请求都会建立一个新的 TCP 连接用于通信；而长连接则是多次请求 ...
css选择器权重
选择器的种类
!important
内联样式
ID选择器
class选择器
元素选择器
通配符选择器
权值和权级的概念我们可以通过给选择器添加权值和权级这两个概念的方式来更好的理解选择器的权重（注意:“权值”和“权级”的概念是为了更好的理解权重而提出的，并不是真是存在的)
选择器的权重有了权值和权级的概念以后，我们就可以参考表格来对元素的权重进行理解。选择器的权重可以相加，例：
span的权值为 = id选择器100+类选择器10+元素选择器1 = 111
权值相同时由于HTML代码的执行特点时从上往下执行，因此在权值相同的情况下，后面的选择器会覆盖前面的选择器相同的属性例：
两个类选择器同时选中div元素，且color属性发生冲突，此时生效的是后面的class2，因此元素的前景色为蓝色
权值不同时两种选择器覆盖了同一属性，此时权重高的选择器生效。
例：
当前形况下，元素选择器的权值为1，大于通配选择器的权值0，因此对div生效的样式应该是元素选择器里的样式。
权值跃迁权值跃迁讨论的问题是，当有11个元素选择器和1个类选择器同时选中同一元素时，哪个选择器的 ...
翻转二叉树
力扣-226.翻转二叉树给你一棵二叉树的根节点 root ，翻转这棵二叉树，并返回其根节点。
示例 1：
12输入：root = [4,2,7,1,3,6,9]输出：[4,7,2,9,6,3,1]
示例 2：
12输入：root = [2,1,3]输出：[2,3,1]
示例 3：
12输入：root = []输出：[]
提示：
树中节点数目范围在 [0, 100] 内
-100 <= Node.val <= 100
解题思路可以在遍历二叉树的过程中，对每个根节点，交换它的左右子树。但是需注意中序遍历无法实现，遍历过程中一直在处理左子树，右子树没有处理到。时间复杂度O(n),空间复杂度O(h)
代码实现12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667// 1.递归法只能使用前序或后序，中序会导致一直处理左子树，右子树没处理到var invertTree = fu ...
单点登录实现方式
实现单点登录的关键在于，如何让 Session ID（或 Token）在多个域中共享。
实现方式一：父域 Cookie在将具体实现之前，我们先来聊一聊 Cookie 的作用域。
Cookie 的作用域由 domain 属性和 path 属性共同决定。
domain 属性的有效值为当前域或其父域的域名/IP地址，在 Tomcat 中，domain 属性默认为当前域的域名/IP地址。path 属性的有效值是以“/”开头的路径，在 Tomcat 中，path 属性默认为当前 Web 应用的上下文路径。
如果将 Cookie 的 domain 属性设置为当前域的父域，那么就认为它是父域 Cookie。Cookie 有一个特点，即父域中的 Cookie 被子域所共享，换言之，子域会自动继承父域中的Cookie。
利用 Cookie 的这个特点，不难想到，将 Session ID（或 Token）保存到父域中不就行了。没错，我们只需要将 Cookie 的 domain 属性设置为父域的域名（主域名），同时将 Cookie 的 path 属性设置为根路径，这样所有的子域 ...
vue中set方法实现原理
vue2响应式原理中，Object.defineProperty()这个方法对对象的属性方法的添加或者删除不能做到实时的监听，数组通过索引去修改数组都是不能被检测？所以vue实现了set方法，那么实现的set方法的原理是什么呢？
1vm.$set( target, propertyName/index, value )
参数：{Object | Array} target{string | number} propertyName/index{any} value
用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性。
注意：对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
源码： src/core/observer/index.js
12345678910111213141516171819202122232425262728293031export function set (target, key, val){ ...
观察者模式和发布订阅模式
一.Vue响应式原理
首先要了解几个概念：
数据响应式：数据模型仅仅是普通的Javascript对象，而我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率。
双向绑定：数据改变，视图改变，数据也随之改变，我们可以使用v-model在表单上创建双向数据绑定。
数据驱动是Vue最独特的特性之一：开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图。
vue2.X中的响应式原理是基于defineProperty，兼容IE8以上版本，核心原理代码如下：
1234567891011121314151617181920212223242526272829 let data={ msg:'hello', count:10 }let vm={}proxyData(data)function proxyData(data){ Object.keys(data).forEach(key=>{ Object.defineProperty(vm,key,{ ...
内存泄露和垃圾回收机制
一、什么是内存泄漏程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。
对于持续运行的服务进程，必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。
垃圾：内存空间无法触达
不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。
二、常见的内存泄漏写得不好的JavaScript可能出现难以察觉且有害的内存泄漏问题。
在内存有限的设备上，或者在函数会被调用很多次的情况下，内存泄漏可能是个大问题。JavaScript中的内存泄漏大部分是由不合理的引用导致的。
下面来讲一讲常见的内存泄漏：
1. 意外声明的全局变量意外声明全局变量是最常见但也最容易修复的内存泄漏问题。下面的代码没有使用任何关键字声明变量：
123function setName() { name = 'yuanyuan';}
此时，解释器会把变量 name 当作 window 的属性来创建（相当于 window.name = 'yuanyuan' ）。可想而知，在 windo ...