- 博客(162)
- 收藏
- 关注
RSS订阅
原创 源码的角度分析Vue2数据双向绑定原理
我们都知道Vue是数据双向绑定的框架，双向绑定由三个重要部分组成Model：应用数据以及业务逻辑View：应用视图，各类UI组件ViewModel：框架封装的核心，它负责将数据与视图关联起来上面这个分层的架构方案，即是我们经常耳熟能详的MVVM，他的控制层的核心功能便是“数据双向绑定”
2024-02-29 18:44:25
1098
原创 H5控制设备以及数据回显方案设计(物联网）
我们都知道，我们当前开发的模式是使用Hybird App即原生+H5开发模式。H5在开发相关得设备页面的时候，关于对设备的控制数据的流向，往往只需要关注上述图中原生IOS | Android 实时监控数据，然后根据指定的协议向H5转发的过程，最后H5在设计相关的程序实现数据更新与否的一个回显问题。上述数据的流向有时并不是顺通无阻的，可能会因为网络问题，设备恢复延时又或者某一端的程序有问题导致数据不能正常按上述流程走。客户端作为用户体验最密切的一段，即不管是原生还是H5都需要对这个异常情况进行处理。
2024-02-26 14:22:07
130
原创 Vue+H5如何适配各个移动端？
我们都知道，在做移动端的项目的时候，我们最首先的是要指定适配各种机型的方案，让一套代码能够在不同分辨率的机型下顺应自如。，相信你看完之后将会有很多收货！然后这篇文章主要是讲讲在实际运用上，且也是我在项目中使用的一种适配方案，感兴趣的小伙伴继续看下去吧~ps：若本文有写错或者遗漏的地方还望大家能够底下评论或者私信我，我们一起交流~
2023-04-05 12:00:02
4126
原创 Canvas 圆环滑动控件实现原理解析
📐 支持设定起始和结束角度，适配任意弧形范围🎨 支持颜色渐变，滑块样式、圆形线带完全可配置👆 支持鼠标与触控拖动、点击设置📈 支持实时回调、动态设置值📦 使用class封装，易于复用和扩展引入使用<template><TempArc/></div><script>...data() {return {maxVal: 60, // 最大湿度minVal: 0, // 最小湿度stepSizeVal: 1, //步长。
2025-05-15 19:36:46
1018
原创 React-Native与WebView通信运用总结
最近一直在写RN的项目，该项目是一个移动端的项目，主要用来对设备进行控制和设置。其中有个模块涉及到使用WebView的方式嵌入H5页面，那么就需要熟悉RN与H5之间的通信。其实在此之前，我一直接触的是Hybrid APP的方式开发app，其中的基本框架也是原生使用webview的方式嵌入我们所写的前端H5页面。Hybrid App（原生+H5）开发-CSDN博客。这篇文章，我主要是对这次项目使用RN与WebView通信的总结。
2025-04-14 10:49:31
1115
原创 Vue3+TS项目---实用的复杂类型定义总结
使用namespace关键字定义一个命名空间，并在其中包含类、接口、函数等等。以下举例是我在项目中定义得接口参数类型，因为我得接口参数类型是放在一个文件中进行维护得，所以难免会出现相同参数名不同类型得情况出现。所以这里可以使用namaspace来定义不同模块下得接口参数类型。} & T;这段代码定义了一个泛型类型emailToken，它由一个对象组成，包含一个名为email的字符串属性，并且可以通过泛型参数T扩展。T默认是any类型。
2024-10-17 19:42:46
1256
原创 阮一峰《TypeScript教程》系列之-----一文搞懂d.ts类型声明文件以及项目中如何定义类型文件
单独使用的模块，一般会同时提供一个单独的类型声明文件（declaration file），把本模块的外部接口的所有类型都写在这个文件里面，便于模块使用者了解接口，也便于编译器检查使用者的用法是否正确。类型声明文件里面只有类型代码，没有具体的代码实现。它的文件名一般为的形式，其中d表示declaration（声明）类型声明文件也可以使用export = 命令，输出对外的接口。下面是moment模块的类型声明文件的例子。上面示例中，模块moment内部有一个函数moment()，而export =
2024-09-24 17:39:56
2181
原创 Web Worker 使用教程
JavaScript语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没有做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核CPU的出现，单线程带来了很大的不便，无法充分发挥计算机的能力。Web Worker的作用，就是为JavaScript创造多线程环境，允许主线程创建Worker线程，将一些任务分配给后者运行。在主线程运行的同时，Worker线程在后台运行，两者互不干扰。等到Worker线程完成计算任务，再把结果返回给主线程。
2024-09-24 09:53:02
1661
原创 神奇的css动画：animation、transform、transition
动画包括两个部分：描述动画的样式和用于指定动画开始、结束以及中间点样式的关键帧。相比较于传统的脚本实现动画技术，使用css动画三个主要优点:1.能够非常容易创建简单动画，甚至不需要了解JavaScript就能创建动画2.动画运行效果良好，甚至在低性能的系统上，渲染引擎会使用跳帧或者其他技术以保证动画尽可能的流畅。而是用Javascipt实现的动画通常表现不佳（除非经过很好的设计）3.让浏览器控制动画序列，允许浏览器优化性能和效果，如降低隐藏选项卡的动画更新频率。
2024-09-20 17:23:14
1781
原创 EventBus事件总线的理解与运用
监听事件：使用$on方法来监听事件。触发事件：使用$emit方法来触发事件。移除事件监听：使用$off方法来移除特定的事件监听。本文主要从组件通信入手，分析EventBus的一个工作原理，并且举例说明如何在非父子组件或者层级较远的组件中，如何初始化、如何通过$emit注册事件、$on监听事件。同时也了解到EventBus 是一个轻量级的事件通信工具，适用于 Vue 应用中的简单通信需求。然而，随着应用的复杂性增加，可能需要更健壮的状态管理解决方案。
2024-09-04 16:32:49
1540
原创 一次性搞懂异步编程
异步编程是一种处理并发操作的方法，使得程序可以在等待耗时操作（如文件读写、网络请求或数据库查询），完成的同时继续执行其他任务。与同步编程不同，异步编程不要求程序按顺序等待每个操作完成，而是通过回调、Promise或者async/await等机制，在操作完成时再执行特定的逻辑。通俗的讲，异步编程即是允许我们在执行一个长时间的任务时，程序不需要等待，而是继续执行之后的代码，知道这些任务完成之后再回来通知你，通常是以回调函数(callback)的方式。这种编程模式避免了程序的堵塞，大大提高了cpu的执行效率。
2024-09-01 16:32:23
4024
原创 如何在vue3+vite中优雅的使用iconify图标
1.在src/assets目录下新增svg/目录（这步可以按照自身习惯），我们可以按照iconify的方式，按照模块在svg/下建不同的文件夹，这些文件夹用来存放我们自定义的svg图标文件。上面是我建立的几个目录，接下来我们来配置自定义图标的加载。优点：1.配置简单，使用方便，大量的图标可供选中2.使用的svg方式，体积小缺点：1.在.vue文件中可以很舒服的使用，但是在js、ts文件例如我们定义的路由菜单栏图标，不能实现自动引入，只能使用import的方式使用，目前我也还没想到比较好的的方式。
2024-04-26 16:13:10
10915
原创 如何封装Vue组件并上传到npm
该文组件封装的方式其实是打包发布的方式，这种方式是将装好的组件最终打包成一个或者多个js文件发布。这种方式使得开发和调试时更接近于一个前端项目。但是一旦引入图片等静态资源需要同个BASE64的方式打包到js，而对于字体一类较大的静态资源则根本无法引用适用范围：没有或极少的依赖第三方插件、图片的组件的封装或JS方法的封装打包发布非打包发布webpack需要配置无需配置发布发布前需要打包发布前无需打包引用静态文件较小的图片可以通过BASE64方式打包仅js文件随意使用引用第三方依赖。
2024-04-18 16:28:43
2433
原创 JavaScript中的继承方式详细解析
继承是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A，那么就可以把这个B称为A的子类，而把A称为B的父类，也可以称为A是B的超类。继承的优点：继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码，在子类别继承父类的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获取与父类不同的功能。虽然JavaScript并不是真正的面向对象语言，但是它天生的灵活性，使应用场景更加丰富。
2024-03-18 16:25:07
1041
原创 mavon-editor实现支持md格式输入并自定义工具栏
起源于我在做机器人报警推送的一个模块时，涉及到可以自定义报警的内容，其中内容支持md格式，同时还支持用户在指定光标处插入指定的字符串占位符。于是我在项目中引入mavon-editor库(支持Vue2、Vue3)，以支持用户输入md格式。然后接下来我讲到的是我用到的。
2024-03-12 11:33:11
1647
原创 关于我在项目中封装的一些自定义指令
在Vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统。我们看到的v-来头的行内属性，都是指令，不同的指令可以完成或者实现不同的功能。除了核心功能默认内置的指令（v-model和v-show），Vue也允许注册自定义指令。
2024-03-06 21:37:01
1093
1
原创 动态给vue的data添加新属性页面不更新的原因分析以及解决方法
我们从一个例子触发定义一个p标签，通过v-for指令进行遍历，然后通过绑定事件，触发事件的时候，将动态添加哟个属性。预期结果：动态增加的属性也被遍历显示在页面上实力化一个vue实力，定义data属性喝methods方法点击按钮，发现结果不及预期，数据虽然也更新了(console打印出了新属性），但是页面并没有更新。
2024-02-28 19:37:11
952
原创 SPA首屏加载速度慢的怎么解决？
首屏时间，指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视图需要的内容。首屏加载可以说是用户体验中最重要的环节。
2024-02-28 19:11:15
1080
原创 Vant轮播多个div结合二维数组的运用
在开发H5的时候，结合Vant组件的轮播组件Swipe实现如下功能。这里的需求是要实现每屏展示多张图片或者说多个div卡片，那么这个时候就要考虑到多维数组嵌套循环，也就是两层循环。
2024-02-22 11:21:30
942
原创 前端下载文件流，设置返回值类型responseType:‘blob‘无效的问题
本是一个非常简单的请求，即是下载文件。通常的做法如下：1.前端通过Vue Axios向后端请求，同时在请求中设置响应体为Blob格式。2.后端相应前端的请求，同时返回Blob格式的文件给到前端（如果没有步骤1设置响应体，则后端返回的是一个文件流，前端）3.前端创建a标签进行下载如果后端返回的是文件的地址，那么前端可以直接通过加文件路径即可下载文件。但是如果后台返回的是文件流，那么前端就需要做一些处理。处理的核心也是将文件流转成文件，然后使用a标签模拟点击下载。
2024-01-16 10:52:02
6868
5
原创 关于Vue中computed属性中传递参数
computed是Vue实例中一个非常强大的计算属性，它的值主要根据依赖数据而变化。我们可以将一些简单的计算放在computed属性中，从而实现在模板中使用简单的表达式。但是实际项目中通常有这么一个场景：根据传递不一样的参数值经过不同的计算得到不一样的结果。虽然这种场景我们使用吗，methods同样可以实现效果，但是我们知道，计算属性computed是基于它们的 响应式依赖进行缓存的。只有在相关响应式依赖发生改变时它们才会出重新计算。
2023-11-19 17:58:08
2240
原创 a标签下载文件与解决浏览器默认打开某些格式文件的问题
a>元素（或称锚元素），可以通过它的href属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或者其他URL的超链接。
2023-11-19 17:21:33
2271
原创 Hybrid App（原生+H5）开发
国内推出的JavaScript bridge跨平台混合开发框架官方提供了Android/ios版本，真正实现跨平台DSBridge支持同步及异步调用（DSbridge是唯一一个支持同步调用的javascript bridge）无需iFrame，性能好Github地址混合开发的一个主要流程：1.根据需求规划，哪些业务是H5负责，哪些是原生端负责2.定制一份约束双端的协议以用来对应方法的一一对应性（什么方法做什么事，参数、方法名、同步异步）
2023-11-04 22:24:51
3419
原创 《TypeScript》系列之对比JavaScript，TypeScript的优势
TypeScript是微软公司开发的一种基于JavaScript语言的编程语言，它的目的并不是创造一种全新的语言，而是增强JavaScript的功能，使其更适合多人合作的企业级项目。TypeScript可以看做是JavaScript的超集，即它继承了后者的全部语法，所有的JavaScript脚本都可以当做TypeScript脚本（有可能报错），此外它再增加了一些自己的语法。TypeScript对JavaScript添加的最主要部分，就是一个独立的类型系统。
2023-10-15 17:56:12
350
原创 Node.js初体验
fs模块是node.js官方提供的，用来操作文件的模块，它提供了一系列的方法和属性，来满足用户对文件的操作需求例如：1.fs.readFile()方法，用来读取指定文件的内容2.fs.writeFile()方法，用来向指定文件中写入内容如果要在JavaScript代码中，使用fs模块来操作文件，则需要使用如下的方式先导入它：疑问：只要我们安装了node.js，那么这边fs模块就是内置的，可以直接引入使用。
2023-10-15 16:01:26
717
原创 关于Vue+webpack之H5打包优化，说说我的一些心得体会
基于公司的业务以及今年接触到的项目大部分都是APP混合开发，即原生Android/ios +H5页面开发APP。项目从产品需求的评审到方案的评审再到开发提测...这一套流程下来让我收货颇多。总想找个时间好好记录一番，大概还是自己懒惰了，一直拖到现在。想记录的东西太多了，一次讲完也没有突出的重点，我今天最想记录的是关于H5资源打包优化的问题。以前常常看到一些大V长篇大论的在讲各种优化问题，自己没有真正动手去实践过的话也不明所以，也不明白优化的重要性。
2023-10-15 12:39:11
1383
原创 谈谈前端的本地存储indexedDB
IndexedDB 是一个用于在浏览器中存储大量数据结构的Web API，是浏览器提供的本地数据库，可以被网页脚本创建和操作，允许存储大量数据，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象），提供查找接口，能建立索引。且IndexedDB 不同于其他SQL的关系型数据库，IndexedDB 是一个事务型的数据库系统，会将数据集作为个体对象存储，数据形式使用的是JSON，而不是列数固定的表格来存储数据的。
2023-09-13 18:01:24
2085
原创 ES6中Null判断运算符(??)正确打开方式-
上面的代码中，如果response.setting时null或者undefined，或者response.setting.value是null或者undefined，就会返回默认值300。上面的三行代码都是通过||运算符指定默认值，但是这样写是错的。我们这样写的意愿一般是，只要属性的值为null或者undefined，默认值就会生效。读取对象属性的时候，如果某个属性的值是null或者undefined，有时候需要为它们指定默认值。现在的规则是，如果多个运算符一起使用，必须用括号表明优先级，否则会报错。
2023-08-09 17:28:49
1043
原创 ES6链判断运算符(?.)的正确打开方式
在实际应用中，如果读取对象内部 的某个属性，往往需要判断一下，属性的上层对象是否存在。上面的代码中，iterator.return如果有定义，就会调用该方法，否则iterator.return直接返回undefined，不再执行?上面代码中，字符串match()方法，如果没有发现匹配会返回null，如果发现匹配会返回一个数组，?上面的例子，firstName属性在对象的第四层，所以需要判断四次，每一层是否有值。，如果是的，就不再往下运算，而是返回undefined。运算符，直接在链式调用的时候判断，
2023-08-08 23:17:53
1175
原创 JS中常用的数组拷贝技巧
我们都知道，数组也是属于对象，在JS中对象的存储方式则是引用的方式。我们想要拷贝一个数组，就不能只是变量之前的赋值拷贝，这样他们将共享同一个引用，而数组又具有可变性，所以无法将原数组和拷贝的数组的数据分隔开。那么接下来将介绍如何对数据进行深层拷贝，使得原数组和拷贝数组的数据分隔开来。
2023-08-06 16:00:58
1782
原创 箭头函数中的this指向以及不适用箭头函数的场景
lives:9,上面代码中，cat.jumps()方法是一个箭头函数，这是错误的。调用cat.jumps()时，如果是普通函数，该方法内部的this指向cat；如果写成上面这样的箭头函数，使得this指向全局对象，因此不会得到预期结果。这是因为对象不够称单独的作用域，导致jumps箭头函数定义时的作用域就是全局作用域。再看一个例子a:23,m:()=>{obj.m()上面例子中，obj.m()使用箭头函数定义。
2023-07-24 22:24:30
308
原创 qs库的使用
qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，或者反过来可以将一个查询字符串解析成一个object，而且支持复杂的嵌套。在工作中，最经常使用qs的地方就是请求参数格式转换的时候，但是有次偶然发现，qs其实是一个很好用的库。在对一些数据的处理上，使用原生js可能会比较麻烦，但是在qs中已经封装了很多好用的方法。接着往下看吧~让我们在数据处理上，游刃有余~
2023-07-22 15:46:40
590
原创 Vue+Vant封装通用模态框单选框组件
title：标题showList：展示列表的数据actionVal：当前列表数据中被选中的值dialogType：弹框的类型（0-列表 文字 图标；1-列表 文字 radio；2-自动以内容）onlyCancel：是否只显示取消按钮，true只显示取消按钮，false：既显示取消按钮，又显示确定按钮。因为有些是需要点击单选框某项之后直接关闭模态框触发回传事件，有些是需要点击确定按钮再触发，所以这里做了一个区分。
2023-04-22 22:00:32
3410
原创 Vue-cli脚手架在做些什么（源码角度分析）
什么是Vue脚手架？在学习初期，我们的项目往往需要借助webpack、vite等打包工具配置Vue的开发环境，但是在真实开发中我们不可能每个项目从头来完成所有的webpack配置，这样显得开发的效率会大大的降低；所有的真实开发中，我们通常会使用脚手架来创建一个项目，Vue项目我们使用的是Vue脚手架Vue cli已经内置了webpack相关的配置，我们不需要从零来配置
2023-02-24 16:11:34
585
原创 从Vue2到Vue3，Vue3变了什么？
1 setup函数1.1 参数 setup(props,context)• props：父组件传递过来的属性• context：SetupContext，即是setup函数的上下文1.1.1 参数1 props如果想在setup函数中使用父组件传递过来的props，则是通过props这个参数获得。在Vue2中我们是可以同个this.props的形式获取props，但是在Vue3之后setup函数中不允许使用this，当然还有一个注意点是，你再setup函数接收父组件传递的props参数，但是在se
2023-01-07 17:50:47
1066
原创 Vue+iview将表格table以excel文件导出的几种方式
前言在日常工作中，若是经常跟后台管理系统打交道的朋友想必对导出excel表格这种需求肯定很熟悉吧。不过我也问了身边的一些岗位为后端工程师的朋友，他们说在公司的话一般导出excel表格的工作一般由后端来做，前端只需要调用接口即可。我的话，由前端导出或者后端导出的两种方式我都有做过，以此想记录一下，总结一下我是如何针对不同的方式将表格数据以excel的格式导出的。同时呢，若文章中有不足的地方，也欢迎大家的指正，相互学习~后端导出如果你在工作中，导出excel表格这个工作主要放在后端的话，那么就会比较简单
2022-11-26 17:31:09
5902
原创 Vue中使用v-if多次切换相同模板问题
问题描述下面是使用两个相同结构的表单来记录不同角色的登录信息，这里首先使用了v-if进行切换，当条件为true的时候显示第一个表单，当条件为false的时候显示第二个表单，但是这也就暴露除了问题所在。我在第一个表单进行操作的时候，填入错误的信息的时候，这时候表单会出现校验不通过的错误提示吗，而我切换到第二个表单的时候，却发现第一个表单的错误提示自上而下的出现在我没有操作过的第二个表单上。
2022-11-20 19:00:49
1041
原创 一文搞懂《前后端动态路由权限》--后台控制篇
前言 本文主要针对后台管理系统的权限问题，即不同权限对应着不同的路由，同时侧边栏的路由也需要根据权限的不同异步生成。我们知道，权限那肯定是对应用户的，那么就会涉及到用户登录模块，所以这里也简单说一下实现登录的和权限验证的思路。登录：当用户填写完账号和密码后向服务器验证是否正确，验证通过后服务端会返回一个token，拿到token之后，前端则会将token保存到本地并且保存到Vuex中(持久化，防止刷新丢失；另外你也可以保存到cookie中，用于记住用户的登录状态），接着前端会根据toke
2022-11-20 16:58:18
1827
原创 冒泡事件在Vue中的应用
什么是事件冒泡？一想到“冒泡”这两个词会想到什么？想必然，那就是气泡自下而上的从水底往上生的场景，但是我们也知道，水在往上升的过程中，也会经历不同的高度。由此场景，那么想必然，冒泡的原理就可以很轻易的被理解啦。我们知道，我们平时缩写的所看到的页面，都是由文档流即DOM树组成的，那么当我们在一个时间出发某个时间的时候，这个事件就会像这个气泡一样，从DOM树的底层，逐步向上传递，一直到DOM的根节点。当然，这事件冒泡的过程中，需要注意的一个点事，只有子元素和父级元素都有绑定
2022-11-19 13:50:23
3783
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人