技术经验分享:EJS模板引擎

简介: 技术经验分享:EJS模板引擎

前面的话


  nodejs的模板引擎有很多, EJS是比较简单和容易上手的。本文将详细介绍EJS


概述


  EJS是一个简单高效的模板语言,通过数据和模板,可以生成HTML标记文本。可以说EJS是一个JavaScript库,EJS可以同时运行在客户端和服务器端,客户端安装直接引入文件即可,服务器端用npm包安装


【安装】


  ejs可以配合express框架使用,或直接在node中/浏览器中使用


$ npm install ejs


【特点】


  1、快速编译和渲染


  2、简单的模板标签


  3、自定义标记分隔符


  4、支持文本包含


  5、支持浏览器端和服务器端


  6、模板静态缓存


  7、支持express视图系统


用法


Document


var html = ejs.render('','');


document.getElementById('div1').innerHTML = html;


方法


【ejs.compile(str,【option】)】


  编译字符串得到模板函数,参数如下


str:需要解析的字符串模板


option:配置选项


var template = ejs.compile('');


var result = template();


console.log(result);//123


【ejs.render(str,data,【option】)】


  直接渲染字符串并生成html,参数如下


str:需要解析的字符串模板


data:数据


option:配置选项


var result = ejs.render('');


console.log(result);//123


  两个函数包括的配置选项参数options如下:


cache 缓存编译后的函数(ejs.compile(..) ,需要 filename参数作为缓存的key


filename 用于缓存的key,和include


context 函数的执行上下文


compileDebug 输出compile的信息来跟踪调试


client 返回编译后的函数


delimiter 指这里的%


debug 输出ejs.compile()得到函数的函数体


strict ejs.compile()返回的函数是否执行在严格模式


_with 是否使用 with(){..} 来访问本地变量


localsName 保存本地变量的对象名,默认为locals


rmWhitespace 移除多余空格


常用标签


【js】


  所有使用 括起来的内容都会被编译成 Javascript,可以在模版文件中像写js一样Coding


//test.ejs


<% var a = 123 %>


//test.js


var ejs = require('ejs');


var fs = require('fs');


var data = fs.readFileSync('test.ejs');


var result = ejs.render(data.toString());


console.log(result);//123


  或者,像下面这样写


var ejs = require('ejs');


var result = ejs.render('');


console.log(result);//123


【变量】


  用输出变量,变量若包含 '' '&'等字符会被转义


var ejs = require('ejs');


var result = ejs.render('',{a:'123'});


console.log(result);//123


  如果不希望变量值的内容被转义,那就这么用输出变量


var ejs = require('ejs');


var result = //代码效果参考:http://www.lyjsj.net.cn/wx/art_23006.html

ejs.render('',{a:'123'});

console.log(result);//123


【注释】


  用来注释,不执行不输出


【include】


  include 可以引用绝对路径或相对路径的模板文件


//test.ejs


<% var a = 123 %>


//test.js


var ejs = require('ejs');var result = ejs.render('');


//throw new Error('include use relative path requires the \'filename\' option.');


console.log(result);


  由上面的提示可知,使用相对路径时,必须设置'filename'选项


//test.ejs


<% var a = 123 %>


//test.js


var ejs = require('ejs');var result = ejs.render('',{filename:'test.ejs'});


console.log(result);//123


缓存


  EJS默认是开启模版缓存。这样在一个页面中多次请求模版文件时,只会请求一次


  可以通过代码设置是否开启缓存:EJS.config({cache: false});//关闭缓存


好的代码像粥一样,都是用时间熬出来的

相关文章
|
9天前
|
前端开发
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
20 1
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的大学生创业网站附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的大学生创业网站附带文章和源代码部署视频讲解等
15 1
|
2月前
|
前端开发 JavaScript Windows
前端利器SASS之入门篇,前端开发你需要了解的那些事
前端利器SASS之入门篇,前端开发你需要了解的那些事
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的大学生创新创业平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的大学生创新创业平台附带文章和源代码部署视频讲解等
15 0
|
2月前
|
缓存 前端开发 PHP
【PHP开发专栏】Smarty模板引擎详解
【4月更文挑战第30天】Smarty是PHP流行的模板引擎,分离逻辑与UI,加速开发。本文分三部分解析其使用和特性:1)介绍及安装配置;2)基本使用和语法,如数据分配、模板继承、循环与条件判断;3)高级功能,包括缓存机制、插件体系和调试工具。通过学习,开发者能提升Web应用构建效率和可维护性。
|
2月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
8月前
|
前端开发 JavaScript Java
前端最常用的模板引擎-Handlebars
前端最常用的模板引擎-Handlebars
76 0
|
前端开发
前端知识学习案例10-tailWind Css+vite2.0-部署项目
前端知识学习案例10-tailWind Css+vite2.0-部署项目
100 0
前端知识学习案例10-tailWind Css+vite2.0-部署项目
|
前端开发 JavaScript IDE
|
监控 JavaScript 前端开发
技术分享 | 测试平台开发-前端开发之Vue.js 框架的使用
技术分享 | 测试平台开发-前端开发之Vue.js 框架的使用