共计 3356 个字符，预计需要花费 9 分钟才能阅读完成。
笔者是一个平平无奇的前端打工人，没有参加过啥热门开源我的项目的共建，所以每次说本人酷爱开源都很心虚，充其量就是酷爱应用开源我的项目，不过这两年来也陆续做了几个小我的项目，尽管只有时不时的来几个 star，不过也给我宁静的github 平添了几分人气，本文就给大家举荐一下笔者的开源我的项目，如果感觉能够欢送给个关注~
豆瓣 api
名称：douban_api
简介：豆瓣 api 服务
地址：https://github.com/wanglin2/d…
star：109、fork：23
这个我的项目算是笔者最早上传到 github 上 的我的项目了，起因是笔者做了一个电子书网站，须要录入书籍，最开始是手动去豆瓣搜寻，而后复制粘贴书籍信息，不仅累，而且效率很低，于是用豆瓣官网的 api 做了个搜寻的性能，而后一键填充，大大解放了笔者的双手，不过好景不长，很快豆瓣官网的 api 下线了，并且再也没有上线。
习惯了一键填充的笔者是再也回不去手动复制粘贴的日子了，于是就做了这个小我的项目。
这个我的项目实现也很简略，因为豆瓣的网页都是后端直出的，所以通过 PhantomJS 无头浏览器来爬取豆瓣相干页面，而后再应用 cheerio 来解析页面构造，获取到相干 DOM 节点的数据通过 json 数据返回即可，最大的毛病是很慢。
这个我的项目是三年前上传的，因为前期笔者的电子书网站根本不保护了，所以这个我的项目也没有再保护过，不过时不时的一个 star 也让它成了笔者第一个冲破 100 个star的我的项目，另外这个我的项目当初也是能够失常运行的，足以阐明这么多年豆瓣的网页版根本没有改变过。
markjs（标注库）
名称：markjs
简介：一个插件化的多边形标注库
地址：https://github.com/wanglin2/m…
star：29、fork：11
这个我的项目是一个框架无关的库，次要性能就是用来手动绘制多边形，个别用于在图片上进行标注：
这个我的项目来源于工作上的需要，记得那时刚入职新公司不久，就来了一个要在图片上绘制多边形的需要，这种显然是要用 svg 或canvas来实现，尽管这两个货色之前根本都没有用过，不过因为对 canvas 略微有过一点理解，于是果决抉择应用canvas。
最开始齐全没有思考复用性，间接和业务代码耦合在一起，不过随着需要的重复变动，从单纯的画一个多边形到须要可编辑、到须要能够绘制多个多边形、再到一会要反对编辑一个多边形的时候暗藏其余多边形一会又不须要暗藏，于是笔者一气之下就决定独自做成一个库，通过配置化反对所有这些需要，另外因为过后受各种插件化思维的影响，于是也把各个绝对独立的性能做成了一个个插件，按需注册应用，不过最终的实现上有点问题，如果在一个页面上同时创立多个实例，插件注册会在所有实例上失效。
做这个我的项目的过程中也有一些小播种，一个是解决了本人之前的一个纳闷，怎么判断鼠标是否点击到了一个多边形，实现其实就是绘制和多边形同样的门路，而后通过 isPointInPath() 办法来判断一个点是否在以后门路中；另一个是应用一些简略的数学知识实现了一些有意思的小性能，比方判断线段穿插、吸附性能等。
mind-map（思维导图）
名称：mind-map
简介：一个 web 思维导图的实现
地址：https://github.com/wanglin2/m…
star：68、fork：18
这个我的项目的起因比拟蛊惑，笔者曾经有点记不清了，应该是笔者在应用百度脑图的时候意外发现了它是开源的，而后就筹备看看它的源码，然而发现这个我的项目曾经 4 年多没更新了，并且代码的组织形式笔者不是很喜爱，重要的是看不懂，另外也发现市面上有很多在线的思维导图产品，还要免费，笔者很震惊，感觉这有什么难的，于是就决定本人做一个开源版的，让所有人都能用上收费的思维导图~~~
现实很美妙，程度很羞愧，的确很难，难点次要有二：
1. 性能问题，节点少的状况下很完满，然而节点多了就变得卡顿，尤其是多选的状况下，应该跟节点布局的实现算法无关，尽管每次从新渲染加上了分批渲染的优化，但也只是治标不治本。另外因为这些对性能的优化，导致代码的实现上也变得比拟乱。
2. 笔者能力无限，没有实现鱼骨图，这应该是实现思路不对，目前都是独自思考每种构造的图形实现，没有从一个更高的档次来思考，如果把每个小构造都拆分进去独自实现，再来进行组合，这样可能更容易实现。
tiny_whiteboard（白板）
名称：tiny_whiteboard
简介：一个在线小白板，相似 excalidraw
地址：https://github.com/wanglin2/t…
star：38、fork：10
笔者之前写文章画图用的是一个在线的手绘格调白板 excalidraw，性能很弱小，用着用着就会想本人也实现一下，最开始并没有打算做一个残缺的我的项目，只是想以一个矩形的绘制、拖动、旋转、伸缩为题来写一篇小文章，然而写着写着，发现就算只是实现这几个性能代码量就挺大的，而且既然曾经实现了矩形的全生命周期，那不如再顺便加一下圆形、折线、文字、图片什么的，就这样，参照 excalidraw 的性能就实现了这个我的项目。
这个库也是框架无关的，毕竟当初 react 和vue两个框架根本可能大略平分天下，所以不依赖特定框架是最好的。
这个小我的项目实现了白板的一些基本功能，然而也有一些很显著的缺点：
1. 因为图形的点击检测是依赖于两点之间的间隔以及点到直线的间隔来实现的，所以不反对贝塞尔曲线或椭圆之类的图形，因为无奈晓得它们的每一个点，所以也就无奈进行检测。
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，而是抉择 Monaco Editor，因为它很弱小，毕竟是和 VSCode 同源的，开箱自带代码输出提醒，毛病是很简单很宏大，文档对于笔者来说着实是太简陋了，应用起来比拟艰难。不过笔者在一番折腾下胜利反对移植 VSCode 的主题，所以在颜值方面还是很能打的，羞愧，笔者就是一个非常看中表面的人，做什么都爱做主题。
反对编辑的代码语言上除了根底的 html、js、css 外，通过各种预处理语言、扩大语言的官网编译工具来反对诸如 Pug、Less、TypeScript 等的输出。
最初就是对于 Vue 单文件的特地反对，因为笔者就很喜爱通过 Vue 单文件来写 demo，所以间接反对Vue 单文件的编辑就很不便了。
当然，其余还有很多有意思的小性能，有趣味的能够自行体验~
目前这个我的项目也在笔者公司外部胜利淘汰了之前的工具。
总结
以上就是笔者开源的几个小我的项目了，坦白的说，除了 code-run 比拟成熟外，其余的几个坑都很多，并不举荐在理论我的项目上应用，不过对于简略的应用场景还是能胜任的，就像 tiny_whiteboard 目前曾经是笔者的官网画图工具了哈哈哈（本人做的，流着泪也要用）。
