前端程序员：如何用javascript开发一款在线IDE？

前言

3年前在AWS re:Invent 大会上AWS宣布推出Cloud9, 用于在云端编写、运行和调试代码，它可以直接运行在浏览器中，也就是传说中的Web IDE。3年后的今天随着国内云计算的发展, 各大云计算服务厂商都在部署自己的WEB IDE, 而且已经有非常成熟的落地方案, 对于这一块的技术原理和实现, 也非常值得我们去学习和剖析.

目前比较成熟的WEB IDE方案有CodeSandbox,Cloud Studio等, 接下来笔者将实现一个简单的WEB IDE, 来带大家了解其原理和实现过程.

正文

笔者接下来会介绍WEB IDE的实现原理和应用场景, 并介绍如何在H5-Dooring中使用它.

1. web编辑器实现原理

我们先来看看一个成熟WEB IDE的结构:

抽象出来可以分为3个核心部分:文件导航区代码编辑区 * 预览容器

如下图所示:

在把模块抽象出来之后我们来思考具体的功能实现. 对于文件导航区我们可以很容易地使用react/vue的ui库来实现, 对于文件保存, 目录树生成等我们可以使用nodejs + DB(如mysql,Redis)来实现. 代码编辑区我们可以用第三方成熟的库比如react-codemirror2或者react-monaco-editor来做. 由于预览容器我们不清楚预览类型(如小程序,web页面还是app), 所以这里我们暂时考虑web页面容器, 也就是我们比较熟悉的iframe. 那么我们可以画出如下技术实现图:

实际上WEB IED实现过程远比上面的复杂, 我们这里只做简单的抽象. 我们接下来梳理一下在线代码编辑器的需求：支持在线编写前端代码（html，javascript，css）支持实时预览 * 支持代码在线下载

1.1 技术选型

在了解了以上实现方式之后, 我们开始来搭建环境并进行代码开发. 以下列举我们的技术选型：koa基于nodejs的服务端框架koa-static基于koa的静态资源中间件koa-body解析请求体的中间件koa2-cors处理跨域的中间件koa-logger处理请求日志的中间件react前端框架react-codemirror2代码编辑器antd基于react的前端组件库

以下是笔者实现的效果图：

1.2 实现细节

对于以上笔者列出的koa和react的技术方案不熟悉的大家可以先了解一下，笔者这里直接实现具体逻辑。

我们先用umi来创建工程，然后在根目录新建server.js文件。该文件主要用来处理nodejs相关逻辑，在稍后我会详细介绍。

界面的实现笔者不一一介绍了，前端模块笔者来介绍一下如何配置代码编辑器。react-codemirror2基本使用方式如下：

import{UnControlledasCodeMirror}fromreact-codemirror2;require(codemirror/mode/xml/xml);require(codemirror/mode/javascript/javascript);exportdefaultfunction(){// ...return(<CodeMirrorclassName={styles.codeWrap}value={html}options={{mode:xml,theme:material,lineNumbers:true}}onChange={handleChange}cursor={cursor}onCursor={onCursorChange}/>); }

通过以上方式我们就能生成一个基本的代码编辑器，需要注意的是我们需要再单独引入对应的主题样式文件：

@import~codemirror/lib/codemirror.css;@import~codemirror/theme/material.css;

为了实现预览功能，笔者之前想了两种方案，一种是直接通过页面组件的方式来实现预览，但是缺点是只有dom和样式更新能生效，如果编写js代码，由于react的内部机制是无法直接执行script的。

另一种方案是iframe，这种方案可以很好地隔离react和预览代码，实现机制如下：

也就是说我们在代码编辑器里编辑完代码之后统一通过请求的方式保存在node端，然后通过iframe请求nodejs渲染的静态页面来实现预览功能。有点类似服务端渲染的感觉。

那么如何保证实时预览呢？这块完全可以设计成用户手动点击预览，也是笔者最初的设想，但是为了增强用户体验，笔者决定采用实时预览， 也就是用户代码的变化可以实时反应在预览窗口。方案就是在onChange中更新state来实现rerender，这一点用react hooks很好实现。但是实时更新对性能很不友好， 所以为了提高预览性能和页面体验，笔者在这里使用防抖来控制请求频次和时机。代码如下：

consthandleChange =(editor, data, value) =>{ fetchPage(value) }constfetchPage =(v) =>{if(timer) clearTimeout(timer); timer = setTimeout(()=>{ fetch(http://localhost:80/dooring/render, {method:POST,body: v}).then(res=>{ html = v setUpdate(prev=>!prev) }); },1000); }

在开发中还遇到同一个问题就是iframe每刷新一次，代码编辑器的光标都会被重置，这一点对用户在线coding的体验非常不好，所以笔者又看了一遍官方文档，找到了cursor这个有意思的api，中文的意思就是说可以手动设置光标停止的位置，那么我们在每次光标变化的时候都强制设置为当前光标所在的位置，那么就不会应为iframe刷新的影响而被迫触发失焦动作了。 代码实现如下：

constonCursorChange = (editor, data) => {const{ line, ch } = datasetCursor({line, ch })}//...

网页题目：前端程序员：如何用javascript开发一款在线IDE？
分享链接：https://www.cdcxhl.com/news7/325157.html

成都网站建设公司_创新互联，为您提供网站改版、域名注册、静态网站、商城网站、网站内链、标签优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联