V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
tosmq009
V2EX  ›  问与答

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

  •  1
     
  •   tosmq009 · 2018-01-31 23:52:50 +08:00 · 3878 次点击
    这是一个创建于 2472 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    模版有很多方案 pug,ejs 等,这个架构想明白了其实也不难
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4008 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 04:11 · PVG 12:11 · LAX 20:11 · JFK 23:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.