предисловие
3 года назад на AWS re:InventAWS Объявление о запускеCloud9, используемый для написания, запуска и отладки кода в облаке, он может работать прямо в браузере, что является легендарнымWeb IDE. Сегодня, 3 года спустя, с развитием отечественных облачных вычислений, крупные поставщики услуг облачных вычислений развертывают свои собственные службы облачных вычислений.WEB IDE, и уже есть очень зрелый план реализации, технический принцип и реализация этой штуки тоже очень достойны нашего изучения и анализа.
более зрелымWEB IDEПрограмма имеетCodeSandbox, Cloud Studioи т.д. Далее я реализую простойWEB IDE, чтобы вы поняли его принцип и процесс реализации.
текст
Далее автор представитWEB IDEПринцип реализации и сценарии примененияH5-Dooring** используй это.
1. Принцип реализации веб-редактора
Давайте посмотрим на зрелогоWEB IDEСтруктура:Его можно абстрагировать на 3 основные части:
- область навигации по файлам
- область редактирования кода
- контейнер предварительного просмотра
Как показано ниже:После абстрагирования модуля давайте подумаем о реализации конкретной функции.Для области навигации по файлам мы можем легко использоватьreact/vueui для достижения, для сохранения файлов, создания дерева каталогов и т. д. мы можем использоватьnodejs + БД (например, 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 {UnControlled as CodeMirror} from 'react-codemirror2';
require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');
export default function() {
// ...
return (
<CodeMirror
className={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, внутренний механизм реакции не может напрямую выполнить скрипт.
Другим решением является iframe, который может хорошо изолировать код реагирования и предварительного просмотра.Механизм реализации выглядит следующим образом:То есть после того, как мы отредактируем код в редакторе кода, мы сохраним его в методе запроса.nodeконец, затем черезiframeпроситьnodejsВизуализированная статическая страница для реализации функции предварительного просмотра. Это немного похоже на рендеринг на стороне сервера.
Так как же обеспечить предварительный просмотр в реальном времени? Эта часть может быть разработана таким образом, чтобы пользователь вручную нажимал предварительный просмотр, что также является оригинальной идеей автора, но для улучшения пользовательского опыта автор решил использовать предварительный просмотр в реальном времени, то есть изменения пользователя. код может отражаться в «окне предварительного просмотра» в режиме реального времени. План такойonChangeобновление вstateреализоватьrerender, использовать этотreact hooksОтличная работа. Тем не менее, обновление в реальном времени очень неблагоприятно для производительности, поэтому, чтобы улучшить производительность предварительного просмотра и удобство страницы, я использую здесь защиту от сотрясений, чтобы контролировать частоту и время запросов. код показывает, как показано ниже:
const handleChange = (editor, data, value) => {
fetchPage(value)
}
const fetchPage = (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 курсор редактора кода будет сбрасываться, что очень важно для пользователя.онлайн кодированиеОпыт очень плохой, поэтому я снова прочитал официальную документацию и нашелcursorЭтот интересный апи на китайском языке означает, что вы можете вручную установить положение, в котором останавливается курсор, тогда мы находимся вКаждый раз, когда курсор изменяется, он принудительно устанавливается в положение текущего курсора, поэтому он не будет принудительно запускать действие расфокусировки из-за влияния обновления iframe.. Код реализован следующим образом:
const onCursorChange = (editor, data) => {
const { line, ch } = data
setCursor({ line, ch })
}
// ...
<CodeMirror
className={styles.codeWrap}
value={html}
options={{
mode: 'xml',
theme: 'material',
lineNumbers: true
}}
onChange={handleChange}
cursor={cursor}
onCursor={onCursorChange}
/>
На данный момент реализованы наши основные функции, как показано ниже:Функция загрузки html в интерфейсе и функция развертывания относительно просты, автор отправил код наgithub, вы можете узнать об этом, если вам интересно.
1.3 Реализация сервера
Реализация сервера в основном заключается в написании интерфейса запроса для хранения html-страницы ипрямо из htmlстранице, для междоменных запросов нам также нужно иметь дело с междоменными проблемами.Поскольку логика кода относительно проста, авторский код реализации здесь выглядит следующим образом:
// server.js
const Koa = require('koa');
const { resolve } = require('path');
// const staticServer = require('koa-static');
const koaBody = require('koa-body');
const cors = require('koa2-cors');
const logger = require('koa-logger');
const fs = require('fs');
const app = new Koa();
app.use(koaBody());
app.use(logger());
// 设置跨域
app.use(cors({
origin: function (ctx) {
if (ctx.url.indexOf('/dooring') > -1) {
return '*'; // 允许来自所有域名请求
}
return '';
},
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization', 'x-test-code'],
maxAge: 5, // 该字段可选，用来指定本次预检请求的有效期，单位为秒
credentials: true,
allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'x-requested-with', 'Content-Encoding'],
}));
let htmlStr = ''
app.use(async (ctx, next) => {
console.log(ctx.url);
if(ctx.url === '/dooring/render') {
htmlStr = ctx.request.body;
ctx.body = 'success';
}else if(ctx.url.indexOf('/html') === 0) {
ctx.type = "html";
ctx.body = htmlStr;
}
});
app.listen(80);
2. Сценарии применения
Для сценариев применения онлайн-кодирования автор примерно приводит несколько сценариев применения. Скажем, мыH5-DooringВ редакторе для реализации пользовательской библиотеки компонентов или пользовательской страницы h5 и загрузки предварительного просмотра в реальном времени мы можем использовать его напрямую, как показано ниже:Во-вторых, для веб-сайтов, которые необходимо развертывать и изменять в режиме реального времени, если вам нужно быстро изменить развертывание после выхода в сеть, мы можем напрямую развернуть одну часть после онлайн-кодирования. Для личных технических блогов также возможно онлайн-редактирование и онлайн-развертывание одним щелчком мыши, поэтому нам не нужно полагаться на определенные среды и определенные компьютеры. Для более мощных приложений, для уровня предприятия, также возможно писать код на стороне сервера в виде онлайн-кодинга, и писать sql онлайн. Например, облачная разработка, онлайн-сотрудничество Saas в сфере облачных вычислений и т. д.
3. Резюме
Простая версия автора вышеприведенного туториала может в основном написать интерфейсный код онлайн.Для некоторых более сложных функций это также может быть достигнуто за счет разумного дизайна.Вы можете исследовать сами.Автор интегрировал код и логику написания Страницы H5 онлайн В проекте H5-Dooring вы можете скачать и изучить самостоятельно.
адрес гитхаба:Онлайн-редактор H5 H5-Dooring
наконец
Если вы хотите получить больше знаний о внешнем интерфейсе и реальных боевых действиях, таких как игры H5, webpack, node, gulp, css3, javascript, nodeJS, визуализация данных холста и т. д., добро пожаловать на совместное изучение и обсуждение в разделе «Интересный интерфейс». и исследуйте границы интерфейса вместе.