问题 

  之前项目中一直有用到artDialog对话框组件,作者后期又发布了js模版引擎,使用过几次,效果感觉还挺好。当自己想把模版放在html之外时,遇到了一点问题。

  作者介绍的方式,是在js文件中,通过定义变量,拼接模版,示例如下:

var source =
'<ul>'
+ '<% for (var i = 0; i < list.length; i ++) { %>'
+ '<li>索引 <%= i + 1 %> :<%= list[i] %></li>'
+ '<% } %>'
+ '</ul>'; var data = {
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
}; var render = template.compile(source);
var html = render(data);
document.getElementById('content').innerHTML = html;

  个人很不喜欢这种方式,虽然作者有数据证明,用加号拼接字符串,在现代浏览器中,性能十分强劲,但模版看起来非常不直观。修改起来很郁闷,有时候一个逗号错误,一上午就过去了。相比之下,我还是很喜欢在页面里配置的这种方式:

<script id="test" type="text/html">
<h1><%=title%></h1>
<ul>
<%for(i = 0; i < list.length; i ++) {%>
<li>条目内容 <%=i + 1%> :<%=list[i]%></li>
<%}%>
</ul>
</script>

  这样看起来比拼接的舒服一点,而且容易修改。

  问题就来了,能不能两者兼得呢?

解决方案

  首先在外部定义模版,我采用的是模版提供的简便语法,希望了解更多点击这里

using System;
namespace Model
{
public class {{name}}
{
{{each data}}
/// <summary>
/// {{$value.列说明}}
/// </summary>
public {{$value.数据类型}} {{$value.列名}} { get; set; }
{{/each}}
}
}

  接着,Html底部添加srcipt标记,指向上述模版地址。

<script type="text/html" id="tmModel" src="template/model.txt"></script>

  接下来要处理的则是通过ajax根据路径获取到模版内容,然后编译它,编译完成后即可使用了。关键代码如下:

(function () {
var tems = document.getElementsByTagName('script'); for (var i = 0; i < tems.length; i++) {
var t = tems[i];
if (!t.id || !t.id.length || !t.src || !t.src.length || 'text/html' != t.type) continue;
var obj = { src: t.src, id: t.id };
//清除原来的模板信息
t.id = "";
t.src = "";
ajaxrequest(obj.src, 'get', true, null, function (http, obj) {
//预编译模版
template.compile(obj.id, http.responseText.replace(/^\s*|\s*$/g, ""));
}, obj);
}
})();

  其中加载模版时,我采用的是Get方式 同步加载,避免模版未编译就使用。

  模版在加载完毕后,即可使用。看官方的语法:

 var html = template.render('tmTab', { data:[]});//tmTab 是我们之前定义的Script标签ID,编译完成后,即可直接使用该模版

  html则是根据模版+数据编译后的html代码了。

  拓展的js代码如下,不依赖jquery:

/**
* 得到ajax对象
*/
function getajaxHttp() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
return xmlHttp;
}
/**
* 发送ajax请求
* url--url
* methodtype(post/get)
* con (true(异步)|false(同步))
* parameter(参数)
* functionName(回调方法名,不需要引号,这里只有成功的时候才调用)
* (注意:这方法有二个参数,一个就是xmlhttp,一个就是要处理的对象)
* obj需要到回调方法中处理的对象
*/
function ajaxrequest(url, methodtype, con, parameter, functionName, obj) {
var xmlhttp = getajaxHttp();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
//HTTP响应已经完全接收才调用
functionName(xmlhttp, obj);
}
};
xmlhttp.open(methodtype, url, con);
xmlhttp.send(parameter);
} (function () {
var tems = document.getElementsByTagName('script'); for (var i = 0; i < tems.length; i++) {
var t = tems[i];
if (!t.id || !t.id.length || !t.src || !t.src.length || 'text/html' != t.type) continue;
var obj = { src: t.src, id: t.id };
//清除原来的模板信息
t.id = "";
t.src = "";
ajaxrequest(obj.src, 'get', true, null, function (http, obj) {
//预编译模版
template.compile(obj.id, http.responseText.replace(/^\s*|\s*$/g, ""));
}, obj);
}
})();

templateExtension.js

最后

  相比使用MVC的Razor视图引擎,个人更倾向于使用js类的前端模版。

  在我看来,用户最后看到的网页,无非就是网页+数据。 网页呈现这一部分,根据业务类别如何显示,完全交给html js css来做,后端不管是语言,提供相应的数据即可。

  当然,过多的ajax可能不利于SEO,不过我一直做的,都是内网用的,可能根本就不需要SEO。

  一点拙见,欢迎大家指正。

