代码结构:
编写main.html:引入方式可从bootcdn直接copy script标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>juicerDemo</title><!-- <script src="https://cdn.bootcdn.net/ajax/libs/juicer/0.6.15/juicer-min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script> --><script src="./jquery-3.6.3.js"></script><script src="./juicer-0.6.15.js"></script><script src="./main.js"></script>
</head>
<body><div id="myjuicer"></div>
</body>
</html>
编写juicer模板,本案例为自定义模板,文件为自定义后缀:
<ul>{@each LIST as item,index}<li>${item.name}{index:${index}}</li>{@/each}
</ul>
编写main.js,本案例使用立即执行函数,使用ajax的get方法获取模板原始内容:
(function(){console.log("...执行")$.ajax({url: './01-tpl.tpl',method : 'get',success:function(text){console.log(text);var LIST =[{"name":1},{"name":2}]var data ={LIST:LIST};var html = juicer(text,data);console.log(html);$("#myjuicer").html(html);},fail:function(resp){console.log(resp);}})
})()
代码在vscode开发工具里使用live server 在浏览器打开,则可以渲染成功。