支持数据多级嵌套和数组:
var applyTpl = (function(){
var reg = /\{([\w\.]*)\}/g;
var regArr = /<#for\s+(\w+)>(.*?)<\/for#>/g,
regArrIdx = /\{#i\}/g,
regArrVal = /\{#val\}/g;
function getVal(key,data){
var arr = key.split("."),
val = data;
while(arr[0] && val){
val = val[arr.shift()];
}
if(val === null || typeof val === "undefined"){
val = "";
}
return val;
}
//处理数组
function compileArray(tpl,data){
tpl = tpl.replace(regArr,function(){
var tmp = "",
obj = getVal(arguments[1],data);
if(typeof obj === "object" && obj instanceof Array){
for(var i=0,len = obj.length; i<len; i++){
tmp += replaceFn(arguments[2],obj[i]);
tmp = tmp.replace(regArrIdx,i).replace(regArrVal,obj[i]);
}
}
return tmp;
});
return tpl;
}
function replaceFn(tpl,data){
tpl = compileArray(tpl,data);
tpl = tpl.replace(reg,function(){
return getVal(arguments[1],data);
});
return tpl;
};
return replaceFn;
})();
//example:
var str = '{tel}{userName}aaaa{tel}aaaa<ul><#for shopList><li>{#i}:{commodityId}</li></for#></ul>aaaaaaaa<#for arr><li>{#i}:{#val}</li></for#>';
var obj = {"userName":"测试","tel":"13800138010","remark":"","arr":['X','Y'],"address":"4-42-110","shopList":[{"commodityId":"58","countToBuy":1}],"coin":11};
applyTpl(str,obj)
分享到:
相关推荐
4. **对象操作**:JavaScript对象用于存储键值对,模板可能包括创建、访问和修改对象属性,以及使用对象字面量和构造函数的方式。 5. **事件处理**:JavaScript能响应用户的交互,如点击、鼠标移动、键盘输入等。...
13. **ES6新特性**:包括箭头函数(`=>`)、模板字符串(` `${}``)、解构赋值、类(`class`)和模块(`import`和`export`)等。 14. **函数式编程**:高阶函数(如`map()`, `filter()`, `reduce()`)和函数组合是...
ES6(ECMAScript 2015)的推出为JavaScript带来了许多新的语法特性,如箭头函数、模板字符串、类和模块等,提升了代码的简洁性和可读性。 HTML网页模板通常包含多个预定义的HTML文件,如首页、关于我们、联系我们等...
总结起来,这个20行的JavaScript模板引擎实例展示了如何使用正则表达式解析模板字符串,以及如何通过`Function`构造函数动态生成代码并执行,从而实现了动态数据绑定和简单的逻辑控制。尽管这个简单的实现可能无法...
JavaScript模板引擎是一种在JavaScript中处理数据和HTML组合的工具,它的主要目的是将数据逻辑与页面展示分离,提高代码的可维护性和复用性。在Web开发中,它扮演着一个预处理器的角色,允许开发者编写类似于HTML的...
总结来说,laytpl是一款以简洁和高性能为特点的JavaScript模板引擎,它遵循原生JS语法,易于学习和使用。在前端开发中,laytpl可以帮助我们高效地实现数据和视图的动态绑定,提升开发效率,是构建响应式Web应用的一...
PowJS与其他JavaScript模板引擎(如Handlebars、EJS、Mustache等)相比,其特色在于DOM Tree的直接操作,这可能会提供更快的渲染速度和更好的浏览器兼容性。然而,每个模板引擎都有其适用场景,选择哪种引擎应根据...
JavaScript模板引擎种类繁多,每种都有其独特的特点和适用场景。例如: 1. **Mustache**:这是一种逻辑less的模板引擎,遵循“逻辑不可见”的原则,避免在模板中出现复杂的条件判断和循环。它的语法简洁,跨语言,...
尽管这个版本相对早期,但对于小型项目和学习JavaScript模板引擎的原理来说,它仍然是一个很好的选择。 在实际应用中,laytpl常常与Ajax请求配合使用,获取服务器端的数据,然后用这些数据渲染页面。这使得前端可以...
**基于jQuery开发的JavaScript模板引擎——jTemplates** jTemplates是一个基于jQuery的JavaScript模板引擎,它允许开发者使用HTML标记和简单的语法来创建动态数据驱动的页面。这个强大的工具可以帮助前端工程师将...
深入理解JavaScript系列(8):S.O.L.I.D五大原则之里氏替换原则LSP 深入理解JavaScript系列(9):根本没有“JSON对象”这回事! 深入理解JavaScript系列(10):JavaScript核心(晋级高手必读篇) 深入理解...
根据给定的文件信息,以下是对标题“javascript常用函数大全”及描述中涉及的重要知识点的详细解析: ### 基础知识:创建脚本块 #### 示例代码: ```html <script language="JavaScript"> // JavaScript代码放这里...
在实际应用中,这可能会涉及到诸如`Date`对象的API、模板字符串、箭头函数、数组映射和 reduce 方法等JavaScript原生特性。 `You-Dont-Need-Momentjs_master.zip`是一个源代码仓库,可能包含了示例代码、测试用例...
总的来说,JavaScript模板引擎是提高前端开发效率的重要工具,它们通过分离数据和视图,使代码更具可读性和可维护性。开发者可以根据项目的需求,从众多模板引擎中挑选最适合的一个,以实现高效、优雅的动态内容渲染...
JavaScript模板在各种场景下都有广泛应用,如: - **服务器端渲染**:在Node.js环境中,可以使用模板引擎生成HTML响应。 - **客户端渲染**:在浏览器端,模板引擎可以用于AJAX请求后动态更新页面。 - **邮件模板**...
### JavaScript模板引擎用法实例知识点总结 #### 模板引擎概念 模板引擎是一种用来将数据与HTML模板分离,以实现动态内容生成的技术。在JavaScript中,模板引擎能够帮助开发者在不直接操作DOM的情况下,将数据绑定...
这个函数的核心是遍历模板字符串,识别并替换特定的占位符。常见的占位符如`Y`(四位年份)、`m`(两位月份)等。对于每个占位符,函数内部会使用JavaScript的`Date`对象的方法来获取相应的日期或时间部分,并根据...
`handlebars.js`是一个流行的JavaScript模板引擎,它提供了一种简洁的方式来构造和解析HTML或任何其他文本格式,特别是用于动态内容填充。 Handlebars.js的核心概念包括: 1. **助手(Helpers)**:自定义函数,...
- `format`: 可能用于格式化字符串,例如替换占位符,可以利用`String.prototype.replace`或模板字符串。 3. **日期与时间**: - `getTimestamp`: 获取当前时间戳,使用`Date.now()`或`new Date().getTime()`。 ...
1. **预编译**:将模板字符串转换为JavaScript函数,这个函数负责渲染模板。 2. **数据绑定**:将数据对象传递给预编译得到的函数,函数会根据数据填充模板。 3. **渲染**:执行函数,生成最终的HTML字符串。 **...