EJS模板引擎

我们经常会使用AJAX/JSONP等技术,从服务器端获取到我们所需要的数据,然后把数据动态的展示在对应页面中。

1.不依托JS,而是使用PHP/Ruby/Python/JSP等技术实现数据的绑定(没有前后端分离)

2.JS代码中进行字符串拼接

这种方式属于前后端分离,在JS中获取到服务器端返回的数据后,把之前在HTML页面中写好的标签,一句句的复制到JS中,用字符串拼接的方式,把标签和数据拼接在一起,最后在把拼接完成的字符串插入到页面中指定的位置。但是这种处理方式对于简单的字符串拼接还是可以的,但是如果遇到非常复杂的,就不适用了。

这种方式有一种弊端:开发效率低,后期不好改动,JS代码结构很乱,不易于后期的维护,用此动态创建元素借点的方式,还会引发多次的DOM回流,影响页面的性能

<header class="header">  
    <h1>  
        <span>编号</span>  
        <span>姓名</span>  
        <span>性别</span>  
        <span>分数</span>  
    </h1>  
</header>  
<section class="content">  
    <ul>  
        <!--这里动态加载节点-->  
        <!--<li>  
            <span>001</span>  
            <span>消愁</span>  
            <span>男</span>  
            <span>88</span>  
        </li>-->  
    </ul>  
</section>

<script src="js/zepto.min.js" type="text/javascript"></script>  
<script type="text/javascript">  
    function bindHTML(data) {  
        var str = "";  
        $.each(data, function (index, item) {  
            str += '<li>';  
            str += '<span>' + item.num + '</span>';  
            str += '<span>' + item.name + '</span>';  
            str += '<span>' + (item.sex==0?'男':'女') + '</span>';  
            str += '<span>' + item.score + '</span>';  
            str += '</li>';  
        });  
        $(".content>ul").html(str);  
    }  
    $.ajax({  
        url: 'json/data.json',  
        type: 'get',  
        dataType: 'json',  
        cache: false,  
        success: bindHTML  
    });  
</script>

实现的效果:



3.使用模板引擎绑定数据和渲染数据

模板引擎的原理其实也是字符串拼接,但是和第二种不同的是,它不是把字符串在JS代码中拼接,而是先在HTML页面中,按照模板提供的规则把数据内容嵌入到HTML标签中。最后由模板解析成需要的字符串,在JS中把解析出来的字符串放入到页面中的指定位置进行渲染。

EJS模板引擎

EJS(Embedded JavaScript)也是众多模板中的一种,它主要是NODE开源的模板,在NODE环境下实现绑定和渲染的。但是它也可以单独的在客户端调取使用,我们接下来就介绍独立在客户端的使用

在客户端使用EJS主要分成四步:

1.导入EJS

EJS的源码大家可以去它的官网进行下载:http://www.embeddedjs.com/(但是我下载不了)

2.准备需要绑定的数据

在真实项目中,这一步需要使用AJAX或者JSONP等技术从服务器获取,然后把获取回来的数据进行解析重构

3.在HTML页面中设定模板和嵌入数据

模板有自己的渲染规则,我们把需要写的JS循环判断放在<%%>中,如果需要输出用<=%%>,其实非常简单就是把之前的字符串拼接方式中的JS写在了HTML中,这样EJS负责把模板中的内容获取到,然后按照规则把数据和HTML标签拼凑在一起就好

4.在JS中为EJS模板提供需要绑定的数据

<!--第一步-->
<script type="text/javascript" src="js/ejs.min.js"></script>
<!--第三步-->
<script type="text/template" id="conTemplate">
    <%$.each(matchData,function(index,item){%>
    <li>
        <span><%=item.num%></span>
        <span><%=item.name%></span>
        <span><%=item.sex%></span>
        <span><%=item.score%></span>
    </li>
    <%})%>
</script>
<script src="js/zepto.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //    rem
    document.documentElement.style.fontSize = document.body.clientWidth / 320 * 100 + "px";
    //    第四步
    function bindHTML(data) {
        var conTemplate = $("#conTemplate").html();
        var result = ejs.render(conTemplate, {matchData: data});
        $(".content>ul").html(result);
    }
    //    第二步
    $.ajax({
        url: 'json/data.json',
        type: 'get',
        dataType: 'json',
        cache: false,
        success: bindHTML
    });
</script>

### EJS 模板引擎简介 EJS 是一种简单易用的 JavaScript 模板语言,允许开发者通过嵌入 JavaScript 的方式生成 HTML 页面。它支持模板预编译以及缓存功能,从而提高性能并减少重复工作[^1]。 以下是关于 EJS 的一些核心特性及其基本使用方法: #### 特性概述 - **动态内容注入**:可以轻松将变量插入到 HTML 中。 - **条件逻辑控制**:支持 `<% if %>`, `<% else %>` 等语句来实现分支逻辑。 - **循环结构**:可以通过 `<% for %>`, `<% forEach %>` 来迭代数组或对象集合。 - **模板重用**:提供 `include` 功能用于加载外部文件片段,便于模块化开发。 #### 安装与初始化 要安装 EJS 可以借助 npm 工具完成如下命令操作: ```bash npm install ejs --save ``` 接着,在 Node.js 应用程序中引入该库即可开始编写视图层代码: ```javascript const express = require('express'); const app = express(); app.set('view engine', 'ejs'); // 设置默认渲染引擎为 EJS ``` #### 基础语法实例 下面展示几个常见的场景应用例子说明如何利用这些特性的实际效果。 ##### 插值表达式 向页面传递数据并通过插值显示出来是最基础也是最常用的功能之一。 ```html <!-- index.ejs --> <h1><%= title %></h1> <p>Welcome to my website!</p> // server.js res.render('index', { title: 'Home Page' }); ``` 此处 `<%= ... %>` 表达式的含义是从服务器端传来的参数替换掉占位符位置的内容。 ##### 控制流标签 除了简单的文本替代外还可以加入更复杂的业务处理比如判断是否存在某些字段或者遍历列表项等等。 ```html <% if (user) { %> <h2>Hello <%= user.name %></h2> <% } else { %> <h2>Please log in</h2> <% } %> <ul> <% users.forEach(function(user){ %> <li><%= user.email %></li> <% }); %> </ul> ``` ##### 文件包含机制 当项目规模逐渐增大时为了避免冗余建议把公共部分提取成独立的小部件再组合起来形成完整的界面布局。 ```html <%- include('./partials/header') %> <main> <!-- Main content here --> </main> <%- include('./partials/footer') %> ``` 以上就是有关于 EJS 初步认识的一些介绍希望能够帮助理解其主要用途和优势所在!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值