随风的博客

原创 vue3 watch监听 第一个参数是引用类型时，为什么要使用函数

因此监听对象里的一个属性可能不符合以上4种情况，比如你题目中的state.count是一个数值。watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。第一个参数：侦听源，侦听源可以是一下几种。一个响应式对象（reactive）或是由以上类型的值组成的数组。一个函数，返回一个值。

原创 vue-函数式组件

只需要将外部传入的数据进行展现，不需要有内部状态，不需要在生命周期钩子函数里面做处理，这时候你就可以考虑使用函数式组件。优点就是灵活，轻量，渲染开销低，因为函数式组件只是函数。

原创 express+vue实现前后端联合

项目GitHub地址：https://github.com/To0night/express-vue。前端使用vite搭建vue项目。后端使用express开发接口。

原创 设计模式及实例

1、虽然两种模式都存在订阅者和发布者（具体观察者可认为是订阅者、具体目标可认为是发布者），但是观察者模式是由具体目标调度的，而发布/订阅模式是统一由调度中心调度的，所以观察者模式的订阅者与发布者之间是存在依赖的，而发布/订阅模式则不会。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。装饰者模式：在不改变对象自身的基础上，在程序运行期间给对象动态地添加方法，通常运用在原有方法维持不变，在原有方法上再挂载其他方法来满足现有需求。

原创 xss和csrf攻击

xss是指向html或dom中注入恶意脚本，从而在用户浏览页面的时候利用脚本对用户实施攻击的手段。csrf指引诱用户进入恶意网站，利用用户在其他网站的登录状态发起跨站请求，窃取用户信息。

原创 react学习（持续更新中。。。）

react的特点：

原创 js 闭包

闭包其实是一个函数嵌套另一个函数，并且内部函数可以访问到外部函数的变量或属性，由于函数形成了作用域在函数外部无法访问到函数内部属性，使得闭包可以用来封装变量，缓存数据，但是闭包导致函数内的变量无法被垃圾回收机制回收，导致内存泄漏的问题。

原创 偏函数、高阶函数、函数柯里化

*函数柯里化：**把接收多个参数的函数转换成接受单一参数的函数，并返回接收剩余参数返回结果的新函数。**高阶函数：*接收一个以上函数作为输入或者输出一个函数。**偏函数：**固定一些参数，使其产生更少的参数的函数。

原创 前端性能优化方案

1、加载优化雪碧图懒加载cdn分发网络合并请求，删除不必要的请求，减少请求数量异步加载第三方资源首屏加载，预加载服务器渲染ssr2、 缓存优化合理的使用浏览器缓存，强缓存，协商缓存，sessionStorage，localStorage3、代码执行优化style标签放在head中，优先加载样式资源，防止闪屏script标签放在body底部，并异步执行，防止阻塞页面加载4、减少重绘回流dom操作可以通过使用文档碎片js的防抖和节流使用requestAnimatio

原创 发布/订阅者模式

发布订阅者模式：订阅者（subscriber）把自己想订阅的事件注册在调度中心（event channel），当发布者（publisher）发布事件到调度中心，也就是事件触发时，由调度中心统一调度订阅者注册到调度中心的代码。

原创 观察者模式

观察者模式：观察者observer直接订阅主题subject，当主题subject被激活时，会触发观察者里面的事件。

原创 diff算法

vue diff算法

原创 vue知识点

vue

原创 浏览器多线程

浏览器多进程javascript进程线程浏览器进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位），线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位）。浏览器内的进程知道了进程与线程之间的关系之后，下面是浏览器与进程的关系了。首先，浏览器是多进程的，之所以浏览器能够运行，是因为系统给浏览器分配了资源，如cpu、内存，简单的说就是，浏览器每打开一个标签页，就相当于创建了一个独立的浏览器进程。例如我们查看chrome里面的任务管理器。注意： 在这里浏览器应该也有自己

原创 强缓存、协商缓存

强缓存和协商缓存缓存，作为我们开发过程中经常碰到的一样东西，相信很多小伙伴和我一样对它熟悉又陌生，各种 expires 、Etag 好像都知道，却又好像无法把它讲清楚，所以本篇文章就来总结整理下。一、缓存首先，什么是缓存？我的理解，缓存就是一个资源副本。当我们向服务器请求资源后，会根据情况将资源 copy 一份副本存在本地，以方便下次读取。它与本地存储 localStorage 、cookie 等不同，本地存储更多是数据记录，存储量较小，为了本地操作方便。而缓存更多是为了减少资源请求，多用于存储文件，

原创 CommonJS

CommonJS　　CommonJS 是以在浏览器环境之外构建 javaScript 生态系统为目标而产生的写一套规范，主要是为了解决 javaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行，该规范的主要内容是，模块必须通过 module.exports 导出对外的变量或者接口，通过 require() 来导入其他模块的输出到当前模块的作用域中；目前在服务器和桌...

原创 vue图

原创 offsetTop

offsetTop：元素到offsetParent顶部的距离offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。注意：只有元素s...

原创 状态机

状态机是优先自动状态机，是现实事物运行规则抽象而成的一个数学模型状态机（state machine），不是指一个机器，而是一个数学模型，一张状态转化图。如自动门的状态转化图自动门有两个状态，open和closed，在closed状态下如果读取关门信号，状态就会切换为closed。状态机的全称是有限状态自动机，自动两个字也是包含重要含义的。给定一个状态机，同时给定它的当前状态以及输入，那么输出...

原创 vue-devtools-dev资源

