baiduTemplate是百度推出的一款非常便捷的前端页面框架。但对于单个页面、静态页面来说，很大几率是用不上的。他的强大之处在于能很好的解决原生Ajax数据展示到页面上而不是传统的通过繁琐的DOM树操作。从这点也能看出这个框架能减少CPU耗能操作（DOM节点操作相当耗损性能）。但遗憾的是，现在这个框架百度不再公开了。不过没关系我们还能找到1.0版本，虽说是1.0版本，但功能还是很强大的。
首先，工欲善其事必先利其器，要想用这个框架就得先去引用这个框架（是不是感觉我在说废话）可以通过npm install baidutemplate（全部小写）命令在node环境中下载（不知道node的小伙伴，出门右转，去问度娘），对于不熟悉node的同鞋，更推荐直接去下面的网站中去下载：http://wangxiao.github.io/BaiduTemplate/，点击菜单栏中的下载，会跳转到源码的页，右击另存为就能下载了。下面以第二种方法举例。
在编辑器中引入该框架
注意引入路径一定要写对！！！
然后我们搭建模板。在body标签中写上一对儿<script>标签并给标签添加Id值temp（id值可以随便取），注意<script>标签的type要改为“text/html”然后用<div>标签包裹一对儿<h1>标签在h1表中写“<%=message%>”（h1和div标签不是必须得写的，你可以把<%=message%>看成具体的数据）
这我们就搭好了一个模板。解释一下为什么要在<script>标签里写，因为这个标签不会被渲染出来，<%message%>是代替数据的部分，格式就是这么写，就是在js中能使用的语法（for循环、if判断）在<script type = 'text/html>标签内都得用<%%>包裹.<%=message%>中的“=”就是赋值，把messag替换具体的数据。<scrtpt type = "text/html">中的type指的是我们的<script>标签包裹的是html代码。
接下来是js部分。因为没搭建服务器，这里定义一个json对象“data”来模拟请求下来的数据。
然后调用“baidu.template”把data数据取出放到<%=message%>的位置。这里我们可以用命名空间把“baidu.template"更改为bt（只是个 变量名，什么都可以）也就是第17行做的事情，这样我们就可以像第21行那样写代码了。值得注意的是“baidu.template”方法有两个参数第一个是目标模板的id/class名，第二个就是通过Ajax请求下来的数据。第21行定义的html变量用来承接通过bt转换的html字符串。我们可以通过"console.log(html)"打印一下这个html变量。
可以看到html变量保存的是通过bt方法转化出来的html代码字符串。
最后我们这个html变量插入到进<body>标签中，这是我们打开这个页面时，就能看到“你好！世界！”这几个字了
更多用法可以看http://wangxiao.github.io/BaiduTemplate/中的内容，这里只是简单的举例如何使用baiduTemplate框架。这个框架最大的用处还是解决原生Ajax请求下的数据拼接到页面上的问题。
总结baiduTemplate的用法：
1.引入baiduTemplate框架
2.创建一个模板
3.解析数据替换模板
4.把解析的数据插入到<body>标签中
最后要注意的事情是以上提到的所有注意点。
（如果你喜欢这篇文章，就我一个转、评、赞吧，写不足之处还希望诸位大神批评、指正）
网友评论