loadTemplate.js 实例讲解

loadTemplate.js是一种能够让你的加载完成的网站能够拥有更快的访问速度，特别适合来做表格化的系统,不比像其他链接那样点击刷新网页,造成新的http请求,load大概会一次加载完所有的页面请求，当然如果根据你的需求你可以完成请求一些获取全部的请求,能够实现前后端分离,我们只需要把后台的数据转换成标准json格式,我们就能通过loadTemplate()方法在前端上面显示

文章的最后我上传了一个关于loadTemplate.js 的实例

我们可以通过一种语言获取你所有页面的HTML放在一个文件中，甚至你可以用一个HTML文件完成所有的页面。当然一般这种情况只存在我们项目完成后才会用到

我们来一起学习它吧

数据在页面中

html写在body的代码 test.html

loadTemplate(template, data, options)
template   -----  目标ID（script id）
data       -----   数据
options    -----  options(一些分页)

<div id="content">(这里是我们要load的位置,这里是不需要内容的)</div>
    <script type="text/template" id="tpl_beauty">
        <div data-content="author"></div>
        <div data-content="date"></div>
        <img data-src="authorPicture" data-alt="author"/>
        <div data-content="post"></div>
        <div>页面中的模板：页面中模板</div>
    </script>

js代码

var params = {
    author: 'Kevin',
    date: '18th April 2016',
    authorPicture: './image/1.jpg(yoursrc)',
    post: 'This is the contents of my post'
};
//它也可以是一个组
// var params = [{
//     author: 'Kevin1',
//     date: '18th April 2016',
//     authorPicture: './image/1.jpg(yoursrc)',
//     post: 'This is the contents of my post'
//     },{
//         author: 'Kevin2',
//         date: '18th April 2016',
//         authorPicture: './image/1.jpg(yoursrc)',
//         post: 'This is the contents of my post'
//     }];
//这里我们load它就是了,页面中就有数据啦
$("#content").loadTemplate("#tpl_beauty",params);

数据发送到别的页面

例如我们在当前项目下面有个 ./test/echone.html

var post = {
    author: 'Joe Bloggs',
    date: '25th May 2013',
    authorPicture: 'SimpleExample/img/joeBloggs.gif',
    options: [{ value: 1, content: 'test' }, { value: 2, content: 'test2'}],
    post: 'This is the contents of my post'
};
//定义数据格式化的方法/在你需要格式化的数据标签的属性加上data-format="upperCaseFormatter"就可以了
        $.addTemplateFormatter({
            upperCaseFormatter: function (value, options) {
                return value.toUpperCase();
            },
            lowerCaseFormatter: function (value, options) {
                return value.toLowerCase();
            },
            sameCaseFormatter: function (value, options) {
                if (options == "upper") {
                    return value.toUpperCase();
                } else {
                    return value.toLowerCase();
                }
            }
        });
$("#content").loadTemplate("./test/echone.html",post);
这上面都是在test.html发生的事

这里是在echone.html发生的(接收)
<div class="post-container">
    <div data-content="author" data-format="upperCaseFormatter"></div>
    <div data-content="date" data-format="upperCaseFormatter"></div>
    <input type="text" data-value="author"/>
    <select data-template-bind='{"attribute": "options", "value": {"data": "options", "value":"value", "content":"content"}}'></select>
</div>
这下我们就可以在test.html加载./test/echone.html中的内容啦

我们会遇到两个问题,浏览器的前进后退,页面刷新

浏览器前进后退的时候只有一个单页面,里面load的内容不会跟着前进后退
解决办法:
在使用loadTemplate之后使用history.pushState(state, title, path)缓存他的数据;
监听浏览器前进后退

        //浏览器前进/后退
        window.addEventListener('popstate', function(e){
            if (history.state){
            var state = e.state;
            console.log(state);
            //alert(state.url+'....'+state.remote);
            loadTemplate(state.url, state.param, state.remote);
            }
        }, false);

页面刷新的时候会出现的url找不到(与服务器有关)
php为例
开启Apache的重写—自己百度
创建 .htaccess文件加入下面代码

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME} !-d
RewriteRule (.*) http://localhost/jqt/test.html [L]

随着vue angular react的兴起，我们更愿意去使用这写框架

实例

loadTemplate实例

QQ交流群主 9797721

QQ: 843462167