vue-devtools-dev的安装包链接: https://pan.baidu.com/s/1fm-Uh4zXR99w7ON4L-FhMg提取码: n8h3安装的方法：先将压缩包解压，再打开谷歌浏览器—》点击设置—>扩展程序–》勾选开发者模式—》加载已解压的扩展程序—》选择“chrome扩展”文件夹，至此恭喜已经安装成功！！！安装的方法如下：先将压缩包解压，再打开谷歌浏览器—》点击...

原创 ES6

ES6基础1、let1、let声明的变量只能在当前块级作用域内有效2、let声明的变量不能被重复声明3、不存在变量提升4、暂存死区let monkey = '美猴王';{ console.log(monkey); //暂存死区 let monkey = '孙悟空';}console.log(monkey);块级作用域通俗的讲，就是一对花括号中的区域{ … }，且块级...

原创 正则表达式

正则表达式1、元字符2、限定符3、其他字符4.一些练习 // 1.验证邮政编码： 100010 // ^[1-9]\d{5}$ // // 2.验证手机号： 13272009464 // ^[1-9]\d{10}$ // // 3.验证日期： 2010-6-02 // ^\d{4}-\d{1,2}-\d{1,2}$ // ...

原创 Json、Ajax基础、跨域

Ajax关于AjaxAjax的优缺点XMLHttpRequest对象XMLHttpRequest的作用可以向服务器提出请求并处理响应，而不阻塞用户可以在页面加载以后进行页面的局部更新如何使用Ajax注意：open方法不会向服务器发送真正的请求，它相当于初始化请求并准备发送只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错。async...

原创 jQuery扩展--动画

动画动画DOM及其CSS操作自定义动画delay（） delay（）方法可以实现动画暂停。 var swiper = function(){ $('div').stop() .animate({'width':'0%'},1000) .delay(1000) .animate({'width':'100%'}) }...

原创 jQuery事件

jQuery事件

原创 jQuery简单介绍

jQuery的介绍jQuery是一个JavaScript函数库jQuery是一个轻量级的“写得少，做得多”的JavaScript库jQuery的目的化大为小，化繁为简简化代码，使程序更高效jQuery主要是用来替代原生JavaScript的jQuery学习目标在web前端页面中HTML属于结构层，负责描绘出内容的结构，CSS属于表示层，负责“如何显示有关内容”，JavaScr...

原创 jQuery选择器

基本选择器#id 根据给定的ID匹配一个元素$(document).ready(function(){ var first = $('#first'); console.log(first); var second = $('#second'); console.log(second); var third = $('#third'...

原创 js BOM

什么是BOMBOM（browser odject model）浏览器对象模型BOM对象window所有的全局变量和全局方法都被归在window上window对象方法navigatorscreenhistorylocationdocumentevent...

原创 JS事件

JS事件事件是可以被JavaScript侦测到的行为，通俗的讲就是当用户与Web页面进行某些交互时，解释器就会创建响应的event对象以描述的信息常见的事件用户点击的页面上的某项内容鼠标经过特定的元素用户按下键盘上的某个按键用户滚动或改变窗口大小页面元素加载完成或加载失败事件句柄事件句柄（又称事件处理函数、事件监听函数），指用于响应某个事件而调用的函数。每一个事件对应一个句柄...

原创 DOM事件

什么是事件事件是文档或浏览器窗口中发生的一些特定的交互瞬间HTML事件直接在HTML元素标签内添加事件，执行脚本语法：<tag 事件=“执行脚本”>功能：在HTML元素上绑定事件说明：执行脚本可以是一个函数的调用DOM0事件...

原创 DOM属性系统

HTML属性分类操作Attribute属性getNamedItem（）获得属性removeNamedItem（）删除属性setNamedItem（）创建属性var div = document.querySelector('div');console.log(div.xxx); //undefinedconsole.log(div.attributes.getName...

原创 类数组对象

NodeList对象的特点NodeList是一种类数组对象，用于保存一组有序的节点可以通过方括号语法来访问NodeList的值，youitem方法与length属性在这里插入代码片...

原创 查找节点、操作节点、删除节点

节点查找方法**- document.getElementById()获取id名document.getElementsByName()获取类名或id名document.getElementsByTagName()获取标签名Ele.getElementsByClassName()获取类名Ele.querySelector()返回文档中匹配制定css选择器的一个元素Ele.q...

原创 节点遍历

节点遍历方法节点遍历实现 var oHtml = document.documentElement; //documentElement属性可返回文档的根节点 var p = document.getElementById("paragraph"); var txt = p.childNodes[0]; ...

原创 创建节点

create系列创建节点document.createElement()document.createTextNode()document.creatDocumentFragment()document.creatComment()高效创建节点方法innerHTNLouterHTMLinnerTextouterText

原创 css定位（position）

position定位模型**学习目标：自然定位模型 static（静态）相对定位模型 relative（相对，完全）结对定位模型 absolute（绝对）固定定位模型 fixed（固定）磁贴定位模型 sticky（粘贴，黏(性)的）**Positioned Layout Module提供与元素定位和层叠相关功能，它是核心模块.box{ positi...

原创 css浮动

css定位机制

原创 css背景和列表样式

背景样式background-color 设置元素的背景颜色background-image 把图像设置为背景background-position 设置背景图像的起始位置background-attachment 背景图像是否固定或随着页面其余部分滚动background-repeat 设置背景图像是否重复及如何重复background 简写属性，作用是将背景属性设置在一个声明中b...