开始前首先贴上个人看到的比较好的一些讲述了vue底层原理的文章，大佬们写的非常详细，由浅入深。本系列是站在各位大佬的肩膀上进行的一个总结。 纯干货！图解Vue响应式原理 - 掘金 (juejin.cn) https://juejin.cn/user/2647279730694029/posts https://juejin.cn/post/7076002091570823181#headin...

这篇文章按照场景的不同分别讲述了几种文件上传的实现方式以及原理。分别包括： 通过form-data格式上传文件 通过base64格式上传图片 前端选择图片时需要预览，并且需要前端为文件名起一个唯一的标识符的场景 前端需要实时展示文件上传进度的场景 有多个文件需要批量上传并且均需展示进度条的场景 拖拽上传的实现 大文件分片上传以及断点重传功能。 通过form-data格式上传文件对于文件上...

在做单点登录功能的时候，在网络上搜索了很多文章，大部分都是站在后端如何处理session共享、有无状态登录的角度攥写的，并没有综合前端如何处理多个子系统之间传输token的角度来说明，故此整合了这样一篇笔记，从多个角度尽量全面地来说明单点登录的几种实方式。 引入众所周知，HTTP是无状态的协议，这意味着服务器无法确认用户的信息。于是乎，W3C就提出了：给每一个用户都发一个通行证，无论谁访问的...

方式1：使用requestAnimationFrame 不能一次性将几万条都渲染出来，而应该一次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次 在渲染大量数据时，避免一次性将所有数据都渲染出来可以提高性能，以保持界面的流畅性。以下是一个示例代码，演示如何使用requestAnimationFrame来分批渲染大量数据，避免卡住界面：...

图片懒加载的原理是没有在可视区域的图片暂时不加载图片，等进入可视区域后在加载图片，这样可以减少初始页面加载的图片数量而提升页面加载速度。 图片懒加载在提升页面加载速度的同时也会伴随用户看其他未展示的图片时会有等待时间；图片加载显示会伴有布局抖动等问题。 方案图片懒加载的关键是：判断一个元素是否在可视区域。 img的loading属性设为“lazy” HTMLImageElement 的 lo...

发布订阅、观察者设计模式观察者模式观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新 观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯 实现代码如下： 被观察者模式 123456789101112131415161718class Subject { const...

概念定义： 用于定义基本操作的自定义行为，用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等） 本质： 修改的是程序默认形为，就形同于在编程语言层面上做修改，属于元编程(meta programming) 元编程（Metaprogramming，又译超编程，是指某类计算机程序的编写，这类计算机程序编写或者操纵其它程序（或者自身）作为它们的数据，或者在运...

提取css代码 要求：让 webpack 把 css 代码内容字符串单独提取到 dist 下的 css 文件中 需要：mini-css-extract-plugin 插件来实现 步骤： 下载 mini-css-extract-plugin 插件软件包到本地项目中 1npm i --save-dev mini-css-extract-plugin 配置 webpack.config....

打包模式告知 Webpack 使用相应模式的内置优化 分类： 模式名称 模式名字 特点 场景 开发模式 development 调试代码，实时加载，模块热替换等 本地开发 生产模式 production 压缩代码，资源优化，更轻量等 打包上线 如何设置影响 Webpack呢？ 方式1：在 webpack.config.js 配置文件设置 mode 选项1234modul...

概念 Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容 静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件 打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包 Webpack 的作用：把静态模块内容，压缩，整和，转译等（前端工程化） 把 less/sass 转成 css 代码 把 ES6+...