很多朋友对于mirror前端(前端程序员：如何用javascript开发一款在线IDE和mirror前端(前端程序员：如何用javascript开发一款在线IDE不太懂，今天就由小编来为大家分享，希望可以帮助到大家，接下来一起来看看吧！
1.1 技术选型
以下是笔者实现的效果图：
1.2 实现细节
对于以上笔者列出的koa和react的技术方案不熟悉的大家可以先了解一下，笔者这里直接实现具体逻辑。
我们先用umi来创建工程，然后在根目录新建server.js文件。该文件主要用来处理nodejs相关逻辑，在稍后我会详细介绍。
import {UnControlled as CodeMirror} from 'react-codemirror2';require('codemirror/mode/xml/xml');require('codemirror/mode/javascript/javascript');export default function() { // ... return (
@import '~codemirror/lib/codemirror.css';@import '~codemirror/theme/material.css';
为了实现预览功能，笔者之前想了两种方案，一种是直接通过页面组件的方式来实现预览，但是缺点是只有dom和样式更新能生效，如果编写js代码，由于react的内部机制是无法直接执行script的。
另一种方案是iframe，这种方案可以很好地隔离react和预览代码，实现机制如下：
const handleChange = (editor, data, value) => { fetchPage(value)}const fetchPage = (v) => { if(timer) clearTimeout(timer); timer = setTimeout(() => { fetch('', {method: 'POST', body: v}).then(res => { html = v setUpdate(prev => !prev) }); }, 1000);}
const onCursorChange = (editor, data) => { const { line, ch } = data setCursor({ line, ch })}// ...
至此我们的核心功能就实现了，如下图：
H5-Dooring
对于界面中的下载html功能以及一件部署的功能都比较简单，笔者已将代码提交到github，感兴趣的可以学习了解一下。
1.3 服务端实现
服务端实现主要是写请求接口来存储html页面以及直出html页面，对于跨域请求我们还需要处理跨域问题， 由于代码逻辑比较简单， 这里笔者的实现代码如下：
H5-Dooring
3. 总结
以上教程笔者的一个简单版本，基本上可以实现在线写前端代码，对于一些更复杂的功能，通过合理的设计也是可以实现的，大家可以自行探索，笔者已将在线编写H5页面的代码和逻辑集成到H5-Dooring项目里，大家可以自行下载学习。
github地址：H5-Dooring
如果想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。
关于mirror前端(前端程序员：如何用javascript开发一款在线IDE，mirror前端(前端程序员：如何用javascript开发一款在线IDE的介绍到此结束，希望对大家有所帮助。
