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

bestjane · 2015年06月02日 · 最后由 bestjane 回复于 2015年06月12日 · 10971 次阅读

如果需要在 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>"

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

# 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'  => '...')

可以试试这个:

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);

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>
"""

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

就因为这点就使用 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

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')

用 jQuery 的 load 方法试试咯

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

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

前端模板引擎

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

#9 楼 @bestjane coffee 写就好了。

google js template

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

18 楼 已删除

#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;
    };
}

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

如果你用过 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' });

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

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