10 2022 档案

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