이 글은 주로 EJS 템플릿의 빠른 시작 학습을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴보겠습니다.
노드 선택할 수 있는 오픈소스 템플릿이 많지만, 저처럼 나이 많은 사람들은 EJS를 사용하는 것이 좋습니다. 🎜>ASP/PHP /JSP EJS 사용 경험은 실제로 매우 자연스럽습니다. 즉, JavaScript 코드를 <%...%> ; 가장 전통적인 방법인 <%=output 변수 %>를 사용합니다(또한 <%-output 변수는 &와 같은 기호를 이스케이프하지 않습니다). 설치 EJS 명령은 다음과 같습니다.
npm install ejs
JS 호출에는 두 가지 주요 방법이 있습니다.
ejs.compile(str, options); // => Function ejs.render(str, options); // => str
var ejs = require('')， str = require('fs').readFileSync(dirname + '/list.ejs', 'utf8');
var ret = ejs.render(str, {
names: ['foo', 'bar', 'baz']
});
console.log(ret);문자열
이고 템플릿은 다음과 같습니다.<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li foo='<%= name + "'" %>'><%= name %></li>
<% }) %>
</ul>
<% } %>
옵션 매개변수
두 번째 매개변수는 데이터이며 일반적으로
객체
var ejs = require('../')
, fs = require('fs')
, path = dirname + '/functions.ejs'
, str = fs.readFileSync(path, 'utf8');
var users = [];
users.push({ name: 'Tobi', age: 2, species: 'ferret' })
users.push({ name: 'Loki', age: 2, species: 'ferret' })
users.push({ name: 'Jane', age: 6, species: 'ferret' })
var ret = ejs.render(str, {
users: users,
filename: path
});
console.log(ret);게다가
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>템플릿:
<h1>Users</h1>
<% function user(user) { %>
<li><strong><%= user.name %></strong> is a <%= user.age %> year old <%= user.species %>.</li>
<% } %>
<ul>
<% users.map(user) %>
</ul><ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>Customized CLOSE TOKEN
{{= title }을 사용하려는 경우 }< ;/h1>은 일반적으로 <%%> 표시가 아니며 사용자 정의할 수도 있습니다.
var ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}';포맷된 출력
도 가능합니다. ejs.filters.last = function(obj) {
return obj[obj.length - 1];
};<p><%=: users | last %></p>
<html>
<head>
<script src="../ejs.js"></script>
<script id="users" type="text/template">
<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li><%= name %></li>
<% }) %>
</ul>
<% } %>
</script>
<script>
onload = function(){
var users = document.getElementById('users').innerHTML;
var names = ['loki', 'tobi', 'jane'];
var html = ejs.render(users, { names: names });
document.body.innerHTML = html;
}
</script>
</head>
<body>
</body>
</html>JSON
객체의 여러 레이어를 출력할 수 있는지 궁금합니다.그런데 일부 네티즌들은 jQ 마스터 John이 몇 년 전에 20줄짜리 템플릿을 작성했다는 소식을 전했는데, EJS와 비슷하지만 짧고 간결합니다!
간단하고 실용적인 js
50줄 미만의 js 템플릿 엔진, 다양한 js 구문 지원:
<script id="test_list" type="text/html">
<%=
for(var i = 0, l = p.list.length; i < l; i++){
var stu = p.list[i];
=%>
<tr>
<td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td>
<td><%==stu.age=%></td>
<td><%==(stu.address || '')=%></td>
<tr>
<%=
}
=%>
</script>echo <🎜와 유사한 직접 출력용 변수가 포함되어 있습니다. > 기능. "p"는 아래 빌드 메소드 호출 시 k-v 객체 매개변수입니다. "
new JTemp" 호출: $(function(){
var temp = new JTemp('test_list'),
html = temp.build(
{list:[
{name:'张三', age:13, address:'北京'},
{name:'李四', age:17, address:'天津'},
{name:'王五', age:13}
]});
$('table').html(html);
});
var JTemp = function(){
function Temp(htmlId, p){
p = p || {};//配置信息，大部分情况可以缺省
this.htmlId = htmlId;
this.fun;
this.oName = p.oName || 'p';
this.TEMP_S = p.tempS || '<%=';
this.TEMP_E = p.tempE || '=%>';
this.getFun();
}
Temp.prototype = {
getFun : function(){
var _ = this,
str = $('#' + _.htmlId).html();
if(!str) _.err('error: no temp!!');
var str_ = 'var ' + _.oName + '=this,f=\'\';',
s = str.indexOf(_.TEMP_S),
e = -1,
p,
sl = _.TEMP_S.length,
el = _.TEMP_E.length;
for(;s >= 0;){
e = str.indexOf(_.TEMP_E);
if(e < s) alert(':( ERROR!!');
str_ += 'f+=\'' + str.substring(0, s) + '\';';
p = _.trim(str.substring(s+sl, e));
if(p.indexOf('=') !== 0){//js语句
str_ += p;
}else{//普通语句
str_ += 'f+=' + p.substring(1) + ';';
}
str = str.substring(e + el);
s = str.indexOf(_.TEMP_S);
}
str_ += 'f+=\'' + str + '\';';
str_ = str_.replace(/\n/g, '');//处理换行
var fs = str_ + 'return f;';
this.fun = Function(fs);
},
build : function(p){
return this.fun.call(p);
},
err : function(s){
alert(s);
},
trim : function(s){
return s.trim?s.trim():s.replace(/(^\s*)|(\s*$)/g,"");
}
};
return Temp;
}();Array로 변경하는 것이 가장 좋습니다.
. 푸시() 형식입니다. 1.무료 js 온라인 동영상 튜토리얼
2.3.php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼
위 내용은 node.js에서 EJS 템플릿 사용에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
