- 博客(16)
- 收藏
- 关注
RSS订阅原创 【 vue3源码解析】
起因：一个遇到的问题–使用reactive定义数组对象类型，传[]时无法触发响应式解决方案: 1. 可以使用对象包裹数组，使其成为对象的一个属性，就不影响后续的赋值2. 改为ref定义3. 使用数组的push方法，不使用=直接赋值，使用push这个问题引发了思考，为什么reactive定义的需要这样处理，它的内部是如何实现的？带着这些问题，我clone了vue的源码去查看。
2023-05-16 14:54:50
343
原创 swiper使用
Swiper 的基础使用方法和常用配置项。在实际项目中，还可以根据需要进行更多的自定义修改和调整。如果您想了解更多关于 Swiper 的具体用法，请参考官方文档或者相关教程。
2023-04-04 13:38:04
820
原创 Vue.js3项目中使用commitlint、stylelint
commitlint用于规范Git提交信息的格式，可以提高协作开发的效率和代码质量；这样，在每次Git提交事件触发时，commitlint会自动检测提交信息的格式，并提供反馈。在Vue.js3项目中，我们可以使用commitlint来规范Git提交信息的格式。在Vue.js3项目中，我们可以使用stylelint来规范CSS代码的风格和格式。在遵循stylelint规则的前提下，我们可以编写出更加规范、清晰的CSS代码。则是Git Hook工具，用于监听Git提交事件，并在事件触发时执行相关脚本。
2023-03-28 10:35:49
446
原创 手把手教你引入jsdoc
在项目的根目录就会生成docs文件夹，用浏览器打开index.html即可。在package.json文件中 devDependencies添加依赖。jsdoc对于.vue的文件无法支持，所以选用jsdoc-vue。在项目的根目录下添加。项目中可使用生成文档。
2023-03-15 15:46:34
977
1原创 前端性能优化
传统的做法中，需要使用scroll事件，并调用getBoundingClientRect方法，来实现可视区域的判断，即使使用了函数节流，也会造成页面回流。在安卓下可以使用webp格式的图片，它具有更优的图像数据压缩算法，能带来更小的图片体积，同等画面质量下，体积比jpg、png少了25%以上，而且同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性。CSS雪碧图是以前非常流行的技术，把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。
2023-02-15 11:32:02
269
原创 关于内存分区
内存是存储数据的，不同类型的数据要存储在不同的区域，即分类存放，不同的区域作用和功能也不一样。1）、存放数据：常量区存放常量，代码区存放程序的代码（程序运行时是需要载入到内存中允许的）读取速度快，存储和释放的思路是按照数据结构中的栈进行的，存数据就是压栈，释放就是弹栈。内存分为四个区域：栈区（堆栈），堆区，全局静态区，只读区（常量区和代码区）。空间小，基本类型的数据占用空间的大小不会随着值的改变而改变，而且占用空间小。空间大：引用类型的数据大小是动态的，会随着数据的增加而改变大小。
2023-02-15 11:15:57
393
原创 less的学习和使用(二)
less的学习和使用Less的二更AST（抽象语法树）Less的二更上次学习了一些Less的一些比较基础的用法，这次想尝试着探究一下Less是如何完成编译的。less中文less 是预编译处理器，会在编译前进行处理成css。那它是如何完成编译与处理的，过程是怎样的呢？AST（抽象语法树）说到编译处理，就不得不提AST。抽象语法树（abstract syntax code，AST）是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构，这所以说是抽象的，是因为抽象语法树并不会
2020-09-03 16:13:43
329
原创 Less的学习和使用（一）
less的学习和使用Less是什么？如何在项目中使用Less最近由于项目组没有具体的前端规范，自觉协同开发或者修改他人的代码阻碍过大。。便向老大申请了制定一个规范的权限。除了一些代码规范，我还努力的想推进组内同学一起使用less，来提高大家的代码风格。借此机会，自己也学习了更多less的内容并分享给大家。Less是什么？惯例，先问是什么。Less是一种预处理语言。相似的还有Sass，Stylus在这里不做探讨。为什么选择LessLess和其他的预处理语言相比来说功能是要少一些的，所以相应的更容
2020-07-02 16:48:28
365
原创 H5页面控制台之vconsole
H5页面控制台之vconsolevconsole是干什么的？vconsole怎么接入？调试vconsole是干什么的？最近在写一个app端的内嵌H5项目，端内也没有扫一扫的功能，调试起来非常的麻烦。当出现问题的时候，无法查看日志，还不能快准狠的定位到问题所在。然后我就接入了vconsole，这是一个移动端调试的神器。这样项目放到app里面了也可以用控制台进行调试。vconsole怎么接入？<script src="./static/js/vconsole.min.js"></sc
2020-06-03 14:33:45
4165
原创 vue源码的学习------diff算法
关于vue源码的学习------diff算法使用vue来写代码也很久了，也需要适当的深入学习以下源码和设计思想，今天是我学习源码的部分，我们从以下的几个方面来一起学习1、一些需要思考的问题2、分析 Diff 源码比较步骤3、通过例子，来看Diff 运行的流程4、diff的作用和优缺点1.学习之前我们需要看几个问题Q&S virtual DOM和真实DOM的区别？vi...
2020-04-08 11:37:28
561
原创 关于动画animation那点事儿
初学animation什么是animation？animation是css3中新增的一个属性，可以定义元素的动态效果有哪些具体属性CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-...
2020-04-08 10:47:26
358
原创 关于H5项目safari高度适配的问题
safari中高度不是100%问题解决方案判断safari浏览器打开为什么Chrome有Safari字段？其他的浏览器也有吗？问题最近再写H5的项目，由于H5的项目以前接触较少，这次也是遇到了一些的问题我在项目中设置了HTML，body高度100%然后具体的盒子设置了width:100vw;height:100vh;然后从微信和app中打开是没有问题的，高度可以撑满屏幕，但是通过s...
2020-01-17 15:35:07
4903
原创 BFC学习
BFC学习什么是BFCCSS中的三种布局模型BFC形成BFC的条件BFC的效果BFC常见作用什么是BFCBFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。CSS中的三种布局模型CSS中的三种布局模型：流动模型（Flow）在常规流中，盒一个接着一...
2019-09-16 14:59:52
248
原创 获取元素的几种方法
获取元素的几种方法1.根据ID获取元素2.根据标签名获取元素3.根据类名获取元素4.根据元素的层级关系来获取元素5.H5新增方法（有兼容问题）1.根据ID获取元素document.getElementById('id');2.根据标签名获取元素document.getElementByTagName('标签名');3.根据类名获取元素document.getElementByCla...
2019-04-12 21:12:17
686
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人