halo, привет всем, мне 132, я давно не дешев ::>_<:: berial>
berial — это микроинтерфейсный фреймворк, который воспроизводит ядро single-spa и qiankun с кратким кодом и не имеет сторонних зависимостей.
use
<one-app></one-app>
<two-app></two-app>
import { register, start } from 'berial'
register(
'one-app',
'http://localhost:3000/one.html',
(location) => location.hash === '#/app1'
)
register(
'two-app',
'http://localhost:3000/two.html',
(location) => location.hash === '#/app2'
)
start()
микро-интерфейс?
Я уже выкладывал статью о микрофронтендах, где было сказано зачем и в чем суть
Причина микро-фронтенда - бизнес-проблема, грубо говоря, наши бизнес-проекты давно должны быть разделены, а проект слишком долго стоит вместе, когда его непросто поддерживать, его нужно раскол. Когда он слишком сломан, его легче поддерживать, когда он собран
Суть микро-фронтенда — фронтенд-роутинг, который не нуждается в совместной отладке с эксплуатацией и обслуживанием детской обуви, и может сам управлять жизненным циклом, выполнять изоляцию песочницы и даже коммуникацию состояния
Структура микро-интерфейса примерно такая же, включая следующие функции, пожалуйста, позвольте мне собраться вместе.
- lifeycycles
- shadow dom
- scoped css
- Proxy sandbox
- html-loader
- global store
lifecycles
Управление жизненным циклом изначально осуществляется single-spa, и внутри berial также воспроизводится аналогичный набор циклических очередей.
load 阶段（microtask）
importHtml -> parser -> shadowdom -> iframe -> sandbox -> bootstrap()
mount 阶段（macrotask）
mount() -> umount() -> mount() -> unmount() -> ...
Среди них стадия загрузки отвечает за многое, наверное импортировать html, потом парсить dom, css, скрипт, потом ставить dom и css в тень, потом ставить песочницу для скрипта, а потом собирать жизненные циклы, все эти шаг процесса — обещание, так что это очередь обещаний
Фаза загрузки выполняется только один раз
Затем после переключателя маршрутизации непрерывно вызываются хуки mount и unmout, поочередно вызываются...
Выполняйте рендеринг в mount, напримерReact.render(), размонтировать то же самое
Наконец, berial реализует очередь жизненного цикла, аналогичную циклу событий.
shadow dom & scoped css
теневой дом, также известный как дом песчаной скульптуры
Почти все фреймворки для микроинтерфейса на рынке предпочитают отказываться от скульптуры из песка, но berial выбирает скульптуру из песка вместе.
Это вызовет много проблем.Иногда приходится вручную менять бизнес-логику,но это допустимо.Мы делаем микро-фронтенд фреймворк,не совсем с целью0 改动Перенесите, если вы после 0 изменений, перейдите в iframe
Поэтому я думаю, что допустимо потратить небольшую стоимость миграции в обмен на лучший дизайн архитектуры.
После использования скульптуры из песка CSS с прицелом становится естественным, и он очень жесткий и вообще не может быть пробит (есть еще метод взлома)
sandox
Механизм песочницы — это еще один механизм фреймворка микро-интерфейса, вероятно, есть два варианта.
Один из них — снэпшот-песочница, принцип заключается в многократном обходе окна для достижения эффекта активации и деактивации, но это не относится к бериалу.
Поскольку berial использует скульптуру из песка, это означает, что это механизм сосуществования нескольких приложений, и в любом случае они не могут использовать одно и то же окно.
Ответ — да, мы использовали трюк, то есть создали iframe, а затем перехватили iframe.contentWindow, что эквивалентно копированию окна.
Затем сотрудничайте с Proxy, чтобы угнать компьютер, и, как того требует время, появится почти идеальная песочница.
Но есть также несколько моментов, на которые следует обратить внимание, например, проблема захвата: если пользователь получает доступ к документу, его необходимо перехватить в shadowRoot, если метод доступа к document.appendChild необходимо перехватить в iframe, или даже document.title, его можно перехватить только в самое внешнее окно слоя
Вся эта песочница представляет собой слой булькающего механизма захвата, слои булькающего угона (всего три слоя)
Последнее обновление, мы нашли новый способ не использовать iframe.contentWindow
Новая идея — читать и писать копию, эта идея исходит от immer, то есть нам очень дорого копировать окно целиком.
Поэтому, когда мы пишем объекты, мы делаем копии по требованию.
Аналогичный механизм работает для berial, нам нужно назначить копию окна для каждой песочницы, кроме использованияiframe.contentWindwo, вы все еще можете читать и писать копии
Это имеет много преимуществ, таких как удаление ограничений IFrame (кросс-домен, открытыми и т. Д.), И может уменьшить слой песочной коробки
И это также может добавить большое удобство и расширить пространство для оптимизации.
html-loader
html-loader также является ядром berial, вдохновленным qiankun, который на самом деле является синтаксическим анализатором, а затем находит скрипт и стиль и предоставляет их.
Эта часть в настоящее время является чистой регулярностью, потому что для этого совпадения на самом деле не нужно проходить весь процесс компиляции, и относительных случаев не так много.
Заинтересованные дети могут попробовать прочитать его. Мы также будем использовать этот механизм для улучшения регулярного письма и повышения производительности в будущем.
global store
Простейший механизм передачи состояния также реализован через прокси, который может легко и удобно обмениваться данными между различными приложениями.
Тогда мы будем владеть партией, позволяют пользователям неоднократно изменять состояние, монтировать сцену попеременно
отличается от цянькунь?
Отличие от Qiankun в том, что мы изначально используем скульптуру из песка, песочница более жесткая и не полагается на single-spa, все коды могут контролироваться сами по себе, и больше возможностей для оптимизации между различными механизмами.
Хотя berial — это бизнес-фреймворк, код будет продолжать мой стиль, простой и понятный.Занимаясь бизнесом, мы по-прежнему будем тратить время на изучение дизайна и улучшение базовой архитектуры.
Наконец, укажите адрес:
GitHub.com/Beria Connections/Не голоден…
Приглашаем всех присоединиться к организации.В будущем berial также будет поддерживаться сообществом.Какой новый геймплей вы можете обсудить вместе?