10 2022 档案
对scroll进行防抖的优化（在vue中使用防抖）
摘要：目标效果：在一个长内容的页面中，当滚动到一定的距离时，会出现一个 "返回顶部" 的图标，点击会平滑的返回到页面顶部，有助于提升用户体验。 HTML <div class="backtop" @click="backtop" ref="top">TOP</div> CSS .backtop { pos
webpack优化
摘要：webpack瓶颈 webpack 的构建过程太花时间 webpack 打包的结果体积太大 不要让loader干太多 module: { rules: [ { test: /\.js$/, use: ['babel-loader'], include: srcPath, exclude: /node
虚拟列表
摘要：懒加载列表 虚拟列表：一次性获取全部数据，但是只显示一部分 只渲染start和end之间的数据，使用translate3d实现在y轴滚动的效果。 终极目标 求出在可视区域显示的数据 求出滚动列表在y轴的偏移量 计算需要的变量 itemHeight: 单个元素的高度 visbleCount： 可显示的
实现内容的无限滚动
摘要：intersecton Observer 检测dom的位置 Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。
cookie
摘要：cookie安全 secure https httpOnly 预防xss document.cookie × sameSite 预防csrf strict：cookie只发送给它的来源站点 lax：默认 cookieName前缀 _Host-(与secure属性一起设置，Https) _Secure
防抖和节流
摘要：注意区分 节流（射击游戏）n秒内只执行一次 例：子弹发射小游戏，无论点击频率是多少，在一定的时间内只会发射1个子弹。 防抖（广告） n秒后执行 例：相当于看视频需要先看广告，如果刷新页面，那么就要重头开始看广告。
发布订阅者模式
摘要：class EventEmitter { // 补全代码 constructor(){ this.events = {} } on(eventName, callback){ //一个事件上注册多个回调函数 const callbacks = this.events[eventName] || []
五点骰子
摘要：.box5 { justify-content: space-between; } .box5 div { display: flex; flex-direction: column; justify-content: space-between; } 注意选择器的优先级 .box5 .center
字符串转驼峰
摘要：通过split将字符串分割成数组 -font-size //['', 'font', 'size'] font-size //['font', 'size'] function cssStyle2DomStyle(sName) { var arr = sName.split('-').filter(
vue.js3的设计思路
摘要：声明式的UI框架 javascript对象和模板都可以声明式地描述UI 虚拟dom就是用js对象来描述真实的DOM结构。 渲染器 将虚拟DOM渲染为真实DOM 可以精确地找到vnode对象的变更点
1
摘要：箭头函数 和声明式函数一样 let sum = function(a,b){ return a+b } let sum = (a,b)=>{ return a+b } 没有Prototype，不能成为构造函数，不能使用new 不能使用arguments 不能使用super 访问类的prototype
BOM
摘要：history对象 处于安全考虑，history不会暴露用户的历史记录，可以在不知道url的情况下，前进和后退。 导航 history.go() history.forward() 前进 history.back() 后退 页面的url发生变化，就会生成一条历史记录，并且location.hash也
样子
摘要：
computed&&lazy
摘要：副作用函数effect:它的执行间接或者直接的影响了其他函数的执行。 effect会立即执行传递给它的副作用函数，但是这样很消耗性能，在需要的时候再执行，将它变为lazy的。 懒计算lazy computed的执行会返回一个对象，只有读取对象的value，才会执行副作用函数 function com
写一个加载中的自定义指令
摘要：前置知识 el:指令绑定到的元素 binding:对象 value:传递给指令的值 arg:传递给指令的参数 instance:使用该指令的组件实例 首先构建自定义指令的样子 <template> <div class="loading"> <div class="loading-content">
在uniapp使用socket.io
摘要：首先使用node.js构建后端 参考官方文档 // 首先搭建服务器 var express = require("express"); var app = express(); var server = require("http").createServer(app); var io = requ
