作者是一个普通的前端工作者，没有参与过任何热门开源项目的共建，所以每次说我爱开源，我很内疚，充其量，我喜欢使用开源项目，但在过去的两年里，我也陆续做了几个小项目。虽然时不时只有几颗星，但也为我安静的github增添了几分人气。本文向大家推荐作者的开源项目。如果觉得可以欢迎关注~豆瓣api名称：douban_api简介：豆瓣api服务地址：https://github.com/wanglin2/d...star:109,fork:23本项目是第一个上传到的项目githubbytheauthor是的，原因是作者做了一个电子书网站，需要入书。一开始是在豆瓣上手动搜索，然后复制粘贴书的信息，然后一键填充，大大解放了作者的双手，但好景不长，很快豆瓣的官方API就下线了，再也没有上线过。习惯了一键填充的作者再也回不去手动复制粘贴的日子了，所以做了这个小项目。这个项目的实现也很简单，因为豆瓣的网页都是后端直出的，所以使用PhantomJS无头浏览器爬取豆瓣相关页面，然后使用cheerio解析页面结构，获取数据相关的DOM节点通过json数据可以返回，最大的缺点就是很慢。这个项目是三年前上传的，因为后来作者的电子书网站基本没有维护过，所以这个项目也没有再维护过，不过时不时的一个star也算是作者第一个star突破100的项目，另外，这个项目现在可以正常运行，足以说明网页版豆瓣这么多年基本没改过。markjs（标注库）名称：markjs介绍：一个插件式的多边形标注库地址：https://github.com/wanglin2/m...star:29,fork:11本项目是一个框架无关的库，主要功能是手动绘制多边形，一般用来标注图片：本项目来源于工作需要。记得刚进新公司不久，有一个需要在图片上画多边形。这种很明显，需要用svg或者canvas来实现。虽然这两个东西之前没用过，但是因为对canvas有一点了解，所以还是决定用canvas。一开始完全没有考虑复用性，直接和业务代码耦合。但是随着需求反复变化，从简单的画一个多边形到编辑，到画多个多边形，到后面支持编辑一个多边形的时候，我暂时隐藏其他多边形，暂时不需要隐藏，所以作者决定做一个单独的库来通过配置来支持所有这些需求。将相对独立的功能做成插件，可以按需注册使用，但最终实现时存在一些问题。如果一个页面同时创建多个实例，插件注册将对所有实例生效。在做这个项目的过程中也有一些小的收获。一是解决了我之前的一个疑惑。如何判断鼠标是否点击了多边形？实现其实就是绘制和多边形一样的路径，然后通过isPointInPath()方法判断一个点是否在当前路径中；另一种是利用一些简单的数学知识实现一些有趣的小功能，如判断线相交、吸附功能等。mind-map（思维导图）名称：mind-map介绍：一个网页思维导图的实现地址：https://github.com/wanglin2/m...star:68,fork:18这个项目的原因比较迷糊，记不太清了，应该是在使用的时候无意中发现它是开源的百度脑图，然后正准备看它的源码，结果发现这个项目已经4年多没有更新了，代码的组织方式也不是很喜欢。关键是看不懂。我还发现市面上有很多在线思维导图产品，都是收费的。我很震惊，觉得很难，所以我决定自己做。一个开源版，让大家可以免费使用思维导图~~~理想很美好，关卡很惭愧，真的很难，难点主要有两个：1.性能问题，节点少的时候完美，但是，如果节点太多，就会卡住。尤其是多选的情况下，应该和节点布局的实现算法有关。虽然每次重新渲染都加入了批量渲染的优化，但这只是治标不治本。另外，因为这些性能优化，代码的实现变得更加混乱。2.作者能力有限，没有实现鱼骨图。这应该是因为实现思路不对。目前对各个结构的图形实现都是单独考虑的，没有从更高的层次考虑。如果把每个小结构split出来单独实现，再组合起来，可能更容易实现。tiny_whiteboard(whiteboard)名称：tiny_whiteboard介绍：一款在线小白板，类似excalidraw地址：https://github.com/wanglin2/t...star：38，fork：10作者使用了一款在线的小白板来写文章和之前画图手绘风格的白板excalidraw很强大，用过之后你会想自己实现的。一开始并没有打算做一个完整的项目，只是想写一个关于绘制、拖动、旋转、拉伸矩形的项目。这是一篇小文章，但是写的时候发现即使只是实现这些功能，代码量也相当大，而且既然已经实现了矩形的全生命周期，不如顺便添加圆圈、折线、文字、图片什么的，就这样，参考excalidraw的功能，项目就完成了。这个库也是独立于框架的。毕竟react和vue这两个框架可能大致平分天下，所以最好不要依赖特定的框架。这个小项目实现了白板的一些基本功能，但是也有一些明显的缺陷：1.由于图形的点击检测是依靠两点之间的距离和一点到直线的距离来实现的，所以它不支持BesserGraphics，如Erlenmeyer曲线或椭圆等无法检测到，因为它们的每个点都不知道。2.选择多个图形，同时旋转。目前还没有很好的实现方式。自由书写、折线等图形是没有问题的，因为旋转就是旋转构成它们的每一个点，但是其他图形的渲染不是由一个点决定的，而是由位置、宽高共同决定的，所以无法旋转图表上的点。3、不支持镜像，最初设计时没有考虑，后期实现起来比较困难。code-run（代码在线运行工具）名称：code-run简介：一款在线代码编辑预览工具，类似于codepen、jsbin、jsfiddle等。地址：https://github.com/wanglin2/c...star:186,fork:62这个项目是作者star最多的一个。是一款类似于CodePen的前端代码在线运行工具，基于Vue3.x版本。笔者所在公司最初有一个基于codepan开源项目的内网版本，但是界面太丑，功能也很差，而CodePen好很多，不过是商业产品。它不是开源的，所以作者决定参考CodePen做一个开源版本。整体实现比较清晰。分别编辑html、js、css代码，然后组装成完整的html结构，最后通过iframe的srcdoc属性传入html字符串进行预览。页面布局基本还原CodePen，支持切换结构，支持的结构比CodePen多。代码编辑器没有使用CodeMirror，而是选择了MonacoEditor，因为它非常强大。毕竟和VSCode是同源的。它带有开箱即用的代码输入提示。缺点是非常复杂庞大，文档对作者来说实在是太简单了，使用起来比较困难。不过笔者经过一番折腾还是成功支持了VSCode主题的移植，所以在颜值上还是很不错的。惭愧，作者是一个很看中外貌，什么都爱做题材的人。支持编辑的代码语言除了基本的html、js、css之外，通过各种预处理语言和扩展语言的官方编译工具，支持Pug、Less、TypeScript等输入。最后，特别支持Vue单文件，因为笔者喜欢通过Vue单文件来写demo，所以直接支持Vue单文件的编辑非常方便。当然，还有很多其他有趣的小功能，有兴趣的可以自己去体验一下~目前这个项目也成功淘汰了作者公司之前的工具。综上所述，以上就是笔者开源的几个小项目。坦白说，除了code-run比较成熟之外，还有很多坑。不建议在实际项目中使用，但对于简单的使用场景还是可以胜任的。是的，就像tiny_whiteboard已经是作者的官方绘图工具了哈哈哈（我自己做的，到现在还用着泪流满面）。
