快速搭建一個代碼在線編輯預覽工具

時間  2021-08-12
標籤 javascript css html 前端 vue java react webpack git github 欄目 JavaScript 简体版
原文   原文鏈接

簡介

你們好，我是一個閒着沒事熱衷於重複造輪子的不知名前端，今天給你們帶來的是一個代碼在線編輯預覽工具的實現介紹，目前這類工具使用很普遍，常見於各類文檔網站及代碼分享場景，相關工具也比較多，如codepen、jsrun、codesandbox、jsbin、plnkr、jsfiddle等，這些工具大致分兩類，一類能夠自由添加多個文件，比較像咱們日常使用的編輯器，另外一類固定只能單獨編輯html、js、css，第二類比較常見，對於demo場景來講其實已經夠用，固然，說的只是表象，底層實現方式可能仍是各有千秋的。javascript

本文主要介紹的是第二類其中的一種實現方式，徹底不依賴於後端，全部邏輯都在前端完成，實現起來至關簡單，使用的是vue3全家桶來開發，使用其餘框架也徹底能夠。css

ps.在本文基礎上筆者開發了一個完整的線上工具，帶雲端保存，地址：lxqnsys.com/code-run/，歡迎使用。html

頁面結構

image-20210427170009062.png

我挑了一個比較典型也比較好看的結構來仿照，默認佈局上下分紅四部分，工具欄、編輯器、預覽區域及控制檯，編輯器又分爲三部分，分別是HTML、CSS、JavaScript，其實就是三個編輯器，用來編輯代碼。前端

各部分均可以拖動進行調節大小，好比按住js編輯器左邊的灰色豎條向右拖動，那麼js編輯器的寬度會減小，同時css編輯器的寬度會增長，若是向左拖動，那麼css編輯器寬度會減小，js編輯器的寬度會增長，當css編輯器寬度已經不能再減小的時候css編輯器也會同時向左移，而後減小html的寬度。vue

在實現上，水平調節寬度和垂直調節高度原理是同樣的，以調節寬度爲例，三個編輯器的寬度使用一個數組來維護，用百分比來表示，那麼初始就是100/3%，而後每一個編輯器都有一個拖動條，位於內部的左側，那麼當按住拖動某個拖動條拖動時的邏輯以下：java

1.把本次拖動瞬間的偏移量由像素轉換爲百分比；react

2.若是是向左拖動的話，檢測本次拖動編輯器的左側是否存在還有空間能夠壓縮的編輯器，沒有的話表明不能進行拖動；若是有的話，那麼拖動時增長本次拖動編輯器的寬度，同時減小找到的第一個有空間的編輯器的寬度，直到沒法再繼續拖動；webpack

3.若是是向右拖動的話，檢測本次拖動編輯器及其右側是否存在還有空間能夠壓縮的編輯器，沒有的話也表明不能再拖動，若是有的話，找到第一個並減小該編輯器的寬度，同時增長本次拖動編輯器左側第一個編輯器的寬度；git

核心代碼以下：github

const onDrag = (index, e) => {
    let client = this._dir === 'v' ? e.clientY : e.clientX
    // 本次移動的距離
    let dx = client - this._last
    // 換算成百分比
    let rx = (dx / this._containerSize) * 100
    // 更新上一次的鼠標位置
    this._last = client
    if (dx < 0) {
        // 向左/上拖動
        if (!this.isCanDrag('leftUp', index)) {
            return
        }
        // 拖動中的編輯器增長寬度
        if (this._dragItemList.value[index][this._prop] - rx < this.getMaxSize(index)) {
            this._dragItemList.value[index][this._prop] -= rx
        } else {
            this._dragItemList.value[index][this._prop] = this.getMaxSize(index)
        }
        // 找到左邊第一個還有空間的編輯器索引
        let narrowItemIndex = this.getFirstNarrowItemIndex('leftUp', index)
        let _minSize = this.getMinSize(narrowItemIndex)
        // 左邊的編輯器要同比減小寬度
        if (narrowItemIndex >= 0) {
            // 加上本次偏移還大於最小寬度
            if (this._dragItemList.value[narrowItemIndex][this._prop] + rx > _minSize) {
                this._dragItemList.value[narrowItemIndex][this._prop] += rx
            } else {
                // 不然固定爲最小寬度
                this._dragItemList.value[narrowItemIndex][this._prop] = _minSize
            }
        }
    } else if (dx > 0) {
        // 向右/下拖動
        if (!this.isCanDrag('rightDown', index)) {
            return
        }
        // 找到拖動中的編輯器及其右邊的編輯器中的第一個還有空間的編輯器索引
        let narrowItemIndex = this.getFirstNarrowItemIndex('rightDown', index)
        let _minSize = this.getMinSize(narrowItemIndex)
        if (narrowItemIndex <= this._dragItemList.value.length - 1) {
            let ax = 0
            // 減去本次偏移還大於最小寬度
            if (this._dragItemList.value[narrowItemIndex][this._prop] - rx > _minSize) {
                ax = rx
            } else {
                // 不然本次能移動的距離爲到達最小寬度的距離
                ax = this._dragItemList.value[narrowItemIndex][this._prop] - _minSize
            }
            // 更新拖動中的編輯器的寬度
            this._dragItemList.value[narrowItemIndex][this._prop] -= ax
            // 左邊第一個編輯器要同比增長寬度
            if (index > 0) {
                if (this._dragItemList.value[index - 1][this._prop] + ax < this.getMaxSize(index - 1)) {
                    this._dragItemList.value[index - 1][this._prop] += ax
                } else {
                    this._dragItemList.value[index - 1][this._prop] = this.getMaxSize(index - 1)
                }
            }
        }
    }
}
複製代碼

