技术经验分享: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});//关闭缓存


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

相关文章
|
开发框架 前端开发 JavaScript
Bootstrap怎么搭建?导进JS项目?怎么用?是什么?(前端开发框架)
Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集,它简洁灵活,使得web开发更加的便捷.Bootstrap 由 Mark Otto 和 Jacob Thornton 在上开发,并于年 8 月 在 GitHub 上作为开源产品发布。
|
JSON 前端开发 JavaScript
AVUE:前端搬砖神器,一套基于vue+elementUI的框架
AVUE:前端搬砖神器,一套基于vue+elementUI的框架
1663 0
AVUE:前端搬砖神器,一套基于vue+elementUI的框架
|
3月前
|
前端开发
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
148 1
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的大学生创新创业平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的大学生创新创业平台附带文章和源代码部署视频讲解等
21 0
|
5月前
|
缓存 前端开发 PHP
【PHP开发专栏】Smarty模板引擎详解
【4月更文挑战第30天】Smarty是PHP流行的模板引擎,分离逻辑与UI,加速开发。本文分三部分解析其使用和特性:1)介绍及安装配置;2)基本使用和语法,如数据分配、模板继承、循环与条件判断;3)高级功能,包括缓存机制、插件体系和调试工具。通过学习,开发者能提升Web应用构建效率和可维护性。
86 3
|
5月前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
108 0
|
11月前
|
前端开发 JavaScript Java
前端最常用的模板引擎-Handlebars
前端最常用的模板引擎-Handlebars
101 0
|
前端开发
前端知识学习案例9-tailWind Css+vite2.0-项目优化
前端知识学习案例9-tailWind Css+vite2.0-项目优化
75 0
前端知识学习案例9-tailWind Css+vite2.0-项目优化
|
监控 JavaScript 前端开发
技术分享 | 测试平台开发-前端开发之Vue.js 框架的使用
技术分享 | 测试平台开发-前端开发之Vue.js 框架的使用
|
XML JavaScript 前端开发
技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)
技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)