0x00 前言
书接上文，本文将从源码功能方面讲解下 vue-code-view 组件核心逻辑，您可以了解以下内容：
- 动态组件的使用。
codeMirror插件的使用。- 单文件组件(SFC,single-file component) Parser。
0x01 CodeEditor组件
项目使用功能丰富的codeMirror实现在线代码展示编辑功能。
npm 包安装：
npm install codemirror --save
子组件 src\src\code-editor.vue 完整源码：
插件启用功能的配置选项，同时需要引入相关的js,css 文件。
| 参数 | 说明 | 类型 |
|---|---|---|
| mode | 支持语言语法高亮 MIME-TYPE | string |
| lineNumbers | 是否在编辑器左侧显示行号。 | boolean |
| lineWrapping | 在长行时文字是换行(wrap)还是滚动(scroll)，默认为滚动(scroll)。 | boolean |
| styleActiveLine | 高亮选中行 | boolean |
| tabSize | tab 字符的宽度 | number |
| theme | 设置主题 | tring |
| autoCloseBrackets | 括号自动关闭 | boolean |
| autoCloseTags | 标签自动关闭 | boolean |
| matchTags | 标签匹配 | boolean |
| matchBrackets | 括号匹配 | boolean |
| foldGutter | 代码折叠 | boolean |
| readOnly | 是否只读。 “nocursor” 设置只读外，编辑区域还不能获得焦点。 | boolean|string |
组件初始化时，会自动初始化编辑器示例，同时将源码赋值给编辑器，并注册监听change事件。当编辑器的值发生改变时，会触发 onchange 事件，调用组件prop 属性 codeHandler将最新值传给父组件。
// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
this.codeEditor = CodeMirror.fromTextArea( this.$refs.codeContainer, this.defaultOptions );
this.codeEditor.setValue(this.value);
// 注册监听`change`事件
this.codeEditor.on("change", (item) => { this.codeHandler(item.getValue()); });
0x02 SFC Parser
组件的功能场景是用于简单示例代码运行展示，将源码视为 单文件组件(SFC,single-file component)的简单实例。
文件src\utils\sfcParser\parser.js 移植 vue 源码 sfc/parser.js 的 parseComponent 方法,用于实现源码解析生成组件 SFCDescriptor。
暂不支持组件和样式的动态引入，此处功能代码已经移除。
// SFCDescriptor 接口声明
export interface SFCDescriptor {
template: SFCBlock | undefined; //
script: SFCBlock | undefined;
styles: SFCBlock[];
customBlocks: SFCBlock[];
}
export interface SFCBlock {
type: string;
content: string;
attrs: Record;
start?: number;
end?: number;
lang?: string;
src?: string;
scoped?: boolean;
module?: string | boolean;
}
SFCDescriptor 包含 template、script、styles、customBlocks 四个部分，将用于示例组件的动态构建。 其中 styles是数组，可以包含多个代码块并解析； template和script 若存在多个代码块只能解析最后一个。
customBlocks是没在template的HTML代码，处理逻辑暂未包含此内容。
0x03 组件动态样式
文件src\utils\style-loader\addStylesClient.js 移植 vue-style-loader 源码 addStylesClient 方法,用于在页面DOM中动态创建组件样式。
根据 SFCDescriptor 中的 styles和组件编号，在DOM中添加对应样式内容，若新增删除