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>标签中
最后要注意的事情是以上提到的所有注意点。
(如果你喜欢这篇文章,就我一个转、评、赞吧,写不足之处还希望诸位大神批评、指正)