vue-codemirror + Java Compiler实现Java Web IDE

背景

最近同事告诉我一个很有趣的需求：让用户（应用场景中，一般为其他开发者）自己填入Java代码片段，代码片段的内容为已经规定好的模板类的继承类，实现模板类定义的方法。我们的项目要实现动态编译代码片段，存储代码片段和用户操作记录的映射关系，并能够在业务中载入代码片段执行。

这有点像我们提供一个模板模式的架构，只不过模板类的实现类由外部接口填入代码片段动态实现。相较让其他开发者直接参与项目开发，无疑：

1. 降低了侵入风险
2. 向其他开发者隐藏了大部分实现
3. 降低操作难度和开发门槛
4. 便于管理

……

这相当于要实现一个简单的在线Java开发环境，提供基础的代码填写、编译和保存的功能。

效果演示

基于vue-codemirror和Java Compiler的动态编译，实现了上述需求，目前完成的Web端IDE主要功能点包括：

• 页面展示Java代码块（代码高亮，有行号、可自动补全括号等）
• 从服务端获取模板类代码，并提供示例
• 实时动态编译并获取编译结果（通过/失败 todo:返回编译错误信息)
• 将输入字符串加载成Java Class
  
  以及小的功能点：自动缩进、补全括号、切换主题、联动填写类名等等。
  
  下面给出涉及到的技术和实现方法。

---

CodeMirror

CodeMirror是一个JS库，可以支持实现有丰富的附加功能和多种语言支持。我们项目的前端使用Vue框架，可以很方便地集成并使用CodeMirror提供的插件，实现我们的在线IDE多种特性。

参考：CodeMirror官网

引入

安装依赖： "vue-codemirror": "^4.0.6"

在src目录下的main.js中引入：

import VueCodeMirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodeMirror)

使用

新建组件JavaIDE.vue

<template>
    <codemirror ref="codeMirrorEditor" :value="code" :options="cmOptions" @changes="onChange">
  </codemirror>
  </template>
  <script>
      import codemirror from "codemirror/lib/codemirror";
      require("codemirror/mode/clike/clike.js");
      require("codemirror/addon/edit/closebrackets.js");
      components: {
          codemirror;
      }
      export default{
          data(){
              return{
                code: "",
                cmOptions:{
                    mode: "text/x-java",  //Java语言
                    theme: "darcula", // 默认主题
                    autofocus: true,
                    lineNumbers: true,   //显示行号
                    smartIndent: true, // 自动缩进
                    autoCloseBrackets: true// 自动补全括号
                }
              }
          }
  </script>

组件化地使用它，我们可以方便地操作它绑定的值（code）和其他附加选项（cmOption)。

在组件创建时为code赋值，即可实现加载模板代码。

根据官网，我们可以直接使用CodeMirror的默认构造函数，也可以提供一个textarea DOM元素作为构造CodeMirror对象的参数。

可以使用readOnly参数将代码块设置为只读。

联动填写类名功能

希望实现：在上面顶栏中填写类名，在代码中联动填写。

实现方式： 使用正则匹配替换代码片段，再进行替换

使用相同的方法，也可以实现动态补全类名等功能

参考更多JavaScript的正则表达式

为输入框加上监听函数@input="changeClassName"

 changeClassName(className) {
    var reg = new RegExp(/public class .*? extends ActionParamBuilder/);
    this.code = this.code.replace(reg,
                    "public class " + className + " extends ActionParamBuilder"
   );
 }

切换主题

引入主题css样式文件

 import "codemirror/theme/eclipse.css";
 import "codemirror/theme/darcula.css";
 import "codemirror/theme/blackboard.css";

使用String数组定义支持的主题，并使用 Element-UI提供的Select组件支持主题切换：

<el-select v-model="cmOptions.theme" placeholder="切换主题" @change="changeTheme">
          <span slot="prefix">
             <el-tooltip content="更换主题">
              <a-icon type="skin" style="fontSize:16px;line-height=50px;"/>
      </el-tooltip>
      </span>
 <el-option v-for="(item,index) in supportThemes" :key="index" :label="item" :value="item">
   </el-option>
</el-select>

• 使用slot实现在选择器中嵌入图标，并支持tooltip功能，使工具栏更加紧凑。 slot意为插槽，是封装好的组件预留的可以自定义的空间，我们可以使用slot = ""把DOM元素置入到组件内部，非常灵活。

样式覆写

使用!important关键字覆盖原有CodeMirror样式。注意，将该样式放在全局而不是局部scoped样式表中。

.CodeMirror {
     height: 500px !important;
 }

JavaCompiler

