- 博客(95)
- 收藏
- 关注
RSS订阅原创 两天实现思维导图的协同编辑？用Yjs真的可以
本文详细介绍了我是如何使用Yjs给一个思维导图加上协同编辑的能力，可以看到使用Yjs实现协同编辑整体逻辑是非常简单清晰的，对于原有代码逻辑的入侵也非常小，只要做一下数据结构的转换工作和感知数据的渲染即可，所以Yjs非常适合个人开发者或小团队。当然以上只是个人的最简单实践，可能会存在一些问题，日后如果遇到了再来分享。。
2023-11-04 10:57:19
464
原创 dom-to-image库是如何将html转换成图片的
本文通过源码详细介绍了的原理，核心就是克隆节点和节点样式，内联字体、背景图片、图片，然后通过svg的标签嵌入克隆后的节点，最后将svg转换成图片，图片绘制到canvas上进行导出。可以看到源码中大量的Promise，很多不是异步的逻辑也会通过then方法来进行管道式调用，大部分情况会让代码很清晰，一眼就知道大概做了什么事情，但是部分地方串联了太长，反倒不太容易理解。限于篇幅，源码中其实还要很多有意思的细节没有介绍，比如为了修改iframe的DOCTYPE和charset。
2023-10-09 21:05:29
1518
原创 探索如何将html和svg导出为图片
虽然笔者的实现很简单，但是这个库实际上有一千多行代码，那么它到底多做了些什么呢，点个关注，我们下一篇文章再见。
2023-09-10 22:16:22
565
原创 我开源了一个思维导图
在线地址：https://wanglin2.github.io/mind-map/#/index仓库地址：https://github.com/wanglin2/mind-map。
2023-07-22 15:09:18
338
1
原创 利用这个css属性，你也能轻松实现一个新手引导库
相信大家或多或少都在各种网站上使用过新手引导，当网站提供的功能有点复杂时，这是一个对新手非常友好的功能，可以跟随新手引导一步一步了解网站的各种功能，我们要做的只是点击下一步或者上一步，网站就能滚动到指定位置，然后高亮页面的一部分，并且配以一些图文介绍。目前有很多帮你实现这种功能的开源库，当然，自己实现一个也不难，而且核心就是一个简单的css样式，不信你接着往下看。
2023-07-02 20:20:04
221
原创 一起来做一个json格式化工具吧
本文从头实现了一个简单的json格式化工具，如果有更好的实现欢迎评论区见。这个小工具也发布到了npm。。有缘再会~
2023-06-26 22:24:08
2391
原创 如何用canvas实现一个富文本编辑器
到这里我们实现了一个类似Word的富文本编辑器，支持文字的编辑，支持有限的文字样式，支持光标，支持选区，当然，这是最基本最基本的功能，随便想想就知道还有很多功能没实现，比如复制、粘贴、方向键切换光标位置、拖拽选区到其他位置、前进后退等，以及支持图片、表格、链接、代码块等文本之外的元素，所以想要实现一个完整可用的富文本是非常复杂的，要考虑的问题非常多。。。
2023-06-24 17:34:08
2763
1
原创 一文看完Vue3的渲染过程
拦截数据，然后在属性读取时将属性和读取该属性的函数（称为副作用函数）关联起来，然后在更新该属性时取出该属性关联的副作用函数出来执行，详细的内容网上已经有非常多的文章了，有兴趣的可以自己搜一搜，或者直接看源码也是可以的。函数会作为副作用函数执行，也就是如果在模板中使用到了响应式数据（所谓响应式数据就是能拦截到它的各种读取、修改操作），那么响应式数据和属性会与。的类型不同做的处理也不同，因为我们的例子传的是一个组件选项对象，所以会走。组件无论是首次挂载，还是更新，做的事情核心是一样的，先调用。
2023-06-18 09:23:24
2044
1
原创 用flex布局实现一个流程设计器
因为组件树层级比较深，所以通过slot自定义节点内容不是很方便，所以我选择了一个比较low的方式，即将节点内容单独抽成一个组件，然后在注册组件的时候提供选项配置，那么如果想自定义节点内容，很简单，不要使用内置的节点内容组件，自行编写并注册一个即可，使用约定的组件名称就可以了。}) {// 需要自定义节点内容时通过选项参数指定不要注册内置节点内容组件即可 if(!} };install };同样添加节点悬浮面板也可以通过这种方式自定义。本文详细的介绍了一下如何使用flex。
2023-06-15 19:49:12
463
原创 为什么面试官这么爱问性能优化？
思维导图场景，大部分情况下操作的其实就是其中一个或部分节点，所以不需要重新删除创建所有元素，那么就可以通过节点复用的方式来优化，将真实节点缓存起来，渲染时通过数据唯一的id来检查是否存在可复用节点，如果没有，那么代表是新增节点，那么创建新节点即可；有时会感慨时间过的真快，一转眼，作为一个前端已经工作了六年，即将三十而立却立不起来，这么多年的工作，更多的只是收获了六年的经历，但是并没有六年的能力，回过头看，当初的有些选择确实是错误的，也许这就是人生把。算法对比来找出最小的更新部分，但是我没有做。
2023-06-01 22:40:26
203
原创 我的第一个Electron应用
最近的面试中有一个面试官问我按钮级别的权限怎么控制，我说直接v-if啊，他说不够好，我说我们项目中按钮级别的权限控制情况不多，所以v-if就够了，他说不够通用，最后他对我的评价是做过很多东西，但是都不够深入，好吧，那今天我们就来深入深入。因为我自己没有相关实践，所以接下来就从这个有16.2k星星的后台管理系统项目中看看它是如何做的。
2023-05-14 22:03:15
714
1
原创 面试官问我按钮级别权限怎么控制，我说v-if，面试官说再见
最近的面试中有一个面试官问我按钮级别的权限怎么控制，我说直接v-if啊，他说不够好，我说我们项目中按钮级别的权限控制情况不多，所以v-if就够了，他说不够通用，最后他对我的评价是做过很多东西，但是都不够深入，好吧，那今天我们就来深入深入。因为我自己没有相关实践，所以接下来就从这个有16.2k星星的后台管理系统项目中看看它是如何做的。
2023-03-13 20:41:16
3773
2
原创 如何在canvas中模拟css的背景图片样式
笔者开源了一个Web思维导图，最近在优化背景图片效果的时候遇到了一个问题，页面上展示时背景图片是通过css使用渲染的，而导出的时候实际上是绘制到canvas上导出的，那么就会有个问题，css的背景图片支持比较丰富的效果，比如通过设置大小，通过设置位置，通过设置重复，但是canvas笔者只找到一个方法，且只支持设置重复效果，那么如何在canvas里模拟一定的css背景效果呢，不要走开，接下来一起来试试。首先要说明的是不会去完美完整100%模拟css的所有效果，因为css。
2023-02-28 07:39:20
577
原创 当你按下方向键，电视是如何寻找下一个焦点的
我工作的第一家公司主要做的是一个在智能电视上面运行的APP，其实就是一个安卓APP，也是混合开发的应用，里面很多页面是H5开发的。电视我们都知道，是通过遥控器来操作的，没有鼠标也不能触屏，所以“点击”的操作变成了按遥控器的“上下左右确定”键，那么必然需要一个“焦点”来告诉用户当前聚焦在哪里。当时开发页面使用的是一个前人开发的焦点库，这个库会自己监听方向键并且自动计算下一个聚焦的元素。为什么时隔多年会突然想起这个呢，其实是因为最近在给我开源的。
2023-02-14 21:30:03
386
原创 Vue Demi是如何让你的库同时支持Vue2和Vue3的
如果你想开发一个同时支持Vue2和Vue3的库可能想到以下两种方式：1.创建两个分支，分别支持Vue2和Vue32.只使用Vue2和Vue3都支持的API这两种方式都有缺点，第一种很麻烦，第二种无法使用Vue3新增的组合式API，其实现在Vue2.7+版本已经内置支持组合式API，Vue2.6及之前的版本也可以使用插件来支持，所以完全可以只写一套代码同时支持Vue2和3。虽然如此，但是实际开发中，同一个API在不同的版本中可能导入的来源不一样，比如ref方法，在Vue2.7+中直接从vue中导入，但是在。
2022-12-12 22:07:01
2980
1
原创 一个普通前端的2022年终总结：多病的一年
用一个词总结我的2022 ，毫无疑问是【多病】。翻看挂号记录，今年累计跑了19次医院，除去定期的脱发复查、尿常规复查外，其他还得了皮肤病、急性咽炎、筋膜炎、结膜炎、肾结石、慢性胃炎、胸闷，体验过了无法忍受的肾绞痛，也体验过了心电图、肌电图、CT、彩超、磁共振、胃肠镜等检查。医保个人账户已经快花光了，支付都开始用医保基金的钱了，希望明年能安稳一点吧。
2022-12-09 22:31:44
1198
原创 可视化大屏的几种屏幕适配方案，总有一种是你需要的
本文简单总结了一下大屏适配的几种方法，没有哪一种是最好的，也没有哪一种是非常完美的，没办法，很多时候都是需要进行一定妥协的。demodemo。
2022-11-13 20:29:56
6496
原创 我让虚拟DOM的diff算法过程动起来了
去年写了一篇文章手写一个虚拟DOM库，彻底让你理解diff算法介绍虚拟的过程和算法过程，当时使用的是双端算法，今年看到了使用的已经是快速算法，所以也想写一篇来记录一下，但是肯定已经有人写过了，所以就在想能不能有点不一样的，上次的文章主要是通过画图来一步步展示算法的每一种情况和过程，所以就在想能不能改成动画的形式，于是就有了这篇文章。当然目前的实现还是基于双端算法的，后续会补充上快速算法。传送门：双端Diff算法动画演示。界面就是这样的，左侧可以输入要比较的新旧列表，然后点击启动按钮就会以动画的形式来展示从头
2022-10-30 20:14:00
304
原创 Vue3官方出的Playground你都用了吗？没有没关系，直接原理讲给你听
本文从源码角度来看了一下@vue/repl组件的实现，其实忽略了挺多内容，比如ssr相关的、使用html作为入口文件、信息输出等，有兴趣的可以自行阅读源码。因为该组件不支持运行Vue2，所以我的一个同事fork修改创建了一个Vue2的版本，有需求的可以关注一下vue2-repl。最后也推荐一下我的开源项目，也是一个在线Playground，也支持Vue2和Vue3单文件，不过更通用一些，但是不支持创建多个文件，有兴趣的可以关注一下code-run。
2022-10-25 23:00:44
3045
原创 本想搞清楚ESM和CJS模块的互相转换问题，没想到写完我的问题更多了
温馨提醒，本文的内容纯粹是笔者的个人观点，不一定保证正确~另外以上这些问题也可能没有所谓的原因，换一个转换工具，比如babel、rollup等可能又会生成不同的代码，有兴趣的自行尝试吧。ESM转CJS：所有导出的变量都挂载到一个对象上，然后该对象。导入的话会判断是经ESM转换的CJS模块，还是原始的CJS模块，都会先创建一个对象，原始CJS模块的话会添加一个default属性来保存导入的数据，非原始CJS模块的话会直接将属性拷贝到新对象上，最后这个新对象作为导入的结果。CJS转CSM。
2022-10-24 21:06:01
1705
原创 只需百十行代码，为你的Web页面增加本地文件操作能力，确定不试试吗？
最后再来看看兼容性：因为目前还是实验性质，所以可以看到是一片红，但是因为我的本身也只是一个示例项目，所以问题不大，有胜于无。另外这个特性目前也只能在HTTPS协议或localhost下才可用，其他情况下window对象是不存在这两个API的，所以需要做好错误处理。
2022-10-23 14:40:33
1001
原创 如何实现一个丝滑的点击水波效果
这个函数做的事情主要是检查和设置被点击元素的一些样式，首先溢出需要设置为隐藏，否则水波圆的扩散就会溢出元素完整显示出来，这显然不好看，然后前面提到过水波元素为绝对定位，所以被点击元素的定位不能是静态定位，最后的层级设置笔者暂时没有想出来是为了解决什么问题。方法，那么就会阻止滚动，但问题是浏览器并不知道我们有没有在事件处理函数中调这个方法，那么就必须等待函数执行完毕才知道，有时候函数的执行是比较耗时的，这样就会导致页面卡顿，所以如果我们的处理函数中明确不会调用。即为水波元素的最终位置。为水波元素的初始位置；
2022-10-20 22:29:38
435
原创 移动端页面如何优雅的适配各种屏幕，包括PC端
本文为Varlet组件库源码主题阅读系列第八篇，读完本篇，可以了解到移动端页面如何适配各种尺寸的屏幕，包括pc端，另外如何将触摸事件转换成鼠标事件。
2022-10-19 21:34:13
6190
原创 Vue组件库实现按需引入可以这么做
本文为Varlet组件库源码主题阅读系列第七篇，读完本篇，可以了解到如何通过unplugin-vue-components插件来为你的组件库实现按需引入。
2022-10-19 21:22:00
6352
4
原创 使用CSS变量实现主题定制真的很简单
本文为Varlet组件库源码主题阅读系列第四篇，读完本篇，可以了解到如何使用Vite的Api接口来启动服务、如何动态生成多语言的页面路由。Varlet的文档网站其实就是一个Vue项目，整体分成两个单独的页面：文档页面及手机预览页面。网站源代码文件默认是放在varlet-cli目录下，也就是脚手架的包里：执行脚手架提供的dev命令时会把这个目录复制到目录下，并且动态生成两个页面的路由配置文件：然后使用Vite启动服务。
2022-10-19 21:09:17
2944
原创 Markdown文件居然也可以直接作为Vue路由组件？
本文为Varlet组件库源码主题阅读系列第五篇，读完本文你可以了解到如何通过编写一个Vite插件来支持使用md文件直接作为路由组件。之前里我们介绍了路由的动态生成逻辑，其中说到了文档是使用Markdown格式编写的，并且还直接在路由文件里使用md文件作为路由组件：路由就是路径到组件的映射，这个组件显然指的是Vue组件，Vue组件是一个包含特定选项的JavaScript对象，我们平常开发一般使用的是Vue单文件，单文件最终也会被编译成选项对象，这个工作是做的，显然这个插件并不能处理Markdown。
2022-10-16 20:30:03
970
1
原创 Vue组件库文档站点的搭建思路
本文为Varlet组件库源码主题阅读系列第四篇，读完本篇，可以了解到如何使用Vite的Api接口来启动服务、如何动态生成多语言的页面路由。Varlet的文档网站其实就是一个Vue项目，整体分成两个单独的页面：文档页面及手机预览页面。网站源代码文件默认是放在varlet-cli目录下，也就是脚手架的包里：执行脚手架提供的dev命令时会把这个目录复制到目录下，并且动态生成两个页面的路由配置文件：然后使用Vite启动服务。
2022-10-10 22:51:30
637
原创 想要字体图标设计师却给了SVG？没关系，自己转
本文为Varlet组件库源码主题阅读系列第三篇，读完本篇，你可以了解到如何将svg图标转换成字体图标文件，以及如何设计一个简洁的Vue图标组件。Varlet提供了一些常用的图标，图标都来自。
2022-10-09 22:36:16
1168
原创 Vue3组件库打包指南，一次生成esm、esm-bundle、commonjs、umd四种格式
上一篇里提到了启动服务前会先进行一下组件库的打包，运行的命令为：显然是提供的一个命令：处理函数为，接下来我们详细看一下这个函数都做了什么。首先设置了一下当前的环境变量，然后清空相关的输出目录。接下来依次打包了四种类型的产物，方法都是同一个，这个方法后面会详细分析。以组件为例看一下未打包前的组件结构：一个典型组件的构成主要是四个文件：样式部分使用的是语言，样式比较少的话会直接内联写到单文件的块中，否则会单独创建一个样式文件，比如图中的，每个组件除了引入自己本身的样式外，还会引入一些基本样式、其他组件的样
2022-10-08 21:48:47
2849
原创 Vue3移动端组件库Varlet源码主题阅读之一：本地启动服务时都做了什么
本文为Varlet组件库源码主题阅读系列第一篇Vue开源的组件库有很多，基本各个大厂都会做一个，所以作为个人再重复造轮子其实意义也不是很大，但是笔者对于如何设计一个Vue组件库还是挺感兴趣的。不同的组件库架构肯定有所不同，不过大体思路应该都差不多，笔者在众多组件库中挑选了来进行剖析，Varlet是一个基于Vue3开发的Material风格的移动端组件库，本系列的文章会全面解析这个项目，需要说明的是，不会具体的看某个组件是怎么实现的，而是了解组件库整体的设计，以及按需引入、主题定制、屏幕适配、组件打包、
2022-10-07 15:14:57
988
原创 Vite入门从手写一个乞丐版的Vite开始（下）
本文参考版本写了一个非常简单的Vite，简化了非常多的细节，旨在对Vite及热更新有一个基础的认识，其中肯定有不合理或错误之处，欢迎指出~。
2022-09-14 20:57:44
331
2
原创 Vite入门从手写一个乞丐版的Vite开始（上）
是什么就不用笔者多说了，用过Vue的朋友肯定都知道，本文会通过手写一个非常简单的乞丐版Vite来了解一下Vite的基本实现原理，参考的是Vite最早的版本（版本，Vue版本为）实现的，现在已经是3.x的版本了，为什么不直接参考最新的版本呢，因为一上来就看这种比较完善的工具源码比较难看懂，反正笔者不行，所以我们可以先从最早的版本来窥探一下原理，能力强的朋友可以忽略~本文会分为上下两篇，上篇主要讨论如何成功运行项目，下篇主要讨论热更新。
2022-09-13 23:01:39
815
原创 我做了一个在线白板（二）
到这里这个小项目的一些核心实现也就都介绍完了，当然这个项目还是存在很大的不足，比如：1.元素的点击检测完全是依赖于点到点的距离或点到直线的距离，这就导致不支持像贝塞尔曲线或是椭圆这样的元素，因为无法知道曲线上每个点的坐标，自然也无法比较；2.多个元素同时旋转目前也没有很好的解决；3.不支持镜像伸缩；，欢迎给个star~...
2022-08-07 22:35:21
378
1
原创 这些年我开源的几个小项目
以上就是笔者开源的几个小项目了，坦率的说，除了code-run比较成熟外，其他的几个坑都很多，并不推荐在实际项目上使用，不过对于简单的使用场景还是能胜任的，就像目前已经是笔者的官方画图工具了哈哈哈（自己做的，流着泪也要用）。...
2022-07-17 18:10:32
838
1
原创 开源的网易云音乐API项目都是怎么实现的？
上一篇文章这个高颜值的开源第三方网易云音乐播放器你值得拥有介绍了一个开源的第三方网易云音乐播放器，这篇文章我们来详细了解一下其中使用到的网易云音乐项目NeteaseCloudMusicApi的实现原理。NeteaseCloudMusicApi使用开发，主要用到的框架和库有两个，一个Web应用开发框架Express，一个请求库Axios，这两个大家应该都很熟了就不过多介绍了。项目的入口文件为：调用了文件的方法，让我们转到这个文件，方法简化后如下：主要是启动监听指定端口，所以创建应用的主要逻辑在方法：首先
2022-07-05 21:02:36
3138
原创 这个高颜值的开源第三方网易云音乐播放器你值得拥有
我平时主要的听歌软件是网易云音乐，但是它有很多花里胡哨的功能，比如电台、直播、朋友、播客、云村等等，说实话这些我都不需要，基本也不会用，大部分的时间都只把它当做一个本地播放器，因为它毕竟是一个商业软件，需要赚钱，所以也能理解，相对来说，电脑上的客户端会简洁一点，网页版最纯粹，但是颜值一般（大家的审美可能不一样，这里仅是个人观点~）。所以有没有一个既简洁纯粹，颜值又高的网易云音乐播放器呢，答案是有的，它就是：YesPlayMusic，一个开源的第三方实现。项目地址：https://github.com/qie
2022-07-04 22:28:42
1691
原创 关联线探究，如何连接流程图的两个节点
如果你用过流程图绘制工具，那么可能会好奇节点之间的连接线是如何计算出来的：不要走开，跟随本文一起来探究一下吧。先使用搭建一下页面的基本结构，为了简化操作，我们使用konvajs库来绘制图形。页面模板部分，提供一个容器即可：部分，主要是使用来创建两个可拖拽的矩形元素及一个连接线元素，当然目前连接线并没有顶点数据：效果如下：接下来我们只要在图形拖拽时实时计算出关联线的顶点然后更新到折线元素里就可以绘制出这条连接线。整个画布上所有的点其实都是可能经过的点，但是我们的连接线是【横平竖直】的，且要尽可能是最短路线
2022-06-28 22:40:34
1924
2
原创 我用这些开源项目轻松搭建了一个在线文档平台
笔者最近闲来无事给自己做了一个在线文档平台，支持白板、思维导图、文档、电子表格、PPT、流程图、Markdown等，界面是这样的：其实现在市面上有很多这种在线文档平台，笔者为什么要自己做一个呢，且听笔者短话长说。最开始笔者只是想在开源白板项目excalidraw的基础上增加云端存储的功能，因为它的云端保存版是要收费的，况且加个数据库的增删改查也不是什么难事，做完以后想到自己做了一个开源的思维导图mind-map，不如同时也支持一下它的云端存储，再之后，每次发布文章时都会使用一些转富文本的工具，通常也都没有存
2022-06-14 19:27:42
2766
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人