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

没有前端,求问前端 js 动态添加大段 html 的问题

  •  
  •   yinzhong · 2019-10-15 09:32:22 +08:00 · 1766 次点击
    这是一个创建于 1627 天前的主题,其中的信息可能已经有所发展或是发生改变。

    每个 input 往后端传值,大概十个 input 一组,不确定多少组,组的数量可以动态改变,我用 js 加了一大段 html 然后还往里面拼接 id,这个 js 好长,你们平时做也是这样吗?我还有类似需求,感觉页面好丑,以前没见过我这样写的,主要是间的少,这样写好吗,网上也找不到例子,只知道这样做能行,但是感觉不好,有啥我不知道的方法吗

    13 条回复    2019-10-15 11:32:53 +08:00
    yokyj
        1
    yokyj  
       2019-10-15 09:50:16 +08:00   ❤️ 1
    用 react 或者 vue..数据驱动
    imdong
        2
    imdong  
       2019-10-15 09:50:46 +08:00   ❤️ 1
    ```
    <script type="text/html" id="tpl-demo1">
    <div>Test<span class="red">Success</span></div>
    </script>
    <script>
    var html_str = document.getElementById('tpl-demo1').innerHTML;
    </script>
    ```
    jeodeng
        3
    jeodeng  
       2019-10-15 09:50:55 +08:00   ❤️ 1
    唤起了我以前写原生的时候记忆,封装一个插入 input 的函数,需要 n 组就循环 n 次调用函数就直接操作 dom 了。
    hewelzei
        4
    hewelzei  
       2019-10-15 09:55:07 +08:00   ❤️ 1
    试试 lodash.template 或者 art-template 之类可以在前端直接引入的模版库,这样可能写的时候舒服一些
    fancy111
        5
    fancy111  
       2019-10-15 09:58:53 +08:00   ❤️ 1
    很明显你没搞清楚业务的最佳处理方式。
    十个 input 一组?不确定有多少组?这么多数据干嘛不动态添加转 json 传,搞那么多 input 有必要吗?
    Augi
        6
    Augi  
       2019-10-15 10:02:10 +08:00 via iPhone   ❤️ 1
    不用 react 啥的,就用个 template 吧,js 循环添加
    xiaobo944
        8
    xiaobo944  
       2019-10-15 10:42:10 +08:00   ❤️ 1
    不光是这些麻烦问题,以后还会遇到绑定事件的问题,
    重复绑定,触发了两次之类的。
    还有元素是否创建出来,能不能绑定事件。
    或者元素未生成之前你的值是获取不到的。

    我早先也经常创建删除 HTML 遇到了不少问题,还尝试自定义模板字符,将字符串替换,执行函数什么的用 eval 去跑,太麻烦了,到了后边改动很麻烦。

    直接输出 HTML 的做法 demo 项目还可以,如果正常开发,请移步现代前端开发技术选型 react Vue 之类的。
    tyx1703
        9
    tyx1703  
       2019-10-15 11:00:39 +08:00   ❤️ 1
    可以看看 Mustache
    ironMan1995
        10
    ironMan1995  
       2019-10-15 11:22:07 +08:00
    比如要给后端传递 const data = {inputValOne: '',inputValTwo: ''} ,先写个 input 的组件,给它定义一个自定义属性 data-*(名字就是要传给后端的数据属性名),const keys = Object.keys(data),直接循环 keys 遍历 input 组件,所有组件监听一个 onChange 事件,通过 const name = event.currentTarget.getAttribute(‘data-*’) 获取自定义名称,data[name] = ev.target.value,最后 JSON.stringify(data),传给后端就行,这是我的思路
    ironMan1995
        11
    ironMan1995  
       2019-10-15 11:25:52 +08:00
    循环一个组件或者模板动态渲染出来,最后直接插入到页面,操作 dom 次数也少
    12tall
        12
    12tall  
       2019-10-15 11:28:47 +08:00
    vue?
    时间紧 能跑起来就是好代码~
    LyleRockkk
        13
    LyleRockkk  
       2019-10-15 11:32:53 +08:00
    找个前端朋友帮你解决这个问题吧,如果非要自己来,可以了解一下 template 模板语法,vue ,react 上手可能会慢一些
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5418 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 09:00 · PVG 17:00 · LAX 02:00 · JFK 05:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.