最近很流行的 h5 在线编辑实时预览，是怎么做到的？

2018-01-31 23:52:50 +08:00
 tosmq009

有很多 h5 开发网站，选择模版知乎，都可以实时在线预览， 用 chrome f12 看了一下，不是 iframe 的，而且修改就直接生效，抓 http 请求好像也没有请求～～
好牛呀，想请教一下各位大神～～～～

3886 次点击
所在节点    问与答
5 条回复
yyfearth
2018-02-01 06:21:52 +08:00
这个功能 纯 JS 就可以做到 你甚至可以把页面存在本地运行
eaglexiang
2018-02-01 09:57:34 +08:00
异步编译输入到输出
DOLLOR
2018-02-01 10:13:12 +08:00
看来楼主的观念停留在静态页面时代了，你认为 HTML 必须要有服务器处理才能生成。
然而 HTML 不一定要服务器才能生成，也可以用 JS 来拼接。
简单地说：
你可以监听用户的输入变化事件，然后根据用户输入的信息，按照模板拼接新的 HTML，然后直接写到预览区域。
gen900
2018-02-01 11:10:48 +08:00
展现和数据分离。实现一套模版+内容的机制就可以了，编辑其实就是更新数据，实时预览就是刷新渲染到模版上。
gen900
2018-02-01 11:11:58 +08:00
展现和数据分离。实现一套模版+内容的机制就可以了，编辑其实就是更新数据，实时预览就是刷新渲染到模版上。

模版有很多方案 pug，ejs 等，这个架构想明白了其实也不难

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/427576

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX