这应该是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。最后,祝福大家年末愉快。
偷偷引个流
嘻嘻嘻,关注我吧~