0x00 前言

书接上文,本文将从源码功能方面讲解下 vue-code-view 组件核心逻辑,您可以了解以下内容:

  • 动态组件的使用。
  • codeMirror插件的使用。
  • 单文件组件(SFC,single-file component) Parser。

0x01 CodeEditor组件

项目使用功能丰富的codeMirror实现在线代码展示编辑功能。

npm 包安装:

npm install codemirror --save

子组件 src\src\code-editor.vue 完整源码:

<template>
<div class="code-editor">
<textarea ref="codeContainer" />
</div>
</template> <script>
// 引入核心
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css"; // 主题 theme style
import "codemirror/theme/base16-light.css";
import "codemirror/theme/base16-dark.css";
// 语言 mode
import "codemirror/mode/vue/vue";
// 括号/标签 匹配
import "codemirror/addon/edit/matchbrackets";
import "codemirror/addon/edit/matchtags";
// 括号/标签 自动关闭
import "codemirror/addon/edit/closebrackets";
import "codemirror/addon/edit/closetag";
// 代码折叠
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/comment-fold";
// 缩进文件
import "codemirror/addon/fold/indent-fold";
// 光标行背景高亮
import "codemirror/addon/selection/active-line"; export default {
name: "CodeEditor",
props: {
value: { type: String },
readOnly: { type: Boolean },
theme: { type: String },
matchBrackets: { type: Boolean },
lineNumbers: { type: Boolean },
lineWrapping: { type: Boolean },
tabSize: { type: Number },
codeHandler: { type: Function },
},
data() {
return {
// 编辑器实例
codeEditor: null,
// 默认配置
defaultOptions: {
mode: "text/x-vue", //语法高亮 MIME-TYPE
gutters: [
"CodeMirror-linenumbers",
"CodeMirror-foldgutter",
],
lineNumbers: this.lineNumbers, //显示行号
lineWrapping: this.lineWrapping || "wrap", // 长行时文字是换行 换行(wrap)/滚动(scroll)
styleActiveLine: true, // 高亮选中行
tabSize: this.tabSize || 2, // tab 字符的宽度
theme: this.theme || "base16-dark", //设置主题
autoCloseBrackets: true, // 括号自动关闭
autoCloseTags: true, // 标签自动关闭
matchTags: true, // 标签匹配
matchBrackets: this.matchBrackets || true, // 括号匹配
foldGutter: true, // 代码折叠
readOnly: this.readOnly ? "nocursor" : false, // boolean|string “nocursor” 设置只读外,编辑区域还不能获得焦点。
},
};
},
watch: {
value(value) {
const editorValue = this.codeEditor.getValue();
if (value !== editorValue) {
this.codeEditor.setValue(this.value);
}
},
immediate: true,
deep: true,
},
mounted() {
// 初始化
this._initialize();
},
methods: {
// 初始化
_initialize() {
// 初始化编辑器实例,传入需要被实例化的文本域对象和默认配置
this.codeEditor = CodeMirror.fromTextArea(
this.$refs.codeContainer,
this.defaultOptions
);
this.codeEditor.setValue(this.value);
// 使用 prop function 替换 onChange 事件
this.codeEditor.on("change", (item) => {
this.codeHandler(item.getValue());
});
},
},
};
</script>

插件启用功能的配置选项,同时需要引入相关的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.jsparseComponent 方法,用于实现源码解析生成组件 SFCDescriptor

暂不支持组件和样式的动态引入,此处功能代码已经移除。

// SFCDescriptor 接口声明
export interface SFCDescriptor {
template: SFCBlock | undefined; //
script: SFCBlock | undefined;
styles: SFCBlock[];
customBlocks: SFCBlock[];
} export interface SFCBlock {
type: string;
content: string;
attrs: Record<string, string>;
start?: number;
end?: number;
lang?: string;
src?: string;
scoped?: boolean;
module?: string | boolean;
}

SFCDescriptor 包含 templatescriptstylescustomBlocks 四个部分,将用于示例组件的动态构建。 其中 styles是数组,可以包含多个代码块并解析; templatescript 若存在多个代码块只能解析最后一个。

customBlocks是没在template的HTML代码,处理逻辑暂未包含此内容。

0x03 组件动态样式

文件src\utils\style-loader\addStylesClient.js 移植 vue-style-loader 源码 addStylesClient 方法,用于在页面DOM中动态创建组件样式。

根据 SFCDescriptor 中的 styles和组件编号,在DOM中添加对应样式内容,若新增删除 <style>,页面DOM中对应创建或移除该样式内容。若更新 <style>内容,DOM节点只更新对应块的内容,优化页面性能。

0x04 CodeViewer 组件

使用 JSX 语法实现组件核心代码。

