雪之樱的小站

序绝了，框架用多了原生基本都不记得了，今天刷到了这个题顺手写篇博客 正文事件流的阶段DOM事件流分为三个阶段：捕获阶段、处于目标阶段、冒泡阶段。DOM事件流会先调用捕获阶段的处理函数，然后调用目标阶段的处理函数，最后调用冒泡阶段的处理函数。 在这里，1-3是捕获阶段，4-5是处于目标阶段，6-8是冒泡阶段 绑定事件的方法HTML内联绑定1<div id="box1" onclick="console.log('box1 内联绑定')"></div> DOM属性绑定1234let box1 = document.querySelector("#box1");box1.onclick = function () { console.log('box1 DOM属性绑定');} 通过addEventListener绑定为什么不看看万能的MDN呢 不过方便懒得跳转的同学，我贴心的截了张图(其实主要是这个函数太常用了感觉没必要说明用法) ti ...

序用惯了vue用react的生命周期总有一丝怪异啊，不过这并不妨碍我记点笔记 生命周期仅存在于类组件中，函数组件每次调用都是重新运行函数，旧的组件会被立刻销毁 旧版生命周期总览旧版生命周期对应React的版本小于16.3 constructor(props, context, updater)React借用class类的constructor充当初始化钩子。 React规定constructor有三个参数，分别是props、context和updater。 props是属性，它是不可变的。 context是上下文 updater是包含一些更新方法的对象，this.setState最终调用的是this.updater.enqueueSetState方法，this.forceUpdate最终调用的是this.updater.enqueueForceUpdate方法，所以这些API更多是React内部使用，暴露出来是以备开发者不时之需。 在React中，constructor需要先调用super(props)，用于初始化this和props，详情可以看这里 constructor生命周期 ...

