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

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

  •  
  •   yinzhong · 55 天前 · 838 次点击
    这是一个创建于 55 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    13 回复  |  直到 2019-10-15 11:32:53 +08:00
        1
    yokyj   55 天前   ♥ 1
    用 react 或者 vue..数据驱动
        2
    imdong   55 天前   ♥ 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>
    ```
        3
    jeodeng   55 天前   ♥ 1
    唤起了我以前写原生的时候记忆,封装一个插入 input 的函数,需要 n 组就循环 n 次调用函数就直接操作 dom 了。
        4
    hewelzei   55 天前   ♥ 1
    试试 lodash.template 或者 art-template 之类可以在前端直接引入的模版库,这样可能写的时候舒服一些
        5
    fancy111   55 天前   ♥ 1
    很明显你没搞清楚业务的最佳处理方式。
    十个 input 一组?不确定有多少组?这么多数据干嘛不动态添加转 json 传,搞那么多 input 有必要吗?
        6
    Augi   55 天前 via iPhone   ♥ 1
    不用 react 啥的,就用个 template 吧,js 循环添加
        7
    ChefIsAwesome   55 天前   ♥ 2
        8
    xiaobo944   55 天前   ♥ 1
    不光是这些麻烦问题,以后还会遇到绑定事件的问题,
    重复绑定,触发了两次之类的。
    还有元素是否创建出来,能不能绑定事件。
    或者元素未生成之前你的值是获取不到的。

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

    直接输出 HTML 的做法 demo 项目还可以,如果正常开发,请移步现代前端开发技术选型 react Vue 之类的。
        9
    tyx1703   55 天前   ♥ 1
    可以看看 Mustache
        10
    ironMan1995   55 天前
    比如要给后端传递 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),传给后端就行,这是我的思路
        11
    ironMan1995   55 天前
    循环一个组件或者模板动态渲染出来,最后直接插入到页面,操作 dom 次数也少
        12
    12tall   55 天前
    vue?
    时间紧 能跑起来就是好代码~
        13
    LyleRockkk   55 天前
    找个前端朋友帮你解决这个问题吧,如果非要自己来,可以了解一下 template 模板语法,vue ,react 上手可能会慢一些
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3707 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 23ms · UTC 10:12 · PVG 18:12 · LAX 02:12 · JFK 05:12
    ♥ Do have faith in what you're doing.