`
mutongwu
  • 浏览: 448388 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

javascript 模板替换函数

阅读更多
支持数据多级嵌套和数组:
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)
分享到:
评论

相关推荐

    180个javascript代码模板,每个都很小,但是全面

    4. **对象操作**:JavaScript对象用于存储键值对,模板可能包括创建、访问和修改对象属性,以及使用对象字面量和构造函数的方式。 5. **事件处理**:JavaScript能响应用户的交互,如点击、鼠标移动、键盘输入等。...

    javascript常用函数集合

    13. **ES6新特性**:包括箭头函数(`=&gt;`)、模板字符串(` `${}``)、解构赋值、类(`class`)和模块(`import`和`export`)等。 14. **函数式编程**:高阶函数(如`map()`, `filter()`, `reduce()`)和函数组合是...

    HTML+CSS+JavaScript网页模板

    ES6(ECMAScript 2015)的推出为JavaScript带来了许多新的语法特性,如箭头函数、模板字符串、类和模块等,提升了代码的简洁性和可读性。 HTML网页模板通常包含多个预定义的HTML文件,如首页、关于我们、联系我们等...

    只有 20 行的 JavaScript 模板引擎实例详解

    总结起来,这个20行的JavaScript模板引擎实例展示了如何使用正则表达式解析模板字符串,以及如何通过`Function`构造函数动态生成代码并执行,从而实现了动态数据绑定和简单的逻辑控制。尽管这个简单的实现可能无法...

    JavaScript模板引擎原理与用法详解.docx

    JavaScript模板引擎是一种在JavaScript中处理数据和HTML组合的工具,它的主要目的是将数据逻辑与页面展示分离,提高代码的可维护性和复用性。在Web开发中,它扮演着一个预处理器的角色,允许开发者编写类似于HTML的...

    laytpl是一款非常轻量的JavaScript模板引擎

    总结来说,laytpl是一款以简洁和高性能为特点的JavaScript模板引擎,它遵循原生JS语法,易于学习和使用。在前端开发中,laytpl可以帮助我们高效地实现数据和视图的动态绑定,提升开发效率,是构建响应式Web应用的一...

    PowJS基于DOMTree的JavaScript模板引擎

    PowJS与其他JavaScript模板引擎(如Handlebars、EJS、Mustache等)相比,其特色在于DOM Tree的直接操作,这可能会提供更快的渲染速度和更好的浏览器兼容性。然而,每个模板引擎都有其适用场景,选择哪种引擎应根据...

    基于JavaScript的模板引擎

    JavaScript模板引擎种类繁多,每种都有其独特的特点和适用场景。例如: 1. **Mustache**:这是一种逻辑less的模板引擎,遵循“逻辑不可见”的原则,避免在模板中出现复杂的条件判断和循环。它的语法简洁,跨语言,...

    laytpl-JavaScript模板引擎 v1.1.zip

    尽管这个版本相对早期,但对于小型项目和学习JavaScript模板引擎的原理来说,它仍然是一个很好的选择。 在实际应用中,laytpl常常与Ajax请求配合使用,获取服务器端的数据,然后用这些数据渲染页面。这使得前端可以...

    基于jQuery开发的javascript模板引擎-jTemplates

    **基于jQuery开发的JavaScript模板引擎——jTemplates** jTemplates是一个基于jQuery的JavaScript模板引擎,它允许开发者使用HTML标记和简单的语法来创建动态数据驱动的页面。这个强大的工具可以帮助前端工程师将...

    深入理解JavaScript系列

    深入理解JavaScript系列(8):S.O.L.I.D五大原则之里氏替换原则LSP 深入理解JavaScript系列(9):根本没有“JSON对象”这回事! 深入理解JavaScript系列(10):JavaScript核心(晋级高手必读篇) 深入理解...

    javascript常用函数大全

    根据给定的文件信息,以下是对标题“javascript常用函数大全”及描述中涉及的重要知识点的详细解析: ### 基础知识:创建脚本块 #### 示例代码: ```html &lt;script language="JavaScript"&gt; // JavaScript代码放这里...

    JavaScript_你可以用来替换momentjs ESLint Plugin的函数列表.zip

    在实际应用中,这可能会涉及到诸如`Date`对象的API、模板字符串、箭头函数、数组映射和 reduce 方法等JavaScript原生特性。 `You-Dont-Need-Momentjs_master.zip`是一个源代码仓库,可能包含了示例代码、测试用例...

    Javascript最简单的模板引擎

    总的来说,JavaScript模板引擎是提高前端开发效率的重要工具,它们通过分离数据和视图,使代码更具可读性和可维护性。开发者可以根据项目的需求,从众多模板引擎中挑选最适合的一个,以实现高效、优雅的动态内容渲染...

    简单的template的js模板

    JavaScript模板在各种场景下都有广泛应用,如: - **服务器端渲染**:在Node.js环境中,可以使用模板引擎生成HTML响应。 - **客户端渲染**:在浏览器端,模板引擎可以用于AJAX请求后动态更新页面。 - **邮件模板**...

    JavaScript模板引擎用法实例

    ### JavaScript模板引擎用法实例知识点总结 #### 模板引擎概念 模板引擎是一种用来将数据与HTML模板分离,以实现动态内容生成的技术。在JavaScript中,模板引擎能够帮助开发者在不直接操作DOM的情况下,将数据绑定...

    JavaScript仿PHP时间格式化函数

    这个函数的核心是遍历模板字符串,识别并替换特定的占位符。常见的占位符如`Y`(四位年份)、`m`(两位月份)等。对于每个占位符,函数内部会使用JavaScript的`Date`对象的方法来获取相应的日期或时间部分,并根据...

    JavaScript_类固醇上的最小模板.zip

    `handlebars.js`是一个流行的JavaScript模板引擎,它提供了一种简洁的方式来构造和解析HTML或任何其他文本格式,特别是用于动态内容填充。 Handlebars.js的核心概念包括: 1. **助手(Helpers)**:自定义函数,...

    10个常用自定义JavaScript函数

    - `format`: 可能用于格式化字符串,例如替换占位符,可以利用`String.prototype.replace`或模板字符串。 3. **日期与时间**: - `getTimestamp`: 获取当前时间戳,使用`Date.now()`或`new Date().getTime()`。 ...

    JSTE - 基于JavaScript语法的简易模板引擎

    1. **预编译**:将模板字符串转换为JavaScript函数,这个函数负责渲染模板。 2. **数据绑定**:将数据对象传递给预编译得到的函数,函数会根据数据填充模板。 3. **渲染**:执行函数,生成最终的HTML字符串。 **...

Global site tag (gtag.js) - Google Analytics