水平居中行内元素-使用text-aligin123.parent { text-align: center;} 块级元素-使用margin子元素没有设置float123.son { margin: 0 auto;} 子元素设置了float123456789.parent{ width: fit-content; margin: 0 auto;}.son { float: left;} 块级元素-使用定位12345.son { position: absolute; left: 50%; transform: translate(-50%, 0);} 块级元素-使用grid1234.parent { display: grid; justify-content: center;} 垂直居中行内元素-line-height1234567.parent { height: 高度x; ...

HTMLCSS前端常见的数值单位 px：绝对单位，页面按精确像素展示。 em：相对单位，按自身的font-size计算 rem：相对单位，相对根节点的字体大小来计算 vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。 vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。 vmin：vw和vh中较小的那个。 vmax：vw和vh中较大的那个。 %:百分比 display: none, visibility: hidden, opacity: 0的区别 在DOM树中的处理 是否占据空间 是否可以点击 性能 对后代的影响 display: none 从树中移除 不占空间 不能 触发回流 全部不能显示 visibility: hidden 不从树中移除 占据空间 不能 触发重绘 可以设置visibility为visible来显示 opacity: 0 不从树中移除 占据空间 可以 触发GPU硬件加速 全部不能显示 回流和重绘 css居中总结https://www.sakura-snow.com/archives/615 ...

序这是一个非常基础的redux教程，在我学redux时，发现无论是官方文档还是其他的博客，均会先讲一堆redux的设计思想，然后抛出一堆新概念看着脑壳疼，所以我打算写一篇非常基础的教程，没有花里花哨的，只是讲讲最简单的使用，至于思想啥的，掘金一搜一大把啦。所以这篇文章只是追求用最简单的例子来介绍API，不会讲的太深，就酱。 reduxredux和react没有太大的关系，它只是一个单独的库，你可以随便在哪个地方使用它，它的主要用途我觉得有两点 便于多组件跨级间共享数据 便于提供规范统一的数据源管理 先用一张图介绍redux中的几个重要角色 store：顾名思义，是用来保存数据的 action：redux不允许直接操作数据，修改仓库的数据需要派发一个action，这个action用于标识怎么修改数据 reducer：reducer用于根据action的类型来对数据进行具体的处理 我们来看一个简单的例子 1234567891011121314151617181920212223242526272829303132333435363738import {createSto ...

序一般来说，在使用http协议进行数据交换时，数据都是明文传输的，这就给数据的安全性带来了很大隐患，中间很容易被截获，中间人很容易查看到里面的内容和篡改内容，所以，https出现了，它会对传输的内容进行加密，让数据传输变得更安全，减少遭受中间人攻击的可能。 人物介绍 王尼玛：单身汪，打算今天和他的女神王尼美表白（客户端）王尼美：王尼玛喜欢的人（服务器）隔壁老王：喜欢搞事的人（中间人） 不用加密的后果王尼玛给尼美发了条我爱你的信息，但被隔壁老王截获了，老王心生一计，于是把信息替换成了我恨你，尼美看到后非常生气，于是把尼玛拉黑了 这个故事告诉我们数据传输一定要好好加密，确保两人之间的交流只有自己和对方能看懂，同时别人也不能乱改，那么怎么加密呢 https如何加密对称加密对称加密：产生一个密钥，可以用其加密内容，也可以用它来解密内容 在这种加密方式中，王尼玛会先向王尼美询问密匙，然后王尼美告知密匙，之后的内容都会使用这个密匙加密 但这种方式并不靠谱，因为中间人一样可以拿到密钥，依然可以进行加密和解密，也依然可以篡改内容 因为老王保存了秘钥，所以成功的替换了内容 所以这种加密方式并不 ...

一个悲伤的故事，前几天我下了一个ts执行插件，然后，我的webstorm就把我项目里的所有vue和ts文件全部编译了一遍，生成.js和.map文件 我试了重开软件重启电脑重装系统，发现均没有什么效果 最后我发现了是这个配置的问题，关掉就好了 所以为什么这东西开了会编译.vue的的 令人迷惑

序最近整了个移动端的项目，用的还是Vue，多少在适配上也踩了点坑，所以，就分享一下适配的操作 使用rem.ts新建rem.ts 12345678910111213141516// 基准大小const baseSize = 32;const designDraft = 750;// 设置 rem 函数function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / designDraft; // 设置页面根节点字体大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'}// 初始化setRem();// 改变窗口大小时重新设置 remwindow.onresize = function () { setRem()}; 在main.ts中引 ...

序还记得我刚开始和后端同学合作开发时，每次解决跨域问题都是一段痛苦的经历，经常有这样的对话 我：在，CORS开了吗对方：没呢，这就开…几个小时后我：开了吗？对方：开了开了我：为什么我这里不行的？…几个小时后对方：你再试试我：还是不行？？….我：好了好了大佬nb 当时的我不过后来这样的事情也渐渐莫得了，应该是后端同学终于成为了后端大佬吧 再后来，我学了nodejs，发现这玩意还有点复杂，所以整篇博客记录一下，不然万一明年师妹来问我CORS我不会那多尴尬（假装有师妹） CORS为什么要有CORS要知道为什么要有CORS，我们需要了解什么是同源策略。所谓的同源策略是一种安全机制，为了预防某些恶意行为（例如 Cookie 窃取等），浏览器限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。而满足同源要具备三方面：协议相同、域名相同、端口相同。 如果对http://domain.com:80/dir/index.html 来进行同源判断 http://domain.com/dir2/info.html（同源） https://domain.com/dir/index.html（非 ...

序前端安全应该是老生常谈的话题了，毕竟世界上没有绝对安全的系统，我们工程师能做的只是让入侵变得更难，这篇文章会介绍前端工程师需要注意的两种攻击，XSS和CSRF攻击。 XSSXSS是Cross-site scripting的缩写，即跨站脚本攻击，在XSS攻击中，攻击者把恶意代码注入到网站中，普通用户在打开网站时，被注入的恶意代码便会执行。需要注意的是，攻击者并不能直接攻击受害者的的电脑，而是利用受害者访问的网站上的漏洞，通过注入等方式让恶意JS代码在受害者的电脑上运行。 如果你的网站被XSS攻击成功了，那么攻击者可能会做什么事呢？ 窃取用户敏感信息，如cookie，身份令牌等被盗取 记录键盘信息，通过在密码框上绑定input事件来监听用户输入，然后把密码发送到攻击者的服务器 生成虚假表单，诱导用户输入敏感信息 XSS攻击的分类持久型XSS(Persistent XSS)存储型XSS应该是最常见的XSS攻击了，存储型xss一出现在网站留言板，评论处，个人资料处，等需要用户可以对网站写入数据的地方。比如一个论坛评论处由于对用户输入过滤不严格，导致攻击者在写入一段窃取cookie的恶意J ...