庆新酱-CSDN博客

原创 vue的响应式和数据双向绑定原理

数据双向绑定是VUE即MVVM框架的核心概念，简单地说就是数据的改变更新视图，视图的变化也会变动数据。其中，View更新Data可以通过事件监听的方式实现，而Data更新View就是Vue数据双向绑定的核心，也是讨论的重点。实现一个监听器Observer，用来劫持并监听所有属性，如果属性发生变化，就通知订阅者；实现一个订阅器Dep，用来收集订阅者，对监听器Observer和订阅器Watcher进行统一管理；实现一个订阅者Watcher，用来收到属性的变化通知并执行相应的方法，从而更新视图；

2023-03-31 17:59:25 357

原创文字过长，限制两行显示文字，末尾加...，鼠标在文字上放显示全部文字

实现功能：当文字过长时，只显示两行文字，并在末尾出现…，并当鼠标移入文字区域时显示全部文字内容。实现方法：css部分：// 超出两行隐藏，并在末尾出现....overlap { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}html： <el-tooltip

2021-12-11 14:45:57 1421

原创前端实现下载导出文件

download(url, name) { var xhr = new XMLHttpRequest() xhr.open('GET', url, true) xhr.responseType = 'blob' xhr.onload = function (e) { try { if (this.status === 200) { var blob = this.response ...

2021-08-05 14:57:33 165

原创 Object.freeze()

Object.freeze()是ES5新增的特性，可以冻结一个对象，防止对象被修改。可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改vue 1.0.18+对其提供了支持，对于data或vuex里使用freeze冻结了的对象，vue不会做getter和setter的转换。如果你有一个巨大的数组或Object，并且确信

2021-07-22 09:59:02 147

原创 vue自动销毁的eventBus

我们通常在使用非父子组件间通信时，采用new Bus()的方式来做一个事件广播。但一个弊端就是，这种方式并不会自动销毁，所以为了避免回调函数重复执行，还要在destroyed周期中去做Bus.$off('event name', fn)的操作。这样带来的冗余代码就是:$on 的回调函数必须是具名函数。不能简单的Bus.$on('event name', () => {})使用匿名函数作为回调了，所以需要将回调函数放到metheds中进行额外的声明在destroyed生命周期中去销毁事件的监听

2021-07-13 16:07:54 2374

原创 Vue的生命周期

Vue的生命周期1. 生命周期图示2. 初始化阶段3. 模板编译阶段4. 挂载阶段5. 卸载阶段1. 生命周期图示下图给出了Vue.js实例的生命周期，可以分为4个阶段：初始化阶段、模板编译阶段、挂载阶段和卸载阶段。2. 初始化阶段从new Vue（）到created之间的阶段叫做初始化阶段这个阶段里主要在Vue的实例上初始化一些属性、事件以及响应式数据，如props、methods、data、computed、watch、inject和provide等。3. 模板编译阶段在created

2021-01-27 22:51:45 293

原创 Vue侦测数组变化的原理

目录拦截器使用拦截器覆盖Array原型将拦截器方法挂载到数组的属性上如何收集依赖依赖列表存在哪儿收集依赖在拦截器中获取Observer实例向数组的依赖发送通知侦测数组中元素的变化侦测新增元素的变化关于Array的问题总结## 如何追踪变化Object的变化是靠setter来追踪的，只要一个数据发生了变化，一定会触发setter。Array是通过push等数组原型的操作来改变数组的内容，因此只要在用户使用push操作数组的时候得到通知，就能实现同样目的。可以利用一个拦截器覆盖Array.protot

2021-01-09 13:24:52 797

原创 Vue侦测对象变化的原理

如何追踪变化在JS中有两种方法可以侦测到变化：Object.definePropertyES6的ProxyVue2中使用的是第一种方法，即Object.defineProperty，侦测对象的变化，这是因为当时ES6在浏览器中的支持度并不理想。利用Object.defineProperty侦测对象 function defineReactive(data, key, val){ Object.defineProperty(data, key, { enume

2021-01-07 20:45:43 344

原创重排与重绘

重排与重绘重排重绘两者关系触发条件优化重排如果通过js或者css修改元素的几何位置属性,例如改变元素的宽度,高度等，那么浏览器会触发样式计算之后的一系列阶段,这个过程叫重排。也叫回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。重绘如修改元素的背景颜色等不影响元素几何属性的,会跳过构建布局树和构建图层树，直接进入绘制阶段(绘制列表)以及后面的一系列操作，这个过程叫做重绘。两者关系重排必定会引发重绘，但重绘不一定会引发重排。触发条件重排：任何页面布局和几何属性的改变都

2020-12-09 09:34:58 153

原创从输入url到页面展示中间发生了什么

从输入url到页面展示中间发生了什么文章目录从输入url到页面展示中间发生了什么一、http请求二、网络响应三、渲染页面3.1 生成DOM树3.2 生成CSSDOM树3.3 生成布局树和图层3.4 绘制一、http请求浏览器会构建请求行：例如GET / HTTP/1.1(请求方法是 get,路径为根路径，Http 协议版本为 1.1)检查缓存(强缓存)，如果该请求缓存中存在，直接使用，否则进入下一步DNS解析由于我们输入的是域名，而数据包是通过ip地址传给对方。DNS解析就是得到目标服务

2020-12-09 09:12:16 102

原创节流与防抖

节流和防抖都是为了节省计算机资源，防止高频率的执行函数。节流：在指定的时间间隔内，只会执行一次任务；防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定的时间间隔，任务才会执行。节流比较好理解，如果任务被频繁触发，比如浏览器窗口的改变，指定一个时间间隔，那么无论任务触发得有多频繁，在那个时间间隔里只会执行一次任务。防抖，简单地说就是设定一个时间间隔，在这个时间间隔内无论触发多少次，都不会执行任务，而一旦停止触发，超过这个时间间隔，就会执行一次任务，也就是说只在最后一次的触发后才会执行任务。节流代

2020-11-19 16:50:39 75

原创 import和require

node编程中最重要的思想就是模块化，import和require都是被模块化所使用。遵循规范require 是 AMD规范引入方式import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法调用时间require是运行时调用，所以require理论上可以运用在代码的任何地方import是编译时调用，所以必须放在文件开头本质require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量import是解构过程，但是目

2020-11-19 15:34:06 193

原创科里化函数

柯里化是指这样一个函数(假设叫做createCurry)，他接收函数A作为参数，运行后能够返回一个新的函数。并且这个新的函数能够处理函数A的剩余参数。 function add() { // 第一次执行时，定义一个数组专门用来存储所有的参数 var _args = [].slice.call(arguments); // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值 var adder = function (

2020-11-19 15:33:03 171

原创 ES6学习总结之数值的扩展

ES6学习总结之数值的扩展1. 二进制和八进制2. Number.isFinite()和Number.isNaN()3. Number.parseInt()和Number.parseFloat()4. Number.isInteger()5. Number.EPSILON6. 安全整数和Number.isSafeInteger()7. Math对象的扩展8. 指数运算符9. BigInt数据类型BigInt对象转换规则1. 二进制和八进制0b开头的数值表示二进制数；0o开头的数值表示八进制数；可以用

2020-09-06 13:19:25 184

原创 ES6学习总结之字符串新增方法

字符串的新增方法首先，ES6对字符串引入了遍历器接口，因此可以使用for...of...遍历字符串的每个字符。1. String.raw()该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法，这里就先不多介绍了。2. String.fromCodePoint()可以识别大于0xFFFF的字符，弥补了ES5中String.fromCharCode()只能识别两个字节的字符的不足，如String.fromCharCode(0x20BB7)// "ஷ"S

2020-08-29 14:46:47 122

原创在github上上传本地项目

在github上创建新项目，完成一系列操作创建好后复制新项目的链接在本地新建一个文件夹gitname打开git bash，进入新建的文件夹，粘贴复制的项目链接将本地项目的所有文件复制到新建的文件夹中在git bash中输入cd gitname/进入新建的项目，然后输入git add .把文件夹下面新的文件或修改过的文件添加进项目，然后输入git commit -m "提交信息" （提交的信息是你的项目说明），最后输入命令git push -u origin master将本地仓库添加到githu.

2020-08-28 12:23:06 122

原创 ES6学习总结之解构

变量的解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。从这句话中可以知道，解构的对象主要有两种：数组和对象。但其实字符串，布尔值和数值都可以进行解构赋值，甚至包括函数的参数。1. 数组基本用法：let [a, b, c] = [1, 2, 3];等同于这么写：let a = 1;let b = 2;let c = 3;只要等号左右两边的模式相同，左边的变量就会被赋予对应的值，如果解构不成功，变量的值就等于un

2020-08-24 22:51:36 119

原创 ES6学习总结之let和const

1. let命令不存在变量提升变量提升：变量可以在声明前使用，值为undefined，例如：console.log(foo); // 输出undefinedvar foo = 2;而let没有变量提升，一旦变量在声明前使用就会报错，例如：console.log(bar); // 报错ReferenceErrorlet bar = 2;暂时性死区temporal dead zone，简称 TDZ暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只

2020-08-08 16:10:46 101

原创 HTML5 drag属性

HTML5 drag属性想要对某个元素拖拽，需要首先给元素加上draggable=“true”，默认a标签和img是可以拖动的。1. 拖动事件事件分为两类：一被拖动的元素上的事件，二被放置的位置接收到的事件。一、发生在被拖动的元素上的事件事件名触发时机触发次数dragstart当拖动开始时（按下鼠标键并开始移动）触发一次1drag拖动开始后触发，在元素拖动期间会持续触发ndragend拖动结束（释放鼠标、无论放置目标是否有效）后触发一次1二、

2020-08-05 10:11:31 1956 1

原创 nextTick和JS的事件循环机制

在用element-ui做一个登录组件时，想要实现打开登录框就自动聚焦input的功能，但在做的时候发现用element-ui的表单自带的autofocus属性只能在第一次打开登录框的时候自动聚焦，如不刷新页面，再次打开登录框就无法实现自动聚焦的功能。在网上找了很多方法，用了自定义指令directives，也是只能在第一次才能实现自动聚焦，于是问了老大，老大用了$ref.nextTick的方法，于是我去查了一下，发现这个方法需要js事件机制的基础知识。在了解js事件循环机制之前，需要知道进程和线程。1

2020-08-05 10:09:23 1407

weixin_43737327的博客