實現效果以下：

2021-04-29-19-15-42.gif

爲了能提供多種佈局的隨意切換，咱們有必要把上述邏輯封裝一下，封裝成兩個組件，一個容器組件Drag.vue，一個容器的子組件DragItem.vue，DragItem經過slot來顯示其餘內容，DragItem主要提供拖動條及綁定相關的鼠標事件，Drag組件裏包含了上述提到的核心邏輯，維護對應的尺寸數組，提供相關處理方法給DragItem綁定的鼠標事件，而後只要根據所需的結構進行組合便可，下面的結構就是上述默認的佈局：

<Drag :number="3" dir="v" :config="[{ min: 0 }, null, { min: 48 }]">
    <DragItem :index="0" :disabled="true" :showTouchBar="false">
        <Editor></Editor>
    </DragItem>
    <DragItem :index="1" :disabled="false" title="預覽">
        <Preview></Preview>
    </DragItem>
    <DragItem :index="2" :disabled="false" title="控制檯">
        <Console></Console>
    </DragItem>
</Drag>
複製代碼

這部分代碼較多，有興趣的能夠查看源碼。

編輯器

目前涉及到代碼編輯的場景基本使用的都是codemirror，由於它功能強大，使用簡單，支持語法高亮、支持多種語言和主題等，可是爲了能更方便的支持語法提示，本文選擇的是微軟的monaco-editor，功能和VSCode同樣強大，VSCode有多強就不用我多說了，缺點是總體比較複雜，代碼量大，內置主題較少。

monaco-editor支持多種加載方式，esm模塊加載的方式須要使用webpack，可是vite底層打包工具用的是Rollup，因此本文使用直接引入js的方式。

在官網上下載壓縮包後解壓到項目的public文件夾下，而後參考示例的方式在index.html文件裏添加：

<link rel="stylesheet" data-name="vs/editor/editor.main" href="/monaco-editor/min/vs/editor/editor.main.css" />

