引入模板引擎

從這篇文章開始, 我們每篇開始前,先需要下載上次完成的版本。

開始前

如果沒有下載之前的代碼,可以使用 $npm install http-f2e-server@0.0.4 先安裝上一篇完成的版本。

服務(wù)端腳本嵌入

上篇完成了模板引用和包含功能,其中include在ASP,JSP,PHP這樣的腳本中都有類似功能, 事實上各種服務(wù)端腳本最基本的功能是一個嵌入式服務(wù)端代碼的模式, 例如php的 <?php?>,以及ASP和JSP使用的 <% %>

underscore.js模板

  • underscore http://underscorejs.org
  • 因為 underscore.template 相對簡單純粹,我選用它作為f2e-server的默認模板引擎, 后面一些內(nèi)置頁面都將使用這個模板開發(fā), 如果感興趣您可以嘗試其他模板引擎如: jade
  • API:
var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"

安裝underscore

直接在根目錄使用 $npm install underscore 就能安裝underscore

植入功能

修改handle.js 模塊中的execute方法, 返回str前進行template包裝

var compiled = _.template(str);
return compiled({require: require});
  • 測試源代碼
<ul id="each-list">
<%for(var i=0; i < 6; i++){
    print( '<li>模板循環(huán)項'+(i+1)+'</li>\n' );
}%>
</ul>
  • 輸出結(jié)果代碼
<ul id="each-list">
<li>模板循環(huán)項1</li>
<li>模板循環(huán)項2</li>
<li>模板循環(huán)項3</li>
<li>模板循環(huán)項4</li>
<li>模板循環(huán)項5</li>
<li>模板循環(huán)項6</li>
</ul>

PS:

本次開發(fā)代碼沒有發(fā)布倉庫版本,相關(guān)代碼跟隨下一篇共同發(fā)布到0.0.6版本。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容