首页 教程资源正文

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

201906031559491686653557.jpg

通常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> 

这种方式 
 的好处就是可以保持代码缩进,易读易修改。

201906031559491686653557.jpg

版权声明

1:如非特殊说明,本站对提供的源码不拥有任何权利,其版权归原著者拥有。

2:请勿将该源码、软件进行商业交易、转载等行为,该源码、软件只为研究、学习所提供,该软件使用后发生的一切问题与本站无关。

3:本网站所有源码和软件均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。如有侵犯你版权的,请来信(邮箱:393249296@qq.com)指出,本站将立即改正

评论

本站开启签到得积分系统,可以用积分免费下载任何资源!!!

×
M

分享:

支付宝

微信

请先 登录 再评论,若不是会员请先 注册