简单的js模板实现，不支持for循环和if判断哪些
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Simple Templating</title>
</head>
<body>
<div id="content" style="border:1px solid red;"></div>
<script type="template" id="template">
<h2>
<a href="{{href}}">
{{title}}
</a>
</h2>
<img src="{{imgSrc}}" alt="{{title}}">
</script>
<script type="text/javascript">
var data = [
{
title : 'php web appliaction',
href : 'http://www.baidu.com',
imgSrc : 'http://www.baidu.com'
},
{
title : 'js 权威指南',
href : 'http://www.qq.com',
imgSrc : 'http://www.qq.com'
}];
var template = document.querySelector('#template').innerHTML;
function _template(template, data){
var i = 0,
len = data.length,
fragment = '';
function replace(obj){
var t, key, reg;
for(key in obj){
reg = new RegExp('{{' + key + '}}', 'ig');
t = (t || template).replace(reg, obj[key]);
}
return t;
}
for(; i < len; i++){
fragment += replace(data[i]);
}
return fragment;
}
console.log(_template(template, data));
document.querySelector("#content").innerHTML=_template(template, data);
</script>
</body>
</html>
自己业务使用改进了下
/模板方法
function _temp(template, data){
var i = 0,
fragment = '';
function status(v){
var str =v ;
if(v==0){
str="审批不通过";
}else if(v==1){
str="审批中";
}else if(v==2){
str="放款成功";
}else if(v==3){
str="放款失败";
}else if(v==4){
str="支付成功";
}else if(v==5){
str="支付失败";
}else if(v==6){
str="已受理";
}
return str;
}
function replace(obj){
var t, key, reg,v;
for(key in obj){
reg = new RegExp('{{' + key + '}}', 'ig');
if(key=="STATUS"){
v=status(obj[key]);
}else if(key=='LOAN_DATE'){
v=new Date(obj[key]).format("yyyy-MM-dd hh:mm:ss");
}else if(key=='LOAN_EXPIRE'){
v=new Date(obj[key]).format("yyyy-MM-dd");
}else{
v=obj[key];
}
t = (t || template).replace(reg, v);
}
return t;
}
fragment += replace(data);
return fragment;
}
相关推荐
"MySite"这个文件名可能是整个网站的根目录，里面可能包含HTML文件（如index.html）、CSS文件（如style.css）、JavaScript文件（如script.js），以及其他如图像（images）、图标（icons）和字体（fonts）等资源...
JavaScript模板在各种场景下都有广泛应用，如： - **服务器端渲染**：在Node.js环境中，可以使用模板引擎生成HTML响应。 - **客户端渲染**：在浏览器端，模板引擎可以用于AJAX请求后动态更新页面。 - **邮件模板**...
比较简单，又小巧的js模板引擎，非常好用的。
"简单JavaScript模板"这个主题聚焦于如何以简洁高效的方式实现这一目标，特别是在不改动现有代码结构的前提下。 在Web应用中，数据和视图的分离是关键，而JavaScript模板正好提供了这样的功能。模板引擎允许我们...
本篇文章将深入探讨如何从零开始构建一个简单的JavaScript模板引擎，逐步改进并理解其核心原理。 首先，我们需要理解模板引擎的基本工作流程。模板引擎接受两部分输入：数据和模板。模板通常是一段包含占位符的HTML...
下面通过一个简单的例子来介绍JS模板的编译过程： ```javascript var tpl = 'Hei, my name is , and I\'m <% age %> years old.'; var data = { "name": "Barret Lee", "age": "20" }; var result = tplEngine...
总之，`template.js`作为一款轻量级的JavaScript模板引擎，提供了一种简便的方法来结合数据和HTML模板，从而生成动态网页内容。通过理解和掌握其核心概念和使用方式，开发者可以在Web开发中更高效地管理数据和视图。
例如，Mustache和Handlebars是两个流行的JavaScript模板引擎，它们提供了丰富的语法结构，如`{{#if}}...{{/if}}`（条件判断）和`{{#each}}...{{/each}}`（循环遍历数组）。 总的来说，前端模板引擎是前端开发中不可...
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用。 本资源包含了mustache.js 、mustache.min.js包 版本号v2.2.1
在本主题中，我们主要探讨“比较简单实用HTML模板”的特点、用途以及如何使用。 一、HTML模板概述 HTML（HyperText Markup Language）是用于创建网页的标准标记语言，而HTML模板则是基于这些语法规则预先设计好的...
在这个"简单JS页面视图模板"中，我们可以看到一个基本的JavaScript页面视图的实现，它结合了HTML、CSS和JavaScript来创建动态的用户体验。这篇博客文章通过一个实例展示了如何使用JavaScript来构建页面模板，尤其...
这个"css+html+js简单模板"提供了一个学习和实践这些技术的实例。让我们详细探讨一下这三个核心技术及其在网页开发中的作用。 首先，HTML（HyperText Markup Language）是构建网页内容的基本语言。它通过标签来定义...
Vegito是一个轻量级的JavaScript模板引擎，其设计目标是提供一种简洁、高效的机制，用于在Node.js和浏览器环境中动态生成HTML。由于其体积小巧，仅有463字节，Vegito成为了那些追求高性能且对文件大小有严格限制的...
**百度js模板（Baidu Template）**是一种轻量级的JavaScript模板引擎，它主要用于Web开发中的数据绑定和渲染。在JavaScript中，模板引擎允许开发者将HTML结构与数据分离，使得前端展示逻辑更加清晰，便于维护和扩展...
总的来说，JavaScript模板引擎是提高前端开发效率的重要工具，它们通过分离数据和视图，使代码更具可读性和可维护性。开发者可以根据项目的需求，从众多模板引擎中挑选最适合的一个，以实现高效、优雅的动态内容渲染...
x2简单时尚模板.rar" 是一个专门为Discuz! X2论坛系统设计的模板压缩包，其主要目标是为网站提供一种简洁而时尚的外观设计，以提升用户界面的视觉体验和交互性。 Discuz! X2是一款广泛应用的开源社区论坛软件，由...
**Mustache.js：JavaScript模板引擎详解** Mustache.js，又称为mustache，是一款轻量级且功能强大的模板引擎，专为JavaScript设计。它遵循“逻辑less”的理念，将视图和数据分离，使得代码更易于理解和维护。...
2. EJS：易于嵌入JavaScript代码，适合简单的动态渲染。 3. Mustache：遵循“logic-less”的原则，模板语法简洁，可跨语言使用。 4. Underscore.js和Lodash：除了提供模板功能，还包含大量实用的工具函数，帮助开发...
纯JavaScript分页模板是一种在网页应用中实现数据分页功能的方法，它不依赖任何外部库如jQuery或AngularJS，完全由原生JavaScript代码构建。这种模板通常包括一系列用于计算页码、显示当前页数、处理页码跳转事件...