前言

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？
分享鏈接：http://vcdvsql.cn/news7/325157.html

成都網站建設公司_創新互聯，為您提供網站改版、域名注冊、靜態網站、商城網站、網站內鏈、標簽優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