• 技术文章 >web前端 >前端问答

    javascript模板引擎是什么

    长期闲置长期闲置2022-04-26 15:12:09原创461

    JavaScript模板引擎是一种将html结构与其中包含内容分离的方法,是为了使用户界面与业务数据分离而产生的,可以生成一个标准的html文档;模板引擎就是在让动态页面渲染的时候,可以用于简化字符串拼接操作的东西。

    本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。

    javascript模板引擎是什么

    模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。

    模板引擎就是为了让动态页面渲染的时候,可以简化字符串的拼接操作的东西。

    JavaScript模板是一种将HTML结构与其中包含的内容分离的方法。 模板系统通常会引入一些新语法,但通常使用起来非常简单,尤其是如果我们以前在其他地方使用过模板系统(例如PHP中的Twig )。 需要注意的有趣一点是,令牌替换通常由双大括号( {{ ... }} )表示,Mustache和Handlebars源自其大括号(提示:将其侧向查看相似性)。

    比如我们需要在页面渲染一个列表:

    <li>111</li>
    <li>222</li>
    <li>333</li>

    列表中的数据是动态获取的一个数组data=['111','222','333']。那么我们直接用代码写,需要循环data,然后拼接每一个li的数据。写惯了页面的同学,希望把代码逻辑直接写在一个html里面,只要更换数据源,就能输出不同的页面代码了。比如我们可以这样写:

    for(var i = 0; i < this.list.length; i++){
      <li>this.list[i]</li>
    }

    当更换this.list的数据后,就可以获得不同的结果了。但是这样的代码,是没法区分哪里是逻辑代码,哪里是html本身的代码的。所以我们加入了一些标记符,我们这里用<% %>来包裹住逻辑代码。

    <%for(var i = 0; i < this.list.length; i++){%>
      <li><%=this.list[i]%></li>
    <%}%>

    这段代码我们可以加在script标签内,修改type为text/html或者其它格式,在需要使用的时候,通过dom获取到里面的文本内容。如果js可以理解这段代码,就可以通过变更数据源来更新模板内容了。我们可以通过正则匹配,捕获所有的逻辑代码,然后进行分析。这里我取了巧,利用js可以new Function执行代码的途径,将逻辑代码以外的部分,加成了一个字符串,执行后输出最后的字符串结果:var etj = function (str, data) {

    var reg = /^<%.*?%>/,
        reg2 = /^(.*?)<%/,
        str2 = 'var str = "";',
        str = str.replace(/[\r\t\n]/g, " ");
    while (str.length) {
        if (match = reg.exec(str)) {
            if (/^<%=/.exec(str)) {
                str = str.replace(match[0], '');
                str2 += ('str +' + match[0].replace(/<%|%>/g, ''));
                str2 += ';';
            } else {
                str = str.replace(match[0], '');
                str2 += match[0].replace(/<%|%>/g, '');
                str2 += ';';
            }
        } else {
            match = reg2.exec(str)[1];
            str = str.replace(match[0], '');
            str2 += 'str +="';
            str2 += match[0];
            str2 += '";';
        }
    }
    str2 += 'return str;'
    var f = new Function(str2);
    return f.call(data);

    }这是自己写的一个玩具引擎,还有bug,先做一个demo展示吧(毕竟逻辑简单)。在这里我们通过简单的正则,把模板变成了一段纯粹的js代码,当导入数据源后,执行结果就是我们所要的html代码了。我们只要执行:

    etj(str, {'list': [1, 2, 3]});

    就可以了,这样,html的逻辑也不用嵌入js的代码中。

    【相关推荐:javascript视频教程web前端

    以上就是javascript模板引擎是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript
    上一篇:es6中遍历跟迭代的区别是什么 下一篇:jquery能给多个元素一起绑定事件吗
    千万级数据并发解决方案

    相关文章推荐

    • javascript可以用el表达式吗• javascript中用什么定义函数• JavaScript为什么要封装• 带你了解JavaScript中的键盘、鼠标事件• 一起来分析JavaScript中的弱引用和强引用
    1/1

    PHP中文网