artTemplate 动态加载模版的更多相关文章

  1. [UE4]C++实现动态加载的问题:LoadClass<T>()和LoadObject<T>() 及 静态加载问题:ConstructorHelpers::FClassFinder()和FObjectFinder()

    转自:http://aigo.iteye.com/blog/2281558 动态加载UObject和动态加载UClass分别用LoadObject<T>(),和LoadClass<T ...

  2. [UE4]C++实现动态加载的问题:LoadClass()和LoadObject()

    http://aigo.iteye.com/blog/2281558 原文作者:@玄冬Wong 相关内容:C++静态加载问题:ConstructorHelpers::FClassFinder()和FO ...

  3. js动态加载css和js

    之前写了一个工具类点此链接里面含有这段代码,感觉用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjs ...

  4. geotrellis使用(二十三)动态加载时间序列数据

    目录 前言 实现方法 总结 一.前言        今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...

  5. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  6. Ext动态加载Toolbar

    在使用Ext的GridPanel时候,有时候需要面板不用重新加载而去更新Store或者Toolbar,Store的方法有很多,例如官方api给我们提供的Store.load(),Store.reLoa ...

  7. Android动态加载框架汇总

    几种动态加载的比较 1.Tinker 用途:热修复 GitHub地址:https://github.com/Tencent/tinker/ 使用:http://www.jianshu.com/p/f6 ...

  8. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  9. html中的图像动态加载问题

    首先要说明下文档加载完成是什么概念 一个页面http请求访问时,浏览器会将它的html文件内容请求到本地解析,从窗口打开时开始解析这个document,页面初始的html结构和里面的文字等内容加载完成 ...

随机推荐

  1. Snowflake Snow Snowflakes【Poj3349】

    Description You may have heard that no two snowflakes are alike. Your task is to write a program to ...

  2. Highest Tower 18中南多校第一场H题

    一.题意 给出N个方块,要求给出一个方案,使得1. 所有方块都被使用到(题目数据保证这点) 2.所有方块垒成一个塔,且上面的方块宽度小于下面的方块 3.每个方块只能用一次,可以横着或者竖着. n范围5 ...

  3. 笔记-python-lib-requests常用类/方法/属性

    笔记-python-lib-requests常用类/方法/属性 1.      requests模块常用类/方法/属性 在使用中发现对requests模块不够熟悉,写了几个案例后重新整理了一下文档,罗 ...

  4. CodeForces 879D Teams Formation

    题意 将一个长度为\(n\)的数组重复\(m\)遍得到一个长度为\(n \times m\)的新序列,然后消掉新序列中连续\(k\)个相同的元素,不断重复这一过程,求最后剩下的序列的长度 分析 首先可 ...

  5. P1862 输油管道问题

    P1862 输油管道问题 题目背景 听说最近石油危机 所以想到了这题 题目描述 某石油公司计划建造一条由东向西的主要输油管道.该管道要穿过一个有n口油井的油田.从每口油井都要有一条输油管道沿最短路径( ...

  6. BitLocker:如何启用网络解锁

    TechNet 库Windows ServerWindows Server 2012 R2 和 Windows Server 2012服务器角色和技术安全和保护BitLockerBitLocker 中 ...

  7. APP遇到大量的真实手机号刷注册用户该如何应对?

    欢迎访问网易云社区,了解更多网易技术产品运营经验. 在说如何应对之前,先给各位梳理移动端APP可能遇到哪些作弊风险.1. 渠道商刷量,伪造大量的下载量和装机量,但没有新用户注册:2. 对于电商.P2P ...

  8. 《Cracking the Coding Interview》——第2章:链表——题目6

    2014-03-18 02:41 题目:给定一个带有环的单链表,找出环的入口节点. 解法1:用hash来检测重复节点肯定是容易想而且效率也高的好办法. 代码: // 2.6 You have a ci ...

  9. Nuget.config格式错误,请检查nuget.config配置文件

    安装 VS 2015 Professional 版,安装后,我想加一个nuget的包配置. 然后提示我:Nuget.config格式错误,请检查nuget.config配置文件 我找到了 Nuget. ...

  10. mysql用root账户建立用户和赋予权限

    1.创建用户 create user guest_test@localhost identified by "root";-- 创建名为guest_test的用户 2.赋予权限 - ...