广告位招租 qq245909083
广告
广告

js里调用html代码最好的方法

分享时间:2018-02-13 1365 热度℃
通常js里调用html代码,我们可能用得多是:



document.writeln("");
今天推荐两种方法:

1、

大段的 HTML 嵌入到 JS 里结果就是悲剧。不能代码高亮不能自动缩进,太难维护了。



我的经验是,直接把 HTML 单独写到一个浏览器能访问到的文件里,比如 template/foo.html。然后 JS 里发一个同步 XHR 请求去读这个文件,例如:



var html = Template.load('/template/foo.html');

var target = document.getElementById('xxx');

target.innerHTML = html;
Template 是一个工具类,负责发送同步 XHR 请求并返回结果。



这样在开发的时候,模板文件和 JS 代码分离,非常好维护。



当然这样做的话,上线的时候总发 XHR 请求也不是办法。所以在打包 JS 之前,我一般会通过脚本把所有的 Template.load('.*') 提取出来,替换成对应 HTML 的内容。这样在开发时非常方便,上线时也没有性能问题。



比如上面的代码被打包工具跑一下就变成了:



var html = "<ol>\n<li class=\"xxx\">...</li>\n</ol>"; // 引号里是 /template/foo.html 对引号、换行做了转义之后的内容,由工具自动生成

var target = document.getElementById('xxx');

target.innerHTML = html;


2、

推荐一个在'豆瓣说'代码里面看到的方法,感觉挺实用的。

<script type="text/template" id="html_template">

<div>HTML代码</div>

</script>



<script type="text/javascript">

var html = document.getElementById('html_template').innerHTML;

</script>

这种方式
的好处就是可以保持代码缩进,易读易修改。
文章标题:js里调用html代码最好的方法

本文地址:http://www.aizhanku.com/t36310

本文标签:
返回顶部