这是我参与「第四届青训营 」笔记创作活动的第31天
前言
我看了一下掘金的这个线上前端代码编辑器好像是另外起的一个项目，相似的项目也有很多，比如CodePen，JsBen。这类项目的第一个出发点便是插件选择，比如VSCode的前身monaco-editor，也就是目前掘金在用的插件，CodeMirror（CodePen的出发点），以及发布很早的ACE，在选择好插件后开始对项目进行分析。
功能点大致分析
首先码上掘金的布局是可以切换的，这个主要是依照自己习惯来调整：
比较必要的拖拽移动功能：
iframe阅览以及控制台输出，代码编译切换及代码补全等等，先挑比较重要的说。
布局功能转换分析
这玩意实现功能的方法比较多，我见过最让我脑溢血的开源项目甚至一口气写了七八个模板还塞在一个组件中，除此之外还有CSS文件转换，与夜间模式原理差不多，比如默认加载时哪个CSS文件，点击一个按钮触发替换为哪个CSS文件。
拖拽移动功能分析
这个点算是一个比较有意思的技术点，我看过的一个代码思路便是点击边界的时候获取两个相邻窗口的宽度，鼠标拖动的时候计算鼠标水平移动距离，并对两个窗口的宽度进行相应增减，而对于iframe来说即独立出来的页面，我们的拖拽功能是无效的，这时候可以考虑使用遮罩层来解决。
代码编辑页部分析
这就要详细分析插件自带的API了，目前我在用的CodeMirror的配置项就可以达标基本使用要求，对于代码编辑切换即引用并且换库即可，这没什么可说的。
<select v-model="cssmode">
<option value="css">CSS</option>
<option value="sass">SASS</option>
<option value="sytlus">Stylus</option>
</select>
对于代码格式化来说，不知道大家记得在vscode中就有一个插件叫beautify来代码格式化，我在一篇文章中曾看到使用js-beautify这个包来格式化（虽然我也没尝试过）。
想说的一些话
引包只能解决基本需求问题，想写出好的线上代码编辑器，在优化上要下足功夫多从初始上做改动，所以说如果真的有充足时间的话，在对全局有一个较好的了解后应当多去深究，才能写出质量好的项目。
