underscore.js簡單有效的模板引擎

如今Javascript的模板引擎有很多,多到難以選擇,以至於有個頁面幫助你選擇模板引擎。它們的設計目標和特性也迥異,有基於字符串替換,也有基於Dom文檔樹操作。有的設計於瀏覽器端,也有的用於後端Node.js,當然還有前後端都支持如dust.js。如果你要開發單頁面應用程序SPA,流行的框架如AngularJS和EmberJS都包含了雙向數據綁定(two way data binding),因而不需要模板引擎了。

我近期開發熱聞網時,也面臨模板引擎的選擇問題。我個人很喜歡Angularjs這種雙向數據綁定,但是由於這個項目不是單頁面應用程序,用AngularJS不適合。此外Handlebars.js也很火,可是它的變量標記是{{.}},這與我後端的Jinja2模板標記衝突,不予考慮。最後我決定使用小而精的Underscore.js庫。Underscore.js因它提供的大量函數式編程特性而聞名。我這裏僅討論使用它裏面的template函數做模板引擎。然而,官方文檔中提到的例子太過簡單。

var compiled = _.template("hello: <%= name %>");

如上,模板只是一個JS字符串,不適合複雜的模板。幸好我之前看過另一種用法,更加優雅。將模板的內容嵌入一個script標籤中,如下所示。

<script type="text/template" id="comment">

<%- comment.user %> post <%- comment.text %>.
</script>

然後在正常的腳本中獲取這段模板內容,並生成渲染函數。

<script>

var render = _.template($('script#comment').html(), {variable: 'comment'});

var data = { user: 'ab', text: 'hello' };
var result = render(data);

上面片段中result便是參數渲染後的結果了。是不是簡單有效呢?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 提問的智慧 How To Ask Questions The Smart Way Copyright © 2001...
    Albert陈凯阅读 7,495评论 0 8
  • 程序員創業白皮書 作者:Paul Graham Paul Graham是程序員,專欄作家。他在1995年創建了第一...
    刘立山John阅读 6,081评论 0 20
  • 为何叫做 shell ? shell prompt(PS1) 与 Carriage Return(CR) 的关系?...
    Zero___阅读 8,409评论 3 49
  • 不想太理智, 不想太现实。 活在梦想里, 活在自家里。 放纵与放任, 多么的惬意, 多么的洒脱。 就暂时这样, 让...
    康真阅读 1,171评论 0 1
  • 想起那脱缰的岁月,就情不自禁;想起那可爱可亲的人儿,就热泪盈眶;那时光、那些人,即算吵闹过、误解过,甚至陌路了,...
    644bd5a9d345阅读 3,153评论 0 2

友情链接更多精彩内容