<script>
export default {
name: "CodeViewer",
props: {
theme: { type: String, default: "dark" }, //light
source: { type: String },
},
data() {
return {
code: ``,
dynamicComponent: {
component: {
template: "<div>Hello Vue.js!</div>",
},
},
};
},
created() {
this.viewId = `vcv-${generateId()}`;
// 组件样式动态更新
this.stylesUpdateHandler = addStylesClient(this.viewId, {});
},
mounted() {
this._initialize();
},
methods: {
// 初始化
_initialize() {
...
},
// 生成组件
genComponent() {
...
},
// 更新 code 内容
handleCodeChange(val) {
...
},
// 动态组件render
renderPreview() {
...
},
},
computed: {
// 源码解析为sfcDescriptor
sfcDescriptor: function () {
return parseComponent(this.code);
},
},
watch: {
// 监听源码内容
code(newSource, oldSource) {
this.genComponent();
},
},
// JSX 渲染函数
render() {
...
},
};
</script>

组件初始化生成组件编号,注册方法 stylesUpdateHandler 用于样式的动态添加。

组件初始化调用 handleCodeChange 方法将传入prop source值赋值给code

methods: {
_initialize() {
this.handleCodeChange(this.source);
},
handleCodeChange(val) {
this.code = val;
},
}

计算属性sfcDescriptor 调用parseComponent方法解析code内容生成组件的 sfcDescriptor

computed: {
// 源码解析为sfcDescriptor
sfcDescriptor: function () {
return parseComponent(this.code);
},
},

组件监听code值是否发生变化,调用genComponent方法更新组件。

 methods: {
// 生成组件
genComponent() {
...
},
},
watch: {
// 监听源码内容
code(newSource, oldSource) {
this.genComponent();
},
},

方法 genComponent将代码的sfcDescriptor 动态生成组件,更新至 dynamicComponent 用于示例呈现。同时调用 stylesUpdateHandler方法使用addStylesClient在DOM中添加实例中样式,用于示例样式渲染。

  genComponent() {
const { template, script, styles, customBlocks, errors } = this.sfcDescriptor; const templateCode = template ? template.content.trim() : ``;
let scriptCode = script ? script.content.trim() : ``;
const styleCodes = genStyleInjectionCode(styles, this.viewId); // 构建组件
const demoComponent = {}; // 组件 script
if (!isEmpty(scriptCode)) {
const componentScript = {};
scriptCode = scriptCode.replace(
/export\s+default/,
"componentScript ="
);
eval(scriptCode);
extend(demoComponent, componentScript);
} // 组件 template
demoComponent.template = `<section id="${this.viewId}" class="result-box" >
${templateCode}
</section>`; // 组件 style
this.stylesUpdateHandler(styleCodes); // 组件内容更新
extend(this.dynamicComponent, {
name: this.viewId,
component: demoComponent,
});
},

JSX 渲染函数展示基于code内容动态生成的组件内容。调用 CodeEditor 组件传入源码value和主题theme,提供了 codeHandler 处理方法handleCodeChange用于获取编辑器内最新的代码。

  methods: {
renderPreview() {
const renderComponent = this.dynamicComponent.component; return (
<div class="code-view zoom-1">
<renderComponent></renderComponent>
</div>
);
},
},
// JSX 渲染函数
render() {
return (
<div ref="codeViewer">
<div class="code-view-wrapper">
{this.renderPreview()}
...
<CodeEditor
codeHandler={this.handleCodeChange}
theme={`base16-${this.theme}`}
value={this.code}
/>
</div>
</div>
);
},

handleCodeChange 被调用后,触发 watch =>genComponent=>render ,页面内容刷新,从而达到代码在线编辑,实时预览效果的功能。


完结

此组件编写是个人对于 Element 2 源码学习系列 学习实践的总结,希望会对您有所帮助!

