
基础
爱lv行
人与人的区别不是受过教育和没受过教育,而是喜欢阅读和不喜欢阅读
展开
-
Composition API
vue3 Composition API原创 2022-12-02 10:57:02 · 243 阅读 · 1 评论 -
vue cli + vue2 老项目 迁移 vite
老项目迁移 vite原创 2022-11-09 15:53:08 · 3189 阅读 · 0 评论 -
router实现原理
原生实现路由跳转原创 2022-11-08 17:31:53 · 230 阅读 · 0 评论 -
原生实现循环轮播动画
原生轮播原创 2022-11-08 17:17:41 · 220 阅读 · 0 评论 -
mac关闭小红点
mac 忽略系统更新升级原创 2022-10-31 09:55:56 · 191 阅读 · 0 评论 -
mac brew 安装
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"原创 2022-03-09 11:10:57 · 131 阅读 · 0 评论 -
单元测试-1
原创 2021-02-07 11:06:56 · 102 阅读 · 0 评论 -
移动端广告落地页预加载技术实践
背景介绍预加载技术与实践预加载的机遇与挑战点击率 = 点击次数/ 展示次数转化率 = 转化次数/ 点击次数落地页形式主要有两种 1: Native 端上提供模版 下发数据拼合 体验好 但是不够灵活 2:Web 页面 由HTML 实现 足够灵活 但是可能存在性能问题背景介绍 加载时长0-1.5s内 转化率都在15% 加载时长超过1.5s的落地页 ,转化率变化不大 优化落地页加载时长到1.5s内, 能显著提升落地页的转化率 常规的优化做完, 在进一步优化,就需原创 2021-03-04 13:40:22 · 1023 阅读 · 1 评论 -
如何高效地实施 CSS 方法论中的BEM?
css 预处理工具 1. less 2. sass 3. stylus 4. postCSScss方法论 1. BEM 2. SUIT CSS 3. OOCSS css 加载器 1. CSS MODULES 2. CSS Loader css方法论 : 为了提高CSS的可维护性和扩展性 而衍生的一种CSS样式名的原则,概念及其明明规范BEM (Block Element Modifier)Block 表示一个模块 black可以包含blockElemen原创 2021-03-03 19:26:33 · 297 阅读 · 1 评论 -
性能优化小技巧合集
性能优化list渲染使用唯一-key — 加快DOM Diff更新超列表使用虚拟滚动 — 减少无意义列表渲染,提升用户体验不使用内连对象 — 避免对象饮用重复创建导致组件renderJSX中直接引入 — 加快svg展示速度 可自定义svg属性下面让我们开始挨个了解一下,首先是列表渲染使用唯一 key,我们都知道 React 在执行 Diff 算法时,会用到元素的 key 属性,它可以帮助 React 定位更改、添加或删除的项目,在重新 render 的时候尽原创 2021-03-03 11:24:03 · 142 阅读 · 0 评论 -
移动端调试场景
原创 2021-03-03 09:52:56 · 91 阅读 · 0 评论 -
如何用lazy+ Suspense实现组件延迟加载?
我们正常引用一个组件,可以采用 ESM 的 import 语法import OtherComponent from './OtherComponent';如果希望能够延迟加载 OtherComponent 组件,我们可以使用 React.lazy 来加载这个组件const OtherComponent = React.lazy(() => import('./OtherComponent'));前面给大家讲解了 React.lazy 的用,接下来我们讲讲 Suspense 组件,Susp原创 2021-02-27 22:02:17 · 261 阅读 · 1 评论 -
react性能优化之组件render优化
举个例子例子说明,父组件触发 render,无论子组件使用到父组件的 state 作为 props 值是否改变,甚至无论子组件是否使用到父组件的 state,都会触发子组件 renderclass ChildOne extends React.Component { constructor(props) { super(props) } render() { const {value} = this.props; console.l原创 2021-02-26 09:43:14 · 464 阅读 · 1 评论 -
如何使用React Hooks重构HOC组件?
函数式组件优点容易拆分易于测试函数式组件的缺点react16.8 引入Hooks 具有让函数式组件拥有内部状态 生命周期 副作用 逻辑复用useState > stateuseEffect > 生命周期useContext > React.createContext自定义Hooks const [state, setState] = useState(initialState)适用useState注意 在渲染时候无论是调用一个useState() 还是多个use原创 2021-02-26 09:20:27 · 1132 阅读 · 0 评论 -
使用React Developer Tools做性能分析
原创 2021-02-24 17:28:38 · 313 阅读 · 0 评论 -
JavaScript这几种内存泄露写法
1. 未声明 / 意外的全局变量第一种,未声明或者意外的全局变量。全局变量的生命周期最长,直到页面关闭前,它都存活着,所以全局变量上的内存一直都不会被回收。所以当我们写代码的时候如果全局变量使用不当,没有及时回收,或者拼写错误将某个变量挂载到全局变量时,就会发生内存泄漏了。var a = '这是一个全局变量';function test(){ b = '变量 b'; //b 成为一个全局变量,不会被回收}这段代码中,test 函数中定义了一个变量 b,没有使用 var 或者 l.原创 2021-02-23 16:51:58 · 260 阅读 · 0 评论 -
如何设计一套规范的业务组件库?
评估总分 = 复用效果分 * 0.5 + 实现效果分 * 0.35 + 实际效果调研分 * 0.15复用效果分 = 引用次数 * 5 + 引用项目数 * 25实现效果分 = 文档详细程度 * 0.3 + 上手成本 * 0.3 + 使用成本 * 0.4实际效果调研分 = 每一调研项分数 * (100/ 调研项数目 )...原创 2021-02-23 16:21:18 · 810 阅读 · 0 评论 -
前端安全类
CSRF基本概念和缩写 1: CSRF 通常称为跨站请求伪造 英文名 Cross-site request forgery 缩写 CSRF 3: 防御措施 1: Token 验证 2: Referer 验证 3: 隐藏令牌 2: 攻击原理 3: 防御措施 1: Token 验证 2: Referer 验证 3: 隐藏令牌XSS1: XSS(cro...原创 2019-10-29 09:45:36 · 164 阅读 · 0 评论 -
通信类
什么是同源策略及限制概念:同源策略限制从一个源加载的文档或脚本如何与来自另有个源的资源进行交互,这是一个用于隔离潜在恶意文件的关键的安全机制 1:协议 2:域名 3:端口1:Cookie LocalStorage 和IndexDB 无法读取2: DOM无法获得3:AJAX请求不能发送前后端如何通信1: Ajax :同源的情况下才可以通信2: WebSocket 不受同源策略的...原创 2019-10-28 08:32:45 · 161 阅读 · 0 评论 -
面向对象类
类与实例1:类的声明 1:第一种方式 用构造函数模拟类的方式 function Animal() { this.name = 'name'} 2: 第二种方式 ES6 class class Animal2 { constructor(name) { this.name = 'name'; } }2:生成实例 new Animal(), new Animal2()...原创 2019-10-27 18:01:36 · 110 阅读 · 0 评论 -
原型链
创建对象有几种方法第一种let o1 = { name: 'o1' };let o2 = new Object({ name: 'o2' });第二种let M = function(name){this.name = 'name'};let o3 = new M('o3');第三种 let P = {name:'o4'};let o4 = Object.create(...原创 2019-10-27 15:59:59 · 124 阅读 · 0 评论 -
HTTP协议类
HTTP协议的主要特点 1:简单快速 2:灵活 : 通过一个HTTP协议完成不同数据 3:无连接 : 连接一次之后就会断开 4;无状态 :无法区分 上次这个连接和下次连接的身份 HTTP报文的组成部分 1:请求报文 1:请求行 1:HTTP方法 2:页面地址 3:HTTP协议 4:版本 2:请求头 :key:value 告...原创 2019-10-27 13:32:38 · 227 阅读 · 0 评论 -
类型转换
数据类型1: 原始类型 Boolean Null Undefined Number String Symbol2: 对象显示类型转换Number 函数1:数值: 转换后还是原来的值2:字符串:如果可以被解析为数值,则转换为对应的数值, 否则转为NaN 空字符串为03:布尔值:true转为1 false 转为04:undefined: 转为NaN5:null: 转为06:对象...原创 2019-10-27 10:16:05 · 150 阅读 · 0 评论 -
css盒模型
基本概念:标准模型+ IE模型标准模型和IE模型区别标准模型 width=content 的宽IE模型 width=content+ padding+ borderCSS如何设置这两种模型标准模型 box-sizing:content-boxIE模型 box-sizing:border-boxJS如何设置获取盒模型对应的宽和高dom.style.width/height ...原创 2019-10-26 17:59:24 · 151 阅读 · 0 评论