渲染引擎
最近新项目架构重置，需要统一用渲染引擎实现。所谓的渲染引擎，我理解其实就是一个解释器。将后端返回的页面数据，按照固定规则跟前端组件关联起来，最终渲染出用户看到的页面。而且，它很强，基本可以包揽页面上的所有元素的展示，所有交互的实现等。同时也将页面的控制权完全交给了后端。这样的最大好处，就是灵活，快速，统一，稳定。
举个例子：你有两个相似的页面要实现。
传统开发模式：可能需要你复制之前的页面组件，复制样式，复制接口，调整样式，新功能引入新组件等。
渲染引擎模式：只需要复制个obj，并且obj所有数据都是高内聚，低耦合。实现一个页面搞出了拼图🧩的感觉，像玩游戏。
预览器
组件是前端的，解释也是前端，只有数据放后端，后端怎么改？？？有种给了一整个榴莲给别人，却不给任何开榴莲的工具似的，只能眼巴巴看着的感觉。所以我搞了一版预览器，项目比较急，现阶段够用即可。目前主要用于渲染引擎预览，但实际它支持的是所有页面，包括传统的页面。只要你有这样的需求场景：改变页面数据，同步展示改变后的页面效果。
上面的示例中数据obj有上千行，确实大，改动确实会麻烦，可能多加个逗号“，”都会导致报错。
这个也正是预览器的价值所在，而且前后端双收益。不妨设想几个改动场景：
后端：改动文案，图片，链接等。后端可直接更改并预览效果，如果报错，左侧编辑器也会提示。确定后直接应用即可。
前端：我们至少避免了项目启动的时间，也减少与后端沟通的时间成本。
技术点
编辑器：jsoneditor
数据交互：postMessage
// 预览页面
useEffect(() => {
// iframeEle 为预览窗口dom, useRef
// editorEle 为编辑器dom, useRef
// 初始化编辑器
const options = {
mode: 'code',
onChange: () => {
if (iframeEle.current) {
const wn = iframeEle.current.contentWindow;
wn.postMessage('这里是编辑器改变后，需要发送给iframe的数据', 'iframe的origin');
}
},
};
const editor = new JSONEditor(editorEle.current, options);
return () => {
editor.destroy();
};
}, []);
// 调试页面
useEffect(() => {
// 跨域交互数据
const receiveMsg = (e) => {
// 限制域名
if (e.origin !== '预览页面的origin') {
return;
}
// 拿到数据后进行数据更新
const { data, source, origin } = e;
};
window.addEventListener('message', receiveMsg, false);
return () => {
window.removeEventListener('message', receiveMsg, false);
};
}, []);
【本文所涉及的数据，均为测试数据，禁止另作他用，谢谢大家配合】
最新发布尽在公众号：小火球烧屁股