从0到1搭建自己的组件(vue-code-view)库(下)的更多相关文章

  1. 从0到1搭建自己的组件(vue-code-view)库(上)

    0x00 前言 本文将从结构.功能等方面讲解下项目 vue-code-view 的搭建过程,您可以了解以下内容: 使用 vue cli 4从0搭建一个组件库及细致配置信息. 项目的多环境构建配置. 项 ...

  2. 从0到1搭建一款Vue可配置视频播放器组件(Npm已发布)

    前言 话不多说,这篇文章主要讲述如何从0到1搭建一款适用于Vue.js的自定义配置视频播放器.我们平时在PC端网站上观看视频时,会看到有很多丰富样式的视频播放器,而我们自己写的video标签样式却是那 ...

  3. django从0到1搭建网站

    曾经有人说我前端很水,那么在这一系列文章中我打算把前后端融合在一起来做一次网站的全面重构,希望可以把刚刚入行的同学带上正途   请尊重原创,转载请注明来源网站www.shareditor.com以及原 ...

  4. 使用vuejs2.0和element-ui 搭建的一个后台管理界面

    说明: 这是一个用vuejs2.0和element-ui搭建的后台管理界面. 相关技术: vuejs2.0:一套构建用户界面的渐进式JavaScript框架,易用.灵活.高效. element-ui: ...

  5. selenium win7+selenium2.0+python环境搭建

    win7+selenium2.0+python环境搭建 by:授客 QQ:1033553122 步骤1:下载python 担心最新版的支持不太好,这里我下载的是python 2.7(selenium之 ...

  6. iOS 从0到1搭建高可用App框架

    iOS 从0到1搭建高可用App框架 最近在搭建新项目的iOS框架,一直在思考如何才能搭建出高可用App框架,能否避免后期因为代码质量问题的重构.以前接手过许多“烂代码”,架构松散,底层混乱,缺少规范 ...

  7. 基于Vue搭建自己的组件库(1)

    本项目演示地址:https://husilang.github.io/zm-ui 项目参考文章:从零开始搭建Vue组件库 VV-UI 项目的初衷是学习怎么封装一个基于Vue的UI组件库,顺便记录每个步 ...

  8. 十七、.net core(.NET 6)搭建基于Quartz组件的定时调度任务

     搭建基于Quartz组件的定时调度任务 先在package包项目下,添加Quartz定时器组件: 新建类库项目Wsk.Core.QuartzNet,并且引用包类库项目.然后新建一个中间调度类,叫Qu ...

  9. 从零搭建react+ts组件库(封装antd)

    为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面 ...

随机推荐

  1. python函数模块

    python函数模块 学习完本篇,你将会深入掌握 函数相关知识 1.函数定义 2.函数如何调用 3.递归函数以及匿名函数使用 模块相关知识 1.模块如何导入调用 2.函数调用顺序 函数定义 函数代码块 ...

  2. PHP中操作数据库的预处理语句

    今天这篇文章的内容其实也是非常基础的内容,不过在现代化的开发中,大家都使用框架,已经很少人会去自己封装或者经常写底层的数据库操作代码了.所以这回我们就来复习一下数据库中相关扩展中的预处理语句内容. 什 ...

  3. php处理url的rawurlencode:可处理空格加号

    (PHP 4, PHP 5, PHP 7) rawurlencode - 按照 RFC 3986 对 URL 进行编码 返回字符串,此字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号( ...

  4. win10系统显示此电脑

    今天电脑开机后发现从任务栏进入"文件资源管理器",直接卡死,重启电脑也没有用. 我想到是不是从"此电脑"进入不会卡死,试了一下果真没有卡死. 使用win10系统 ...

  5. mysql8 navicat远程链接失败

    原因:mysql 8加密规则问题 更改加密规则: ALTER USER 'ycc'@'%' IDENTIFIED BY 'you password' PASSWORD EXPIRE NEVER; 修改 ...

  6. [转载]session多服务器共享的方案梳理

    转载网址: http://www.cnblogs.com/wangtao_20/archive/2013/10/29/3395518.html session的存储了解以前是怎么做的,搞清楚了来龙去脉 ...

  7. 鸿蒙内核源码分析(ELF解析篇) | 你要忘了她姐俩你就不是银 | 百篇博客分析OpenHarmony源码 | v53.02

    百篇博客系列篇.本篇为: v53.xx 鸿蒙内核源码分析(ELF解析篇) | 你要忘了她姐俩你就不是银 | 51.c.h.o 加载运行相关篇为: v51.xx 鸿蒙内核源码分析(ELF格式篇) | 应 ...

  8. PolarDB PostgreSQL logindex 设计

    背景介绍 PolarDB采用了共享存储一写多读架构,读写节点RW和多个只读节点RO共享同一份存储,读写节点可以读写共享存储中的数据:只读节点仅能各自通过回放日志,从共享存储中读取数据,而不能写入,只读 ...

  9. Loj#2880-「JOISC 2014 Day3」稻草人【CDQ分治,单调栈,二分】

    正题 题目链接:https://loj.ac/problem/2880 题目大意 给出平面上的\(n\)个点,然后求有多少个矩形满足 左下角和右上角各有一个点 矩形之间没有其他点 \(1\leq n\ ...

  10. IOS开发之UIScrollView约束布局

    概要 在iOS开发学习中,UIScrollView是绕不过去的一个重要控件. 但是相对于Android的ScrollView,iOS的这个滚动控件的用法简直是复杂一万倍... 最主要是目前能找到的大部 ...