这应该是2019最后一篇文章了，相较于去年来说写的东西少了一些，懈怠了。年末总得总结一下，尤其是最近工作中接触到内容愈发的复杂困难，当然收获学习到也很多。
首先是，刚刚完成一个富文本组件开发，涉及到插件使用，从了解背景到研究文档到逐步实施，最大感触是英文的重要性，光光是熟悉代码英文还不够，要有足够的能力阅读英文文档。
先来感受一哈冰山一角
ckeditor作为封装好的插件，直接下载配置部署即可。在官方文档中找到下载地址
官方推荐标准版本，解压缩到本地之后，进入文件夹打开samples中index.html，那么长代码中最关键的只有
<div id="editor"></div>
但还需要打开这个文档，因为这里有富文本配置按钮
进去之后的页面
手动选择需要的配置，或者调整顺序，修改完成之后点击右上角按钮生成相应的配置文档，复制到项目的config.js中。
认真看过文档之后会发现官方提供的code demo中，JS部分最关键的并不是下载来下的demo里面的initSample()，而是
CKEDITOR.replace( 'editor' );
没错，这里的editor就是上面的div的id，调用类库的方法创建了一个富文本实例，那多写几个不同id的div，调用这个方法就可以生成多个富文本。
因为我开发的需求是3个tab切换不同文本输入，最后提交三个页面的输入内容到后端，这里就涉及到多个富文本的创建，富文本内容的读写。
多个创建说过了，内容的读写怎么搞，还是看文档。
读内容
写内容
教程的简单，就是不断自我摸索的血与泪。
其实到此，已经是基本完成了需求，但细看下发现官方提供的demo中并没有关于颜色的配置项，这是需要另外下载插件自行配置的。这里百度中倒是有很多教程，也不太难，跟着操作基本能实现。
其实以上内容对于完成了一遍之后是会觉得很简单，可能困难的感觉只是因为第一次接触陌生文档，有过这样的经历，往后也知道了看一篇文档该如何进行了。我所说的工作愈发困难，是因为之前的要开发的一个组件，几乎耗费大半个多月，它涉及到数学的计算了。以前从来没想过作为一个前端还会用到数学知识，认知里前端就是画面实现，数学的知识应该也就是后端还是机器学习等计算科学会用到，自己的见识还是太少了。
开发需求是几个圆绕着一个中心点进行椭圆形旋转，鼠标点击其中一个圆会改变这个圆的样式（背景图，宽高，内部文字样式），默认情况下不旋转，点击时候当前圆会旋转一圈到中心点下方的零点位置。
这里涉及到的点击修改样式什么的都很简单，对我来说的难点：
- 椭圆形旋转
- 如何点击一个圆开始所有圆进行旋转
- 如何确定点击的圆到零点的角度差值
- 点击的圆旋转到零点，如何保证其他圆旋转相同的差值
这时候，靠我自己是真的费劲，揪着烦了部门大佬好多天，总算理清了思路，大致如下：
- 确定这些圆的数据结构，包含的字段有id，圆中文字name，旋转角度angle分为开始角度和结束角度，圆的位置trans有x，y，z三个值，还有一个标志位布尔值finished，true为旋转结束。
- 每个圆的位置通过角度计算，x=(Math.sin(startAngle) * width) / 2,width是整个容器的宽度，y=Math.cos(startAngle) * 50，z=Math.cos(startAngle) * 20
- 初始化每个圆的开始角度和结束角度，都设为当前的角度值
- 计算当前点击的圆的角度距离零度位置的差值
- 通过差值，加上每个圆的结束角度，求出每个圆最终的结束角度位置
- 确定旋转速度，即每个时间里旋转的角度，开始角度加上这个角度等于结束角度，开始旋转使用window的一个自带方法requestAnimationFrame()
- 确定在目标位置如何停止每一个圆，结束动画是cancelAnimationFrame()
- 旋转过一圈之后，将每个圆的角度的值都初始化成第一圈时候的情况，这里要根据旋转方向判别，逆时针时候是开始角度等于结束角度对2Π取模，顺时针则是结束角度加上2Π再对2Π取模。
代码就不贴了，每个公司部门采用的架构不一样，我那是用的typescript+lit-element，所以代码也没什么借鉴作用，主要是这种思路，真希望多年以后自己再来回看这篇文章，回想这个组件代码，会嘲笑现在的自己稚嫩。
明天就是这一年的最后一天，想着好不容易手头没啥事了，能带薪划划水，可就在刚刚部门大佬有吩咐了一件事，富文本组件写完了是需要和后端联调的，可后端那位大哥请假回乡订婚了，大佬就安排我去了解node js连接MySQL，自己写接口自己测试......心伤，回家~
2020年第一篇文章应该是node js连接MySQL。最后，祝福大家年末愉快。
