谭光志
本文主要对以下技术要点进行分析： 1. 编辑器 2. 自定义组件 3. 拖拽 4. 删除组件、调整图层层级 5. 放大缩小 6. 撤消、重做 7. 组件属性设置 8. 吸附 9. 预览、保存代码 10. 绑定事件 11. 绑定动画 12. 导入 PSD 13. 手机模式 为了让本文更加容易理解，我将以上技术要点结合在一起写了一个可视化拖拽组件库 DEMO：...
## 为什么转行 因为混得不好。 在成为程序员之前，我干过很多工作。由于学历的问题（高中），我的工作基本上都是体力活。包括但不限于：工厂普工、销售（没有干销售的才能）、搬运工、摆地摊等，转行前最后一份工作是修电脑。这么多年，月薪没高过 3300... 后来偶然一个机会我发现了知乎这个网站，在上面了解到程序员的各种优点。于是，我下定决心转行（2016 年，当时 28 了），辞职在家自学编程。并且也得到了媳妇的支持，感谢我的媳妇。 ## 转行准备 转行选择前端也是在知乎上看网友分析的，比后端好入门。 ### 如何选择教程？ 最好在网上多查查资料，找评价高的或者去豆瓣上找评分高的书。 我在网上查了很多资料，最终确定 HTML、CSS 在 [w3cschool](https://www.w3school.com.cn/) 学习。JavaScript 则选择了[JavaScript 高级程序设计第三版](https://book.douban.com/subject/10546125/)（俗称红宝书，现在已经有第四版了）。 光看不练是学不好编程的，我非常幸运的遇到了[百度前端技术学院](http://ife.baidu.com/2016/task/all)。它从易到难设置了 52 个任务，共分为四个阶段。任务难度循序渐进，每一个任务都有清晰的讲解和学习参考资料。它还怕你不会做，允许你查看其他人上传的任务答案。 我先学习了 HTML、CSS，做完了第一阶段任务。再看完红宝书前十三章，做完了第二阶段任务。然后把红宝石剩下的全看完，做到第三阶段的任务四十五。后面的任务对于当时的我来说实在太难了，就没往下做。在 1 月的时候，又学习了 ajax，了解了前后端如何相互通信。...
本文是对[《可视化拖拽组件库一些技术要点原理分析》](https://github.com/woai3c/Front-end-articles/issues/19)的补充。上一篇文章主要讲解了以下几个功能点： 1. 编辑器 2. 自定义组件 3. 拖拽 4. 删除组件、调整图层层级 5. 放大缩小 6. 撤消、重做 7. 组件属性设置 8. 吸附 9. 预览、保存代码 10. 绑定事件 11. 绑定动画 12. 导入 PSD 13. 手机模式 现在这篇文章会在此基础上再补充 4...
由于一直在使用 markdown 编辑器写技术文章，所以对于编写体验很敏感。我发现各大社区的 markdown 编辑器基本都有同步滚动功能。只不过有些做得好，有些做得马马虎虎。出于好奇，我就打算自己亲自实现一下这个功能。 思考了一段时间，最后想出来了三种方案： 1. 百分比滚动 2. 双屏同时渲染占用面积大的元素 3. 每一行的元素都赋上一个索引，根据索引来精确同步每一行的滚动高度 ## 百分比滚动 假设现在正在滚动 a 屏，那 a 屏的滚动百分比计算方式为：`a 屏的滚动高度 / a 屏的内容总高度`，用代码表示 `a.scrollTop / a.scrollHeight`。当滚动 a 屏时，需要手动同步 b 屏的滚动高度，也就是根据...
本文是可视化拖拽系列的第四篇，比起之前的三篇文章，这篇功能点要稍微少一点，总共有五点： 1. SVG 组件 2. 动态属性面板 3. 数据来源（接口请求） 4. 组件联动 5. 组件按需加载 如果你对我之前的系列文章不是很了解，建议先把这三篇文章看一遍，再来阅读本文（否则没有上下文，不太好理解）： * [可视化拖拽组件库一些技术要点原理分析](https://github.com/woai3c/Front-end-articles/issues/19) * [可视化拖拽组件库一些技术要点原理分析（二）](https://github.com/woai3c/Front-end-articles/issues/20) * [可视化拖拽组件库一些技术要点原理分析（三）](https://github.com/woai3c/Front-end-articles/issues/21) 另附上项目、在线 DEMO 地址： * [一个低代码（可视化拖拽）教学项目](https://github.com/woai3c/visual-drag-demo) * [在线 DEMO](https://woai3c.github.io/visual-drag-demo/) ## SVG 组件...
2021 年已经结束，对于我来说，今年发生了不少的事情，所以我觉得写个年终总结很有必要，于是就有了这篇文章。 ## 一、不满足于现状，前往北京发展 从转行开始，我就一直在天津工作。虽然当时转行已经 29 岁了，但是对于未来能做成什么事，要达到什么样的高度并没有清晰的认识，也没有规划。毕竟当时转行也只是为了混口饭吃，能让自己在天津活下去。 天津的互联网行业发展非常差，和北京比一个天一个地。而且大多数公司都是项目外包型公司，就是在外面接项目做来养活公司。基本上都是没什么技术含量的项目，一套模板能放在多个项目上用。我在天津工作的这几家公司全是项目外包型公司，所用技术也比较落后，只要能完成项目就行。所以在天津工作的这几年，我的技术提升只有第一年是靠工作，再往后的时间里，技术提升就全靠自学了。但是脱离于业务场景的学习，效果也不是很好。我在这几年时间里学到的很多知识点，基本上都没有机会落实到工作中（公司小，项目小），只能自己做个 DEMO 玩。 在天津工作四年后，随着技术提升与职业规划越来越清晰，我对现状也越来越不满。因此，在 2021 年初我做出了一个重大的决定——去北京发展。经过一个月的面试，在 2021 年 3 月，我跳槽去了北京狮桥，一家要向互联网转型的传统物流公司。刚来北京我就开始了差不多是 996 的生活，之前一直抱着吃瓜的心态在网上看广大网友讨论 996，没想到终于有机会体验了，此时此刻只能用两个字来形容——真累！不过所接触的项目确实是更有技术含量，不用再做后台管理系统了。 ## 二、工作感悟 2022 年，我已经 34 了，满打满算，转前端也有五年了。在这五年里，业务上写过后台管理系统、移动端、小程序等，基础架构方面搞过监控、脚手架、CICD、低代码等等。慢慢的，也找到了自己喜欢的方向——基础架构。我越来越不喜欢写业务页面了，感觉写页面很枯燥。但是这不代表我不熟悉业务，一个好的程序员必须得懂业务，但是和写不写业务页面关系不大。 2021 年我在狮桥除了做基础架构，还开始带业务团队了。团队从一开始的 9 人，到后面的...
本文是可视化拖拽系列的第三篇，之前的两篇文章一共对 17 个功能点的技术原理进行了分析： 1. 编辑器 2. 自定义组件 3. 拖拽 4. 删除组件、调整图层层级 5. 放大缩小 6. 撤消、重做 7. 组件属性设置 8. 吸附 9. 预览、保存代码 10. 绑定事件 11. 绑定动画 12. 导入 PSD 13. 手机模式...
最近在学习 [vue-cli](https://github.com/vuejs/vue-cli) 的源码，获益良多。为了让自己理解得更加深刻，我决定模仿它造一个轮子，争取尽可能多的实现原有的功能。 我将这个轮子分成三个版本： 1. 尽可能用最少的代码实现一个最简版本的脚手架。 2. 在 1 的基础上添加一些辅助功能，例如选择包管理器、npm 源等等。 3. 实现插件化，可以自由的进行扩展。在不影响内部源码的情况下，添加功能。 有人可能不懂脚手架是什么。按我的理解，脚手架就是帮助你把项目的基础架子搭好。例如项目依赖、模板、构建工具等等。让你不用从零开始配置一个项目，尽可能快的进行业务开发。 建议在阅读本文时，能够结合项目源码一起配合使用，效果更好。这是项目地址 [mini-cli](https://github.com/woai3c/mini-cli)。项目中的每一个分支都对应一个版本，例如第一个版本对应的 git 分支为 v1。所以在阅读源码时，记得要切换到对应的分支。  ## 第一个版本 v1 第一个版本的功能比较简单，大致为： 1. 用户输入命令，准备创建项目。 2. 脚手架解析用户命令，并弹出交互语句，询问用户创建项目需要哪些功能。 3. 用户选择自己需要的功能。...
建议先阅读官方指南——[Vue.js 服务器端渲染指南](https://ssr.vuejs.org/zh/)，再回到本文开始阅读。 本文将分成以下两部分： 1. 简述 Vue SSR 过程 2. 从零开始搭建 SSR 项目 好了，下面开始正文。 ## 简述 Vue SSR 过程 ### 客户端渲染过程 1. 访问客户端渲染的网站。 2. 服务器返回一个包含了引入资源语句和 `` 的 HTML 文件。 3. 客户端通过...
最近看了几个微前端框架的源码（[single-spa](https://github.com/single-spa/single-spa)、[qiankun](https://github.com/umijs/qiankun)、[micro-app](https://github.com/micro-zoe/micro-app)），感觉收获良多。所以打算造一个迷你版的轮子，来加深自己对所学知识的了解。 这个轮子将分为五个版本，逐步的实现一个最小可用的微前端框架： 1. 支持不同框架的子应用（[v1](https://github.com/woai3c/mini-single-spa/tree/v1) 分支） 2. 支持子应用 HTML 入口（[v2](https://github.com/woai3c/mini-single-spa/tree/v2) 分支） 3. 支持沙箱功能，子应用 window 作用域隔离、元素隔离（[v3](https://github.com/woai3c/mini-single-spa/tree/v3) 分支） 4. 支持子应用样式隔离（[v4](https://github.com/woai3c/mini-single-spa/tree/v4) 分支） 5. 支持各应用之间的数据通信（[main](https://github.com/woai3c/mini-single-spa) 分支） 每一个版本的代码都是在上一个版本的基础上修改的，所以 V5 版本的代码是最终代码。 Github 项目地址：[https://github.com/woai3c/mini-single-spa](https://github.com/woai3c/mini-single-spa) ## V1 版本 V1...