<script> var require = { paths: { vs: '/monaco-editor/min/vs' }, 'vs/nls': { availableLanguages: { '*': 'zh-cn'// 使用中文語言，默認爲英文 } } }; </script>
<script src="/monaco-editor/min/vs/loader.js"></script>
<script src="/monaco-editor/min/vs/editor/editor.main.js"></script>
複製代碼

monaco-editor內置了10種語言，咱們選擇中文的，其餘不用的能夠直接刪掉：

image-20210430163748892.png

接下來建立編輯器就能夠了：

const editor = monaco.editor.create(
    editorEl.value,// dom容器
    {
        value: props.content,// 要顯示的代碼
        language: props.language,// 代碼語言，css、javascript等
        minimap: {
            enabled: false,// 關閉小地圖
        },
        wordWrap: 'on', // 代碼超出換行
        theme: 'vs-dark'// 主題
    }
)
複製代碼

就這麼簡單，一個帶高亮、語法提示、錯誤提示的編輯器就可使用了，效果以下：

image-20210430154406199.png

其餘幾個經常使用的api以下：

// 設置文檔內容
editor.setValue(props.content)
// 監聽編輯事件
editor.onDidChangeModelContent((e) => {
    console.log(editor.getValue())// 獲取文檔內容
})
// 監聽失焦事件
editor.onDidBlurEditorText((e) => {
    console.log(editor.getValue())
})
複製代碼

預覽

代碼有了，接下來就能夠渲染頁面進行預覽了，對於預覽，顯然是使用iframe，iframe除了src屬性外，HTML5還新增了一個屬性srcdoc，用來渲染一段HTML代碼到iframe裏，這個屬性IE目前不支持，不過vue3都要不支持IE了，咱也無論了，若是硬要支持也簡單，使用write方法就好了：

iframeRef.value.contentWindow.document.write(htmlStr)
複製代碼

接下來的思路就很清晰了，把html、css和js代碼組裝起來扔給srcdoc不就完了嗎：

<iframe class="iframe" :srcdoc="srcdoc"></iframe>
複製代碼
const assembleHtml = (head, body) => {
    return `<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> ${head} </head> <body> ${body} </body> </html>`
}

const run = () => {
  let head = ` <title>預覽<\/title> <style type="text/css"> ${editData.value.code.css.content} <\/style> `
  let body = ` ${editData.value.code.html.content} <script> ${editData.value.code.javascript.content} <\/script> `
  let str = assembleHtml(head, body)
  srcdoc.value = str
}
複製代碼

效果以下：

image-20210507141946844.png

爲了防止js代碼運行出現錯誤阻塞頁面渲染，咱們把js代碼使用try catch包裹起來：

let body = ` ${editData.value.code.html.content} <script> try { ${editData.value.code.javascript.content} } catch (err) { console.error('js代碼運行出錯') console.error(err) } <\/script> `
複製代碼

控制檯

極簡方式

先介紹一種很是簡單的方式，使用一個叫eruda的庫，這個庫是用來方便在手機上進行調試的，和vConsole相似，咱們直接把它嵌到iframe裏就能夠支持控制檯的功能了，要嵌入iframe裏的文件咱們都要放到public文件夾下：

const run = () => {
  let head = ` <title>預覽<\/title> <style type="text/css"> ${editData.value.code.css.content} <\/style> `
  let body = ` ${editData.value.code.html.content} <script src="/eruda/eruda.js"><\/script> <script> eruda.init(); ${editData.value.code.javascript.content} <\/script> `
  let str = assembleHtml(head, body)
  srcdoc.value = str
}
複製代碼

效果以下：

image-20210507154345054.png

這種方式的缺點是隻能嵌入到iframe裏，不能把控制檯和頁面分開，致使每次代碼從新運行，控制檯也會從新運行，沒法保留以前的日誌，固然，樣式也不方便控制。

本身實現

若是選擇本身實現的話，那麼這部分會是本項目裏最複雜的，本身實現的話通常只實現一個console的功能，其餘的好比html結構、請求資源之類的就不作了，畢竟實現起來費時費力，用處也不是很大。

console大致上要支持輸出兩種信息，一是console對象打印出來的信息，二是各類報錯信息，先看console信息。

console信息

思路很簡單，在iframe裏攔截console對象的全部方法，當某個方法被調用時使用postMessage來向父頁面傳遞信息，父頁面的控制檯打印出對應的信息便可。

// /public/console/index.js

// 重寫的console對象的構造函數，直接修改console對象的方法進行攔截的方式是不行的，有興趣能夠自行嘗試
function ProxyConsole() {};
// 攔截console的全部方法
[
    'debug',
    'clear',
    'error',
    'info',
    'log',
    'warn',
    'dir',
    'props',
    'group',
    'groupEnd',
    'dirxml',
    'table',
    'trace',
    'assert',
    'count',
    'markTimeline',
    'profile',
    'profileEnd',
    'time',
    'timeEnd',
    'timeStamp',
    'groupCollapsed'
].forEach((method) => {
    let originMethod = console[method]
    // 設置原型方法
    ProxyConsole.prototype[method] = function (...args) {
        // 發送信息給父窗口
        window.parent.postMessage({
            type: 'console',
            method,
            data: args
        })
        // 調用原始方法
        originMethod.apply(ProxyConsole, args)
    }
})
// 覆蓋原console對象
window.console = new ProxyConsole()
複製代碼

把這個文件也嵌入到iframe裏：

const run = () => {
  let head = ` <title>預覽<\/title> <style type="text/css"> ${editData.value.code.css.content} <\/style> <script src="/console/index.js"><\/script> `
  // ...
}
複製代碼

父頁面監聽message事件便可：

window.addEventListener('message', (e) => {
  console.log(e)
})
複製代碼

若是以下：

image-20210507165953197.png

監聽獲取到了信息就能夠顯示出來，咱們一步步來看：

首先console的方法均可以同時接收多個參數，打印多個數據，同時打印的在同一行進行顯示。

1.基本數據類型

基本數據類型只要都轉成字符串顯示出來就能夠了，無非是使用顏色區分一下：

// /public/console/index.js

// ...

window.parent.postMessage({
    type: 'console',
    method,
    data: args.map((item) => {// 對每一個要打印的數據進行處理
        return handleData(item)
    })
})

// ...

// 處理數據
const handleData = (content) => {
    let contentType = type(content)
    switch (contentType) {
        case 'boolean': // 布爾值
            content = content ? 'true' : 'false'
            break;
        case 'null': // null
            content = 'null'
            break;
        case 'undefined': // undefined
            content = 'undefined'
            break;
        case 'symbol': // Symbol，Symbol不能直接經過postMessage進行傳遞，會報錯，須要轉成字符串
            content = content.toString()
            break;
        default:
            break;
    }
    return {
        contentType,
        content,
    }
}
複製代碼
// 日誌列表
const logList = ref([])

// 監聽iframe信息
window.addEventListener('message', ({ data = {} }) => {
  if (data.type === 'console') 
    logList.value.push({
      type: data.method,// console的方法名
      data: data.data// 要顯示的信息，一個數組，可能同時打印多條信息
    })
  }
})
複製代碼
<div class="logBox">
    <div class="logRow" v-for="(log, index) in logList" :key="index">
        <template v-for="(logItem, itemIndex) in log.data" :key="itemIndex">
            <!-- 基本數據類型 -->
            <div class="logItem message" :class="[logItem.contentType]" v-html="logItem.content"></div>
        </template>
    </div>
</div>
複製代碼

image-20210508091625420.png

2.函數

函數只要調用toString方法轉成字符串便可：

const handleData = (content) => {
        let contentType = type(content)
        switch (contentType) {
            // ...
            case 'function':
                content = content.toString()
                break;
            default:
                break;
        }
    }
複製代碼

3.json數據

json數據須要格式化後進行顯示，也就是帶高亮、帶縮進，以及支持展開收縮。

實現也很簡單，高亮能夠經過css類名控制，縮進換行可使用div和span來包裹，具體實現就是像深拷貝同樣深度優先遍歷json樹，對象或數組的話就使用一個div來總體包裹，這樣能夠很方便的實現總體縮進，具體到對象或數組的某項時也使用div來實現換行，須要注意的是若是是做爲對象的某個屬性的值的話，須要使用span來和屬性及冒號顯示在同一行，此外，也要考慮到循環引用的狀況。

展開收縮時針對非空的對象和數組，因此能夠在遍歷下級屬性以前添加一個按鈕元素，按鈕相對於最外層元素使用絕對定位。

const handleData = (content) => {
    let contentType = type(content)
    switch (contentType) {
            // ...
        case 'array': // 數組
        case 'object': // 對象
            content = stringify(content, false, true, [])
            break;
        default:
            break;
    }
}

// 序列化json數據變成html字符串
/* data:數據 hasKey：是不是做爲一個key的屬性值 isLast：是否在所在對象或數組中的最後一項 visited：已經遍歷過的對象/數組，用來檢測循環引用 */
const stringify = (data, hasKey, isLast, visited) => {
    let contentType = type(data)
    let str = ''
    let len = 0
    let lastComma = isLast ? '' : ',' // 當數組或對象在最後一項時，不須要顯示逗號
    switch (contentType) {
        case 'object': // 對象
            // 檢測到循環引用就直接終止遍歷
            if (visited.includes(data)) {
                str += `<span class="string">檢測到循環引用</span>`
            } else {
                visited.push(data)
                let keys = Object.keys(data)
                len = keys.length
                // 空對象
                if (len <= 0) {
                    // 若是該對象是做爲某個屬性的值的話，那麼左括號要和key顯示在同一行
                    str += hasKey ? `<span class="bracket">{ }${lastComma}</span>` : `<div class="bracket">{ }${lastComma}</div>`
                } else { // 非空對象
                    // expandBtn是展開和收縮按鈕
                    str += `<span class="el-icon-arrow-right expandBtn"></span>`
                    str += hasKey ? `<span class="bracket">{</span>` : '<div class="bracket">{</div>'
                    // 這個wrap的div用來實現展開和收縮功能
                    str += '<div class="wrap">'
                    // 遍歷對象的全部屬性
                    keys.forEach((key, index) => {
                        // 是不是數組或對象
                        let childIsJson = ['object', 'array'].includes(type(data[key]))
                        // 最後一項不顯示逗號
                        str += ` <div class="objectItem"> <span class="key">\"${key}\"</span> <span class="colon">:</span> ${stringify(data[key], true, index >= len - 1, visited)}${index < len - 1 && !childIsJson ? ',' : ''} </div>`
                    })
                    str += '</div>'
                    str += `<div class="bracket">}${lastComma}</div>`
                }
            }
            break;
        case 'array': // 數組
            if (visited.includes(data)) {
                str += `<span class="string">檢測到循環引用</span>`
            } else {
                visited.push(data)
                len = data.length
                // 空數組
                if (len <= 0) {
                    // 若是該數組是做爲某個屬性的值的話，那麼左括號要和key顯示在同一行
                    str += hasKey ? `<span class="bracket">[ ]${lastComma}</span>` : `<div class="bracket">[ ]${lastComma}</div>`
                } else { // 非空數組
                    str += `<span class="el-icon-arrow-right expandBtn"></span>`
                    str += hasKey ? `<span class="bracket">[</span>` : '<div class="bracket">[</div>'
                    str += '<div class="wrap">'
                    data.forEach((item, index) => {
                        // 最後一項不顯示逗號
                        str += ` <div class="arrayItem"> ${stringify(item, true, index >= len - 1, visited)}${index < len - 1 ? ',' : ''} </div>`
                    })
                    str += '</div>'
                    str += `<div class="bracket">]${lastComma}</div>`
                }
            }
            break;
        default: // 其餘類型
            let res = handleData(data)
            let quotationMarks = res.contentType === 'string' ? '\"' : '' // 字符串添加雙引號
            str += `<span class="${res.contentType}">${quotationMarks}${res.content}${quotationMarks}</span>`
            break;
    }
    return str
}
複製代碼

模板部分也增長一下對json數據的支持：

<template v-for="(logItem, itemIndex) in log.data" :key="itemIndex">
    <!-- json對象 -->
    <div class="logItem json" v-if="['object', 'array'].includes(logItem.contentType)" v-html="logItem.content" ></div>
    <!-- 字符串、數字 -->
</template>
複製代碼

最後對不一樣的類名寫一下樣式便可，效果以下：

image-20210508195753623.png

展開收縮按鈕的點擊事件咱們使用事件代理的方式綁定到外層元素上：

<div class="logItem json" v-if="['object', 'array'].includes(logItem.contentType)" v-html="logItem.content" @click="jsonClick" >
</div>
複製代碼

點擊展開收縮按鈕的時候根據當前的展開狀態來決定是展開仍是收縮，展開和收縮操做的是wrap元素的高度，收縮時同時插入一個省略號的元素來表示此處存在收縮，同時由於按鈕使用絕對定位，脫離了正常文檔流，因此也須要手動控制它的顯示與隱藏，須要注意的是要能區分哪些按鈕是本次能夠操做的，不然可能下級是收縮狀態，可是上層又把該按鈕顯示出來了：

// 在子元素裏找到有指定類名的第一個元素
const getChildByClassName = (el, className) => {
  let children = el.children
  for (let i = 0; i < children.length; i++) {
    if (children[i].classList.contains(className)) {
      return children[i]
    }
  }
  return null
}

// json數據展開收縮
let expandIndex = 0
const jsonClick = (e) => {
  // 點擊是展開收縮按鈕
  if (e.target && e.target.classList.contains('expandBtn')) {
    let target = e.target
    let parent = target.parentNode
    // id，每一個展開收縮按鈕惟一的標誌
    let index = target.getAttribute('data-index')
    if (index === null) {
      index = expandIndex++
      target.setAttribute('data-index', index)
    }
    // 獲取當前狀態，0表示收縮、1表示展開
    let status = target.getAttribute('expand-status') || '1'
    // 在子節點裏找到wrap元素
    let wrapEl = getChildByClassName(parent, 'wrap')
    // 找到下層全部的按鈕節點
    let btnEls = wrapEl.querySelectorAll('.expandBtn')
    // 收縮狀態 -> 展開狀態
    if (status === '0') {
      // 設置狀態爲展開
      target.setAttribute('expand-status', '1')
      // 展開
      wrapEl.style.height = 'auto'
      // 按鈕箭頭旋轉
      target.classList.remove('shrink')
      // 移除省略號元素
      let ellipsisEl = getChildByClassName(parent, 'ellipsis')
      parent.removeChild(ellipsisEl)
      // 顯示下級展開收縮按鈕
      for (let i = 0; i < btnEls.length; i++) {
        let _index = btnEls[i].getAttribute('data-for-index')
        // 只有被當前按鈕收縮的按鈕才顯示
        if (_index === index) {
          btnEls[i].removeAttribute('data-for-index')
          btnEls[i].style.display = 'inline-block'
        }
      }
    } else if (status === '1') {
      // 展開狀態 -> 收縮狀態
      target.setAttribute('expand-status', '0')
      wrapEl.style.height = 0
      target.classList.add('shrink')
      let ellipsisEl = document.createElement('div')
      ellipsisEl.textContent = '...'
      ellipsisEl.className = 'ellipsis'
      parent.insertBefore(ellipsisEl, wrapEl)
      for (let i = 0; i < btnEls.length; i++) {
        let _index = btnEls[i].getAttribute('data-for-index')
        // 只隱藏當前能夠被隱藏的按鈕
        if (_index === null) {
          btnEls[i].setAttribute('data-for-index', index)
          btnEls[i].style.display = 'none'
        }
      }
    }
  }
}
複製代碼

效果以下：

2021-05-08-20-00-57.gif

4.console對象的其餘方法

console對象有些方法是有特定邏輯的，好比console.assert(expression, message)，只有當express表達式爲false時纔會打印message，又好比console的一些方法支持佔位符等，這些都得進行相應的支持，先修改一下console攔截的邏輯：

ProxyConsole.prototype[method] = function (...args) {
     // 發送信息給父窗口
     // 針對特定方法進行參數預處理
     let res = handleArgs(method, args)
     // 沒有輸出時就不發送信息
     if (res.args) {
         window.parent.postMessage({
             type: 'console',
             method: res.method,
             data: res.args.map((item) => {
                 return handleData(item)
             })
         })
     }
     // 調用原始方法
     originMethod.apply(ProxyConsole, args)
 }
複製代碼

增長了handleArgs方法來對特定的方法進行參數處理，好比assert方法：

const handleArgs = (method, contents) => {
    switch (method) {
        // 只有當第一個參數爲false，纔會輸出第二個參數，不然不會有任何結果
        case 'assert':
            if (contents[0]) {
                contents = null
            } else {
                method = 'error'
                contents = ['Assertion failed: ' + (contents[1] || 'console.assert')]
            }
            break;
        default:
            break;
    }
    return {
        method,
        args: contents
    }
}
複製代碼

再看一下佔位符的處理，佔位符描述以下：

image-20210512135732215.png

能夠判斷第一個參數是不是字符串，以及是否包含佔位符，若是包含了，那麼就判斷是什麼佔位符，而後取出後面對應位置的參數進行格式化，沒有用到的參數也不能丟棄，仍然須要顯示：

const handleArgs = (method, contents) => {
        // 處理佔位符
        if (contents.length > 0) {
            if (type(contents[0]) === 'string') {
                // 只處理%s、%d、%i、%f、%c
                let match = contents[0].match(/(%[sdifc])([^%]*)/gm) // "%d年%d月%d日" -> ["%d年", "%d月", "%d日"]
                if (match) {
                    // 後續參數
                    let sliceArgs = contents.slice(1)
                    let strList = []
                    // 遍歷匹配到的結果
                    match.forEach((item, index) => {
                        let placeholder = item.slice(0, 2)
                        let arg = sliceArgs[index]
                        // 對應位置沒有數據，那麼就原樣輸出佔位符
                        if (arg === undefined) {
                            strList.push(item)
                            return
                        }
                        let newStr = ''
                        switch (placeholder) {
                            // 字符串，此處爲簡單處理，實際和chrome控制檯的輸出有差別
                            case '%s':
                                newStr = String(arg) + item.slice(2)
                                break;
                                // 整數
                            case '%d':
                            case '%i':
                                newStr = (type(arg) === 'number' ? parseInt(arg) : 'NaN') + item.slice(2)
                                break;
                                // 浮點數
                            case '%f':
                                newStr = (type(arg) === 'number' ? arg : 'NaN') + item.slice(2)
                                break;
                                // 樣式
                            case '%c':
                                newStr = `<span style="${arg}">${item.slice(2)}</span>`
                                break;
                            default:
                                break;
                        }
                        strList.push(newStr)
                    })
                    contents = strList
                    // 超出佔位數量的剩餘參數也不能丟棄，須要展現
                    if (sliceArgs.length > match.length) {
                        contents = contents.concat(sliceArgs.slice(match.length))   
                    }
                }
            }
        }
        // 處理方法 ...
        switch (method) {}
}
複製代碼

效果以下：

image-20210512140705004.png

報錯信息

報錯信息上文已經涉及到了，咱們對js代碼使用try catch進行了包裹，並使用console.error進行錯誤輸出，可是還有些錯誤多是try catch監聽不到的，好比定時器代碼執行出錯，或者是沒有被顯式捕獲的Promise異常，咱們也須要加上對應的監聽及顯示。

// /public/console/index.js

// 錯誤監聽
window.onerror = function (message, source, lineno, colno, error) {
    window.parent.postMessage({
        type: 'console',
        method: 'string',
        data: [message, source, lineno, colno, error].map((item) => {
            return handleData(item)
        })
    })
}
window.addEventListener('unhandledrejection', err => {
    window.parent.postMessage({
        type: 'console',
        method: 'string',
        data: [handleData(err.reason.stack)]
    })
})

// ...
複製代碼

執行輸入的js

console的最後一個功能是能夠輸入js代碼而後動態執行，這個可使用eval方法，eval能動態執行js代碼並返回最後一個表達式的值，eval會帶來一些安全風險，可是筆者沒有找到更好的替代方案，知道的朋友請在下方留言一塊兒探討吧。

動態執行的代碼裏的輸出以及最後表達式的值咱們也要顯示到控制檯裏，爲了避免在上層攔截console，咱們把動態執行代碼的功能交給預覽的iframe，執行完後再把最後的表達式的值使用console打印一下，這樣全部的輸出都能顯示到控制檯。

<textarea v-model="jsInput" @keydown.enter="implementJs"></textarea>
複製代碼
const jsInput = ref('')
const implementJs = (e) => {
    // shift+enter爲換行，不須要執行
    if (e.shiftKey) {
        return
    }
    e.preventDefault()
    let code = jsInput.value.trim()
    if (code) {
        // 給iframe發送信息
        iframeRef.value.contentWindow.postMessage({
            type: 'command',
            data: code
        })
        jsInput.value = ''
    }
}
複製代碼
// /public/console/index.js

// 接收代碼執行的事件
const onMessage = ({ data = {} }) => {
    if (data.type === 'command') {
        try {
            // 打印一下要執行的代碼
           	console.log(data.data)
            // 使用eval執行代碼
            console.log(eval(data.data))
        } catch (error) {
            console.error('js執行出錯')
            console.error(error)
        }
    }
}
window.addEventListener('message', onMessage)
複製代碼

效果以下：

2021-05-12-18-31-12.gif

支持預處理器

除了基本的html、js和css，做爲一個強大的工具，咱們有必要支持一下經常使用的預處理器，好比html的pug，js的TypeScript及css的less等，實現思路至關簡單，加載對應預處理器的轉換器，而後轉換一下便可。

動態切換編輯器語言

Monaco Editor想要動態修改語言的話咱們須要換一種方式來設置文檔，上文咱們是建立編輯器的同時直接把語言經過language選項傳遞進去的，而後使用setValue來設置文檔內容，這樣後期沒法再動態修改語言，咱們修改成切換文檔模型的方式：

// 建立編輯器
editor = monaco.editor.create(editorEl.value, {
    minimap: {
        enabled: false, // 關閉小地圖
    },
    wordWrap: 'on', // 代碼超出換行
    theme: 'vs-dark', // 主題
    fontSize: 18,
    fontFamily: 'MonoLisa, monospace',
})
// 更新編輯器文檔模型 
const updateDoc = (code, language) => {
  if (!editor) {
    return
  }
  // 獲取當前的文檔模型
  let oldModel = editor.getModel()
  // 建立一個新的文檔模型
  let newModel = monaco.editor.createModel(code, language)
  // 設置成新的
  editor.setModel(newModel)
  // 銷燬舊的模型
  if (oldModel) {
    oldModel.dispose()
  }
}
複製代碼

加載轉換器

轉換器的文件咱們都放在/public/parses/文件夾下，而後進行動態加載，即選擇了某個預處理器後再去加載對應的轉換器資源，這樣能夠節省沒必要要的請求。

異步加載js咱們使用loadjs這個小巧的庫，新增一個load.js：

// 記錄加載狀態
const preprocessorLoaded = {
    html: true,
    javascript: true,
    css: true,
    less: false,
    scss: false,
    sass: false,
    stylus: false,
    postcss: false,
    pug: false,
    babel: false,
    typescript: false
}

// 某個轉換器須要加載多個文件
const resources = {
    postcss: ['postcss-cssnext', 'postcss']
}

// 異步加載轉換器的js資源
export const load = (preprocessorList) => {
    // 過濾出沒有加載過的資源
    let notLoaded = preprocessorList.filter((item) => {
        return !preprocessorLoaded[item]
    })
    if (notLoaded.length <= 0) {
        return
    }
    return new Promise((resolve, reject) => {
        // 生成加載資源的路徑
        let jsList = []
        notLoaded.forEach((item) => {
            let _resources = (resources[item] || [item]).map((r) => {
                return `/parses/${r}.js`
            })
            jsList.push(..._resources)
        })
        loadjs(jsList, {
            returnPromise: true
        }).then(() => {
            notLoaded.forEach((item) => {
                preprocessorLoaded[item] = true
            })
            resolve()
        }).catch((err) => {
            reject(err)
        })
    })
}
複製代碼

而後修改一下上文預覽部分的run 方法：

const run = async () => {
  let h = editData.value.code.HTML.language
  let j = editData.value.code.JS.language
  let c = editData.value.code.CSS.language
  await load([h, j, c])
  // ...
}
複製代碼

轉換

全部代碼都使用轉換器轉換一下，由於有的轉換器是同步方式的，有的是異步方式的，因此咱們統一使用異步來處理，修改一下run方法：

const run = async () => {
  // ...
  await load([h, j, c])
  let htmlTransform = transform.html(h, editData.value.code.HTML.content)
  let jsTransform = transform.js(j, editData.value.code.JS.content)
  let cssTransform = transform.css(c, editData.value.code.CSS.content)
  Promise.all([htmlTransform, jsTransform, cssTransform])
    .then(([htmlStr, jsStr, cssStr]) => {
      // ...
    })
    .catch((error) => {
      // ...
    })
}
複製代碼

接下來就是最後的轉換操做，下面只展現部分代碼，完整代碼有興趣的可查看源碼：

// transform.js

const html = (preprocessor, code) => {
    return new Promise((resolve, reject) => {
        switch (preprocessor) {
            case 'html':
                // html的話原封不動的返回
                resolve(code)
                break;
            case 'pug':
                // 調用pug的api來進行轉換
                resolve(window.pug.render(code))
            default:
                resolve('')
                break;
        }
    })
}

const js = (preprocessor, code) => {
    return new Promise((resolve, reject) => {
        let _code = ''
        switch (preprocessor) {
            case 'javascript':
                resolve(code)
                break;
            case 'babel':
                // 調用babel的api來編譯，你能夠根據須要設置presets
                _code = window.Babel.transform(code, {
                    presets: [
                        'es2015',
                        'es2016',
                        'es2017'，
                        'react'
                    ]
                }).code
                resolve(_code)
            default:
                resolve('')
                break;
        }
    })
}

const css = (preprocessor, code) => {
    return new Promise((resolve, reject) => {
        switch (preprocessor) {
            case 'css':
                resolve(code)
                break;
            case 'less':
                window.less.render(code)
                    .then(
                        (output) => {
                            resolve(output.css)
                        },
                        (error) => {
                            reject(error)
                    	}
                	);
                break;
            default:
                resolve('')
                break;
        }
    })
}
複製代碼

能夠看到很簡單，就是調一下相關轉換器的api來轉換一下，不過想要找到這些轉換器的瀏覽器使用版本和api可太難了，筆者基本都沒找到，因此這裏的大部分代碼都是參考codepan的。

其餘功能

另外還有一些實現起來簡單，可是能很大提高用戶體驗的功能，好比添加額外的css或js資源，免去手寫link或script標籤的麻煩：

image-20210514140452547.png

預設一些經常使用模板，好比vue3、react等，方便快速開始，免去寫基本結構的麻煩：

2021-05-14-14-37-28.gif

有沒有更快的方法

若是你看到這裏，你必定會說這是哪門子快速搭建，那有沒有更快的方法呢，固然有了，就是直接克隆本項目的倉庫或者codepan，改改就可使用啦~

結尾

本文從零開始介紹瞭如何搭建一個代碼在線編輯預覽的工具，粗糙實現總有不足之處，歡迎指出。

項目倉庫code-run，歡迎star。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程