- 博客(135)
- 收藏
- 关注
RSS订阅原创 前端动画总结
过渡相关属性说明transition的优点在于简单易用，但是它有几个很大的局限。（1）transition需要事件触发，所以没法在网页加载时自动发生。（2）transition是一次性的，不能重复发生，除非一再触发。（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。
2024-05-05 00:01:50
837
1
原创 树形结构的查找
由于需要完整的路径，所以需要计算父级并传递给下一级，currentPath作为参数进行传递。定义一个函数，主要功能是处理每一个节点，由于收到的是一个数组，所以需要遍历数组。一个树形结构的数据，查找时以数组的形式返回所有含有关键字的完整路径。如果节点包含关键词就push到准备好的数组result中。函数递归，条件是含有children就继续递归遍历。首先定义数组并返回，接受的参数为关键词和一个数组。比如查找 “河”，返回。
2024-04-05 17:17:44
223
原创 滚动滚轮使盒子横向滚动
observer 对 resizeObserver 自身的引用，因此需要它的时候，你要从回调函数的内部访问。例如，这可用于在达到特定的情况时，自动取消对观察者的监听。ResizeObserver 构造函数创建一个新的 ResizeObserver 对象，它可以用于监听元素内容盒或边框盒或者尺寸的大小。entries是一个数组,可以用于获取每个元素改变后的新尺寸。
2024-01-21 11:48:56
433
原创 使用iframe遇到的问题及解决
iframe嵌入页面，有多个tab，切换tab修改iframe的src，显示不同的页面:切换tab，然后点击浏览器的返回，就会出现tab与页面内容对不上的情况：修改iframe的src，window.history历史记录中也会添加一条记录（动态切换iframe的src会导致增加一条iframe的历史浏览记录）：在切换src的时候把iframe给销毁再重新创建就行了。这样就是一个新的iframe，不会触发他的变更操作，也就不会往window.history中存入记录。
2023-12-24 22:39:06
252
原创 vite基本知识
开发时，并不对代码打包，而实直接采用ESM的方式运行项目一项目部署时，再对项目进行打包其核心原理是利用浏览器现在已经支持ES6的import，碰见import就会发送一个HTTP请求去加载文件使用vite运行项目时，首先会用esbuild。
2023-12-17 21:14:25
406
原创 打包速度优化
它分析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时，从而让我们对打包时间较长的部分进行针对性优化使用时要注意它与的版本兼容问题，容易报错webpack5内置的插件 ProgressPlugin 不仅可以看打包进度，还可以分析打包时间，只要将profile设置为true。
2023-12-16 21:54:52
207
原创 webpack打包体积优化，减少白屏时间
一个是打包体积的优化，另一个是代码层面的优化1》首先通过Network面板发现vendor.js体积过大，网路良好情况下加载时间太长），vendor体积太大，加载花了3s？后来发现 js 没开启nginx压缩2》通过 webpack-bundle-analyzer 来具体分析，进一步体积过大的原因，进一步进行打包优化。
2023-12-04 17:56:35
437
原创 css主题切换
css主题切换的实现，不同的方式的具体实现以及不同的方式的选择；CSS变量+类名切换，CSS变量+动态setProperty，SASS的mixin混入+类名切换等主流实现方案
2023-09-19 22:46:12
766
原创 滚动条设置
overflow:scroll – 只有超出了盒子才会有滚动条overflow:auto – 一直有滚动的盒子，只是超出了盒子才会出现滚动条滑块，可以滚动针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式。
2023-09-13 23:06:42
471
原创 前端路由与vue-router原理
理解前端路由及实现方式，了解hash哈希模式和history历史模式两种路由的原理，原生实现哈希和历史模式路由，对比哈希模式路由和历史模式路由的不同；分析vue-router的实现方式
2023-09-10 21:52:25
265
原创 css属性计算、包含块、层叠上下文
important的优先级最高行内样式表：行内样式-style属性内部样式与外部样式：比较选择器的权重，选择器权重一样则是考虑解析先后，后面的覆盖前面的对与前面连个步骤之后仍然没有属性值的属性，如果可以继承，则使用继承值可以继承的样式有哪些？
2023-09-05 22:16:04
118
原创 defineProperty、seal、freeze的使用与联系
不同于 Object.freeze() 的是，通过 Object.seal() 密封的对象可以更改其现有属性，只要它们是可写的。不能添加新属性、不能删除现有属性或更改其可枚举性和可配置性、不能重新分配其原型。只要现有属性的值是可写的，它们仍然可以更改。原理上：阻止对象的扩展，然后将现有的属性描述符更改为configurable: false。非对象参数将按原样返回，不会有任何错误，因为根据定义，基本类型已经是不可变的。只能对现有属性进行读取和需修改，不能添加新属性也不能删除已有属性。简单模拟freeze。
2023-09-02 21:55:01
146
原创 vue自定义指令
我们在使用UI组件库的时候为什么通过Vue.use()就可以使用了？了解Vue.use（）的基本原理，如何在vue中自己定义一个指令并在组件中使用，全局注册一个指令和定义组件内部的局部指令；了解vue中内置的指令是怎么定义的
2023-09-02 16:02:29
303
原创 还只是听说过Generator函数？那就来全面了解它吧
Generator函数时ES6提供的一种异步编程解决方案；三、调用与执行-分段调用也是使用小括号，但是调用Generator函数后，该函数并不执行，返回的也不是函数运行的结果，而是一个遍历器对象 Iterator ObjectGenerator函数分段执行，yield语句是暂停执行的标记，而next 方法可以恢复执行Generator函数返回的遍历器对象每次调用 next() 方法，内部指针就从函数头部或上一次停下来的方法开始执行，直到遇到下一条 yield 或 return 语句为止。
2023-08-30 22:53:15
171
原创 请求并发控制
要求：多个请求做并发限制，请求完成后执行回调首次循环启动能够执行的任务取出能执行的任务推入执行器执行执行器更新当前并发数，并且再请求完成时继续取出任务推入执行器当所有请求完成时，触发回调函数测试一下上面的代码。
2023-08-20 13:01:32
130
原创 浏览器多线程到事件循环机制
单线程就是同一时间只能做一件事情；JS是单线程是因为JS的主要作用是用户的交互，dom的操作；如果它是多线程，一个线程修改dom的内容；另一个线程也改了dom内容，那么到底怎么显示呢；为了避免这种复杂的问题，JS就是单线程（多线程的复杂性，多线程操作需要加锁，编码的复杂性会增高。而且，如果同时操作 DOM ，在多线程不加锁的情况下，最终会导致 DOM 渲染的结果不可预期）
2023-06-03 14:37:48
559
1
原创 浏览器渲染原理
当你在地址栏输入内容回车后，浏览器进程中的UI线程会捕捉输入内容，如果访问的是网址，会启动一个网络线程来进行DNS解析；后面连接服务器获取数据；如果输入的不是网址而是关键词，就会使用默认配置的搜索引擎来进行查询网络进程获取到数据后会使用safeBrowsing检查站点是否是恶意站点，如果是恶意站点则会提醒，阻止访问，当然你也可以强行访问（safeBrowsing是谷歌内部安全系统，比如检查数据来源ip是不是在谷歌黑名单内）
2023-06-03 14:22:43
391
原创 长列表处理
有时接口返回数据量多，dom过多，渲染时间长；在浏览器渲染页面的时候，当DOM节点的数量越多，重绘的时候，对性能的影响也大；常见场景：列表，订单、评论等。
2023-05-07 21:38:53
414
1
原创 MVVM与Vue响应式的实现
M：模型 ==》data中的数据V：视图 ==》模板VM：视图模型 ==》Vue实例对象ViewModel是一个中间的桥梁将视图View与模型Model连接起来，ViewModel内部通过数据绑定，实现数据变化，视图发生更新变化，通过数据劫持实现的数据绑定；通过dom监听，实现事件触发,调用对应的回调函数，比如更新数据（数据变化了，视图就会更新–数据绑定）Vue 的设计也受到了MVVM的启发，View对应的是dom，它的ViewModel对应的式Vue实例，,Model对应的是data对象；通过数据劫持来实
2022-12-04 21:56:08
434
原创 break、continue、return的使用与区别
break和continue都是用来控制循环结构的，主要作用是停止循环它俩的区别：1》break是跳出整个循环，continue是跳出当前循环，继续进行下一个循环2》continue语句只用在for、while、do-while等循环体中, 常与if条件语句一起使用, 用来加速循环；break还可以在switch分支语句中使用，遇到break,就会跳出switch语句函数中使用，函数遇到return就会立即停止执行并退出；后面可以跟函数的返回值，如果不跟就返回undefined；
2022-11-17 22:49:24
3436
1
原创 浏览器缓存--cookie、sessionStorage、localStorage、indexedDB
cookie、sessionStorage、localStorage的特点及基本使用，它们之间的区别
2022-11-14 22:51:55
1474
原创 vue目录树的封装
vue树形组件的封装，只有一级的目录树，单选或多选的封装；每一级都可以选的目录树的封装，使用的是递归的思想；封装过程中遇到的一些问题及解决方案
2022-11-13 21:15:54
1064
原创 vuex的基本使用
什么时候使用Vuex：1）中大型单页应用，需要进行统一的状态管理，这个时候就可以考虑使用Vuex;2）组件之间共享的数据特点：响应式：数据改变的话，页面所有的地方都会改变；同一个vue实例，不同组件之间都共享同步存在内存：刷新就会丢失。
2022-11-09 23:22:01
93
原创 vue生命周期
vue的生命周期，生命钩子的执行顺序，父子组件生命钩子函数的执行先后顺序；各个钩子函数中能干什么，有什么是不能做的；keep-alive与生命钩子函数；this.$nextTick的作用；生命钩子与请求
2022-10-30 22:40:35
1236
原创 总结一下flex布局
的传统布局方案是基于盒状模型，依赖display+position+float方式来实现，灵活性较差；Flex是Flexible Box的缩写，意为”弹性布局”。Flex可以简便、完整、响应式地实现多种页面布局CSS3 弹性盒子是一种一维的布局，因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列弹性布局；通过给父盒子添加flex属性，来控制盒子的位置和排列方式父项属性用于整体的布局；子项属性用于实现子项的差异化，内部调整。
2022-10-23 17:36:11
2877
1
原创 webpack5在vue2中的实际使用
webpack5在vue2中的使用，基本配置；webpack的基本流程，webpack的基本概念及配置项，entry、mode、output、loader、plugin等；如何配置基本webpack.config.js来打包的vue单页面和多页面，脚本与环境变量的基本配置
2022-10-10 22:39:42
1962
原创 v-model
vue2和vue3中v-model的使用与变化；vue中怎么实现父组件与子组件的双向数据绑定；v-model事项双向数据绑定的基本原理；v-model不仅可以在input中使用，还可以在自定义组件中使用
2022-09-20 20:55:38
400
原创 async-await与try-catch
表示函数里有异步操作，async函数可以理解多个异步操作包装成的promise对象返回值：promise对象函数add的返回值会成为then中回调函数的参数，如果add函数内部有错误或主动抛出错误，返回的 promise会是rejected状态，会被catch接收到作用：1》一是作为求值关键字；.then的语法糖,可以拿到promise的结果2》二是将异步操作变成同步操作；await后面的代码执行时机一定是在await之后；try、catch只能捕获同步错误，那么怎么捕获promise中的错误呢
2022-09-18 16:09:14
3906
原创 promise相关知识，看看你都会了吗
工作中经常用到promise,那么promise知识点，你都会了吗，欢迎来挑战本文最后的测试题；es6中的promise;到底怎么理解；为什么要用promise,他有什么好处呢？promise的基本语法，异步执行的顺序
2022-09-10 22:34:43
254
1
原创 xss攻击与csrf攻击
跨站请求伪造 （Cross-site request forgery），攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。
2022-09-05 22:28:04
338
原创 适配与视口、分辨率、媒体查询、缩放的学习、消化
从分辨率、css像素到视口的学习，视口的分类，布局视口、视觉视口、完美视口的学习；分析浏览器的缩放以及窗口的变化对分辨率以及视口的影响；从媒体查询学习到适配的方案；
2022-08-13 23:30:27
718
原创 HTML5提供的文件API
fileList对象表示用户选择的文件列表，每个文件都是一个file对象通过multiple属性，file控件允许一次放置多个文件。
2022-08-11 21:49:39
283
原创 3种实现文本复制功能的方法
navigator.clipboard.writeText()将指定字符串写入剪切板中，返回一个promise对象。如果是input的话可以用，普通的元素不能用，而且select会选中内容，有选中的效果。只有在用户事先授予网站或应用对剪切板的访问许可之后，才能使用异步剪切板读写方法。本地没问题，但是当嵌入到iframe中，复制直接报错了；往输入框内输入内容后点击复制，就可以复制了。给iframe添加allow属性。这种方法不建议使用，已过时。......
2022-07-28 22:42:23
918
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人