不用将传入的代码保存成.java文件写入磁盘，直接就可以使用JavaCompiler工具对字符串进行编译。

为了实现实时动态编译功能，我搜索了关于如何将字符串编译成class的方法，还看了一些动态代理的实现思路。后来看到这一篇：Java运行时动态生成class的方法，发现这就是我想要的！

使用Java SDK（since 1.6）提供的JavaCompiler工具。该工具提供编译方法：

  CompilationTask getTask(Writer out,
                            JavaFileManager fileManager,
                            DiagnosticListener<? super JavaFileObject> diagnosticListener,
                            Iterable<String> options,
                            Iterable<String> classes,
                            Iterable<? extends JavaFileObject> compilationUnits);

• JavaFileManager
  
  自定义MemoryJavaFileManager，继承ForwardingJavaFileManager<JavaFileManager>，实现从内存字符串中读取JavaFileObject
  
  重点是下面这个方法：

	JavaFileObject makeStringSource(String name, String code) {
		return new MemoryInputJavaFileObject(name, code);
	}
	static class MemoryInputJavaFileObject extends SimpleJavaFileObject {
		final String code;
		MemoryInputJavaFileObject(String name, String code) {
			super(URI.create("string:///" + name), Kind.SOURCE);
			this.code = code;
		}
		@Override
		public CharBuffer getCharContent(boolean ignoreEncodingErrors) {
			return CharBuffer.wrap(code);
		}
	}

• options，可选参数列表，可以增加外部Jar包依赖
  
  因为我们所需要编译的代码里依赖的类来源于外部的Jar包，所以需要将这些Jar包使用option将这些依赖加进去。这一步踩了坑，因为之前没用过，不知道怎么写……最后终于找到了正确的写法：
  
  List<String> optionList =Arrays.asList("-extdirs",extLib);

extLib是外部jar包的路径（目录地址）。可以使用路径分隔符填入多个路径。
• DiagnosticListener 诊断信息监听
  
  加入诊断信息监听器，我们可以拿到编译错误信息，把这些信息反馈给前端，实现实时编译并报错的功能。
  
  DiagnosticCollector diagnosticCollector = new DiagnosticCollector();
• JavaFileObject 待编译的Java对象，调用自定义类MemoryJavaFileManager 的makeStringSource方法。可以传入一组编译单元。
  
  完整方法如下：

public Map<String, byte[]> compile(String fileName, String source,String extLib) throws IOException {
		try (MemoryJavaFileManager manager = new MemoryJavaFileManager(stdManager)) {
			JavaFileObject javaFileObject = manager.makeStringSource(fileName, source);
            // 传入诊断监听器 size和传入的javaObject相同
            DiagnosticCollector diagnosticCollector = new DiagnosticCollector();
			List<String> optionList =Arrays.asList("-extdirs",extLib);
			CompilationTask task = compiler.getTask(null, manager,diagnosticCollector, optionList, null, Arrays.asList(javaFileObject));
			Boolean result = task.call();
			if (result == null || !result.booleanValue()) {
				throw new RuntimeException("Compilation failed.");
			}
			return manager.getClassBytes();
		}
	}

调用代码：

 Map<String, byte[]> results = javaStringCompiler.compile(className + ".java", CODE_TO_COMPILE, libDir);

自定义ClassLoader

参考《Java编程的逻辑》中24.5中内容，我们可以使用自定义的ClassLoader来加载用户代码片段，成为可调用的Class对象。

• 继承URLClassLoader
• 重写findClass方法

class MemoryClassLoader extends URLClassLoader {

	// class name to class bytes:
	Map<String, byte[]> classBytes = new HashMap<String, byte[]>();

	public MemoryClassLoader(Map<String, byte[]> classBytes) {
		super(new URL[0], MemoryClassLoader.class.getClassLoader());
		this.classBytes.putAll(classBytes);
	}

	@Override
	protected Class<?> findClass(String name) throws ClassNotFoundException {
		byte[] buf = classBytes.get(name);
		if (buf == null) {
			return super.findClass(name);
		}
		classBytes.remove(name);
		return defineClass(name, buf, 0, buf.length);
	}

}

自定义类加载器有如下好处：

• 可以自定义读取class文件字节码方法和形式，如：从内存中、指定jar包中，或从数据库/网络读取等
• 实现隔离，可以实现使用同一个类的不同版本
• 实现热部署，动态更新类的内容

总结

本篇中主要涉及知识点:

• vue-codemirror集成和使用
• JavaCompiler的使用
• JavaScript正则和Vue中的插槽（slot）
• 自定义ClassLoader实现动态加载