一、简介
说明：由于用字符串形式手动写入DOM元素，比较麻烦，于是引用模板。
总共提供两个东西：1.数据 2.模板 ps：外加一个js文件
template-web.js ： 提供template函数 参数为 id, data
注意：在模板时，另用一个script标签，type="text/html"：
1. 引入js文件
<script src="jquery.js"></script>
<script src="template-web.js"></script>2. 提供数据
<script>var data = {name:'zhangsan',age:18,hobby:['足球','篮球','手工']}
</script>3. 提供模板
<script type="text/html" id="content-template"><p>我的名字叫{
{name}}</p><p>今年{
{age}}岁</p><p>{
{if age >= 18}}可以上网{
{else if age < 18}}不允许上网{
{/if}}</p><p>我的爱好有：</p><ul>{
{each hobby}}<li>{
{$index}}：{
{$value}}</li>{
{/each}}</ul>{
{@text}}
</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>Document</title>
</head>
<body><div id="content"></div><script src="jquery.js"></script><script src="template-web.js"></script><script type="text/html" id="content-template"><p>我的名字叫{
{name}}</p><p>今年{
{age}}岁</p><p>{
{if age >= 18}}可以上网{
{else if age < 18}}不允许上网{
{/if}}</p><p>我的爱好有：</p><ul>{
{each hobby}}<li>{
{$index}}：{
{$value}}</li>{
{/each}}</ul>{
{@text}}<div>注册时间：{
{time|dateFormat}}</div></script><script>var data = {name:'zhangsan',age:18,hobby:['足球','篮球','手工'],text:'<a href="javascript:;">Happy</a>',time:new Date()}template.defaults.imports.dateFormat = function(date) {var y = date.getFullYear();var m = date.getMonth() + 1;var d = date.getDate();return y + '-' + m + '-' + d;}var htmlStr = template("content-template",data);$("#content").html(htmlStr);</script>
</body>
</html>