js模版的几个demo

2021-12-16 09:24
460
0

在script标签中包含一个html片段。

<script type="text/html" id="javascript_template">
 <div onclick="_dom()">
   <ul id="wrap">
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
   </ul>
 </div>
</script>

在编写的时候,需要要在script标签上加个ID(如图中“javascript_template”),并在外层新建一个div容器。可以通过如下代码来实现:
 

 var _html=document.getElementById('javascript_template').innerHTML;                            
  document.getElementsByTagName('div')[0].innerHTML=_html;
如果遇到html代码加入外部div后,获取不到节点的情况,可以在外部写个函数,然后在html内部用行内调用 onclick="_dom()"
function _dom() {  document.getElementById('wrap') ;}

 

【原文地址:】https://www.cnblogs.com/xcsn/p/6375129.html

【参考网址:】http://www.cnblogs.com/MrZouJian/p/5614581.html                   https://www.cnblogs.com/lori/archive/2012/08/31/2665802.html

ps

模板替换变量

function tpl(template,data){
   return template.replace(/\{%([^%\{\}]+)%}/g,function(orgin,item){
       item = item.replace(/^\s+|\s+$/,"");
       var params = [];
       if(item.indexOf('.') > -1){
           params = item.split('.')
       }
       return params.reduce((a,b)=> {
           return a[b]
       },data)
   })
}
var str = `<div class="{%data.className%}">{%data.name%}</div>`
var d = {data: {name: 123,className:'hd'}}
var t = tpl(str,d)
console.log(t)
 

全部评论