新手问题 如何优雅的用 js 动态添加 html 代码?

bestjane · 发布于 2015年6月02日 · 最后由 bestjane 回复于 2015年6月12日 · 4389 次阅读
14793

如果需要在js里动态的加载一些html代码,一般会选择下面这样的方式

str="<div class="dialog"><div class="title"><img src="close.gif" alt="点击可以关闭" />亲爱的提示条</div><div class="content"><img src="delete.jpg" alt="" /><span>您真的要GG吗?</span></div><div class="bottom"><input id="Button2" type="button" value="确定" class="btn"/>&nbsp;&nbsp;<input id="Button3" type="button" value="取消" class="btn"/></div></div>"

感觉这样太丑了,可读性和可维护性都很差。有什么更加优雅和简洁的方式吗?

共收到 23 条回复
43
# Gemfile
gem 'liquid'
gem 'settingslogic'

# settingslogic config file
app.yml
  template: |
    blabla.... {{name}}... blabla... {{email}}

# controller
template = Liquid::Template.parse(Settings.template)
result = template.render('name' => '...', 'email'  => '...')

19107

可以试试这个:

str='\
<div class="dialog">\
  <div class="title">\
    <img src="close.gif" alt="点击可以关闭" />亲爱的提示条\
  </div>\
  <div class="content">\
    <img src="delete.jpg" alt="" />\
    <span>您真的要GG吗?</span>\
  </div>\
  <div class="bottom">\
    <input id="Button2" type="button" value="确定" class="btn"/>&nbsp;&nbsp;\
    <input id="Button3" type="button" value="取消" class="btn"/>\
  </div>\
</div>'

console.log(str);
2880

Coffeescript

str="""
<div class="dialog">
  <div class="title">
    <img src="close.gif" alt="点击可以关闭" />亲爱的提示条
  </div>
  <div class="content">
    <img src="delete.jpg" alt="" />
    <span>您真的要GG吗?</span>
  </div>
  <div class="bottom">
    <input id="Button2" type="button" value="确定" class="btn"/>&nbsp;&nbsp;
    <input id="Button3" type="button" value="取消" class="btn"/>
  </div>
</div>
"""
5178

想要完全避免这种情况 可以用react

7620

就因为这点就使用react的话,未免有点为了技术去技术了。

str = '<div class="dialog">' +
        '<div class="title">' +
            '<img src="close.gif" alt="点击可以关闭" />亲爱的提示条' +
        '</div>' +
        '<div class="content">' +
            '<img src="delete.jpg" alt="" /><span>您真的要GG吗?</span>' +
        '</div>' +
        '<div class="bottom">' +
            '<input id="Button2" type="button" value="确定" class="btn"/>&nbsp;&nbsp;' +
            '<input id="Button3" type="button" value="取消" class="btn"/>' +
        '</div>' +
    '</div>';

如果不依赖lib,只能从代码格式化的角度去做优化了。 如果嫌弃react太重(10k+ js),可以去看看 前端模板。比如 doT.js

1

HTML

<div id="dialog-quit" class="dialog">
  <div class="title">
    <img src="close.gif" alt="点击可以关闭" />亲爱的提示条
  </div>
  <div class="content">
    <img src="delete.jpg" alt="" />
    <span>您真的要GG吗?</span>
  </div>
  <div class="bottom">
    <input id="Button2" type="button" value="确定" class="btn"/>&nbsp;&nbsp;
    <input id="Button3" type="button" value="取消" class="btn"/>
  </div>
</div>

JavaScript(jQuery)

$('#dialog-quit')
861

用jQuery的load方法试试咯

14793

#3楼 @luikore 写在js中没有重用性,显得代码很乱,增加后期维护的复杂度,还是希望html的代码能够和js代码分开,而且可以通过ajax动态添加数据。

14793

#6楼 @rei 这种方式不错,但是如果需要动态生成一些数据,是不是还得根据jquery选择器一个一个replace?

9442

前端模板引擎

2880

#8楼 @bestjane 没必要过度工程. 楼主的情况应该是很简单的动态效果, 在 coffee 写就行

1

#9楼 @bestjane coffee 写就好了。

14793

#11楼 @luikore 恩,谢谢!

14793

#12楼 @rei 谢谢!

19176

Handlebars

1297

google js template

449

#1楼 @raecoo 大神你复活了?

18楼 已删除
4257

Vuejs

377

#6楼 @rei +1 这么大段的html代码放在js中维护完全不合理 template = $('#dialog-quit').html() html = template.format({data})

只需配合几行的模板方法:

// add `format` method to `String`, equivalent to printf/string.format
// usage: "{a} {b}".format({a: 'hi', b: 'b'}) => "hi b"
// http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format/18234317#18234317
if (!String.prototype.format) {
    String.prototype.format = function() {
        var str = this.toString();
        if (!arguments.length)
            return str;
        var arg = typeof arguments[0],
            args = (("string" == args || "number" == args) ? arguments : arguments[0]);
        for (arg in args)
            str = str.replace(RegExp("\\{" + arg + "\\}", "gi"), args[arg]);
        return str;
    };
}

1297

#16楼 @leopku 这两天突然想起来以前看到某大神提到 rivets 把以前一个小项目的 ujs + tempojs 的代码用 Promise + rivets + watch.js 重构了一下,代码清晰了好多

4355

如果你用过backbone.js可能会知道这种方式:

1.把要用js加载的html放到 html 文件的script标签里:

<script id="your-tmpl" type="text/template" charset="utf-8">
<div class="dialog"> .... </div>
</script>

2.javascript中加载(jQuery)

var dialogTemplate = $('#your-tmpl').html();

如果有需要传递参数, 比如使用 underscore 的template

1.创建模板

<script id="your-tmpl" type="text/template" charset="utf-8">
<div class="dialog">
<%= name %>
</div>
</script>

2.javascript中加载(jQuery)

var dialogTemplate = $('#your-tmpl').html()

3.编译模板

var dialogHtml = _.template(dialogTemplate)({ name: 'lvjain700' });
3417

除非是很大量的需要,否则我会用 2 楼的方法,如果真要找个 template 处理,可以搜寻 javascript template 找个合用的。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册