node.js에서 EJS 템플릿 사용에 대한 튜토리얼
- 零下一度원래의
- 2017-05-09 10:08:521104검색
이 글은 주로 EJS 템플릿의 빠른 시작 학습을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴보겠습니다.
노드 선택할 수 있는 오픈소스 템플릿이 많지만, 저처럼 나이 많은 사람들은 EJS를 사용하는 것이 좋습니다. 🎜>ASP/PHP /JSP EJS 사용 경험은 실제로 매우 자연스럽습니다. 즉, JavaScript 코드를 948f7f58f6d950e45a0bc618ec463d5d를 사용합니다(또한 b4018ed40f122a0770cf760ff8a0775d{{= title }을 사용하려는 경우 }< ;/h1>은 일반적으로 a4558806285d5b7820bdaa0b90aa4d26 표시가 아니며 사용자 정의할 수도 있습니다. var ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}';
포맷된 출력
도 가능합니다. ejs.filters.last = function(obj) {
return obj[obj.length - 1];
};Call<p><%=: users | last %></p>EJS는 브라우저 환경도 지원합니다.
<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>EJS가 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>"35958f859c8521065da73f73d0e69aae"에는 js 논리 코드가 포함되어 있으며, "8b95f35e5e88078811040fade31b8cf7"에는 PHP의 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);
}); 위의 temp가 생성된 후 build 메소드를 여러 번 호출하여 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;
}();핵심은 템플릿 코드를 문자열을 이어주는 함수로 변환하고, 데이터를 얻을 때마다 이 함수를 호출하는 것입니다. 주로 휴대폰(웹킷)에 사용되기 때문에 스트링 스플라이싱의 효율성은 고려하지 않습니다. IE에서 사용해야 한다면 스트링 스플라이싱 방식을 Array로 변경하는 것이 가장 좋습니다.
. 푸시() 형식입니다. 1.무료 js 온라인 동영상 튜토리얼
2.3.php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼
위 내용은 node.js에서 EJS 템플릿 사용에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!