项目周期

1. github.com/IronPans/TG… 参考了这个项目的实现富文本功能逻辑 (学习模块以及富文本操作的相关概念)

2. 基于上续功能, 引入了webpack打包项目, 采用工程化方式构建项目, 输出umd风格的纯js插件

3. github.com/wangeditor-… 参考了这个项目的ts实现, 将步骤二的项目修改手动修改成了webpack构建的ts项目, 主要是体会一下打包ts项目的webpack差异,与ts与js的不同

完成了 <h标题, 加粗, 选颜色> 三个功能, 耗时(二周业余时间)

阶段一:

之所以参考TGeditor开源项目, 是因为它比较简洁, 那是一个还没有工程化的项目, 为了看懂项目开头的umd模块化方式, 我结合了前端大佬阮一峰的模块化教程, 了解了js模块化的诞生背景.

www.ruanyifeng.com/blog/2012/1…

对es module, common.js, amd, umd,几种模块方案有了对比和各自解决了什么问题加深了一定的了解. type="module",虽然不知道这些是因为我从来没有写过js通用的插件供其他人使用,所以也没有特别的模块化需求, 有也是用对象属性的形式或者只是使用es module.

结合这个项目, 我进一步了解了开发富文本必要的最小知识: document.execCommand,selection,Range,getRangeAt()等, 还有扩展的::selection伪元素的使用. 保存选区(监听mouseup,keyup事件并保存),由于看源码时不够细致, 我还纠结于第一次选区没有保存时, 点击加粗的时候为何没有生效.我甚至没有意识到要想使document.execCommand('bold')生效, 需要有一个当前选区的概念.

developer.mozilla.org/zh-CN/docs/… bold

开启或关闭选中文字或插入点的粗体字效果。IE浏览器使用 strong标签，而不是b标签。

项目里还有一个好玩的地方, 源码中有一个粗糙的拾色器的实现,涉及到颜色系统的转换, 本想找一个更好的拾色器实现,但没找到, 以后再深入, 毕竟用户自主配置项目主题色也变得常见.

第一个阶段主要是最小化项目,完成三个功能<标题, 加粗, 拾色>的开发

阶段二:

引入webpack打包, 建立src/dist,采用日常开发项目的工程化经验, 将功能拆分,使用main.js组织起来. 这个过程重新学习了webpack打包配置,上一次使用webpack还是早期的vue-cli项目,后来迁移到@vue/cli统一使用vue.config.js构建项目后, 就没有怎么使用webpack了,但我知道这是个好东西, 阶段二很顺利,同时也参考开源项目wangEditor的项目架构.

github.com/wangeditor-…

阶段三:

开始使用typeScript,从引入的最单一的文件开始,修改成ts文件, 根据提示,结合typeScript修改语法,添加ts-loader进行打包, 遇到问题,我单独建一个webpack项目测试webpack打包成js文件进行测试,哪里报错修改哪里,这个阶段是最麻烦的, 因为项目里大量使用了原生js的语法, HTMLElement,nodeList,等多种原生对象, 之前js里拥有的属性,在typescript中不再拥有,不得不寻找替代的语法, 同时也体会ts静态类型检查的好处, 使用!, as等ts特有的语法, 同样也参考了wangEditor的ts代码,幸好我是学java出来的,加上之前见识过vue2的flow和vue3的ts, 所以这些也不算什么难事.

之后就是上传github了,在cmd中输入ssh-keygen -t rsa -b 4096 -C "你的邮箱",enter四次, 根据提示,获得ssh-key,在github中setting配置ssh, git clone代码后就可以提交修改代码了, git的使用可以参考我上一篇文章.

项目截图:

github地址:
github.com/xlm2017/xlm…

## 项目总结:

好的项目不是一下子就写出来的,我的开发生涯伴随着vue发展, 今天看vue3无疑是很优秀的,但它也是从vue1,vue2一点一点每天迭代诞生出来的, 不能因为自己目前不够优秀所以就放弃尝试看似不能完成的任务,总想回到舒适区, 为了面试去更加熟悉那些js的api或者css等,变着法的搞一些乱七八糟的面试题如同考八股文, 越来越内卷,对新知识充满了恐慌,对简单的新知识的练习充满不屑, 毕竟, 我可以以面试官不在乎练习的项目,实际工作用不到等, 拒绝去熟悉webpack,typescript,可视化等这些更新鲜的知识,但凡事总要有个开始,一番尝试, 我觉得webpack+typescript似乎也没有那么难搞, 毕竟,我只花了两周的业余时间, 就掌握了这些基础, 当然,这肯定不是好代码, 如果两周就能写出好代码, 那别人也不会写好几年了.

这次项目给我带来最大的经验就是: 不必对前端那些无数的细枝末节太过在意, 例如: parseInt()的第二个参数是什么意思,js实现继承有哪些方式,只要不是经常用到, 完全没有必要让这种知识占据太多的心智资源,更没必要觉得没掌握这些是件很难堪的事情, 我们只需要对原生的函数的参数个数保持警觉,实际开发中不要轻易想当然,遇到问题定位到就好了, 不能为了语法而语法, 学以只用才是最好的, 我们一直使用我们学到的语法, 并时常思考一下语法设计背后的考量,我们的编程水平就能提高.(多学学算法+项目实战,比花太多记忆那些琐碎的知识好太多),在这个快速变化的时代, 连语法一直都在变化.