※ 引述《mrbigmouth (大嘴先生)》之銘言:
: 但html是一個很好的"資料表達"語言,而不是一個好的"程式"語言
這句話說的好,不過 XML 本來就是種資料表示法吧?
我覺得 Angular 的 Directive 從根本上來說就不是 Template engine。
Server 端的許多 Template engine,核心都是 Text processing + Binding。
而 Angular 只有 Binding,沒有 Text processing。
Directive 的功用為擴充 HTML,為其增加新的行為。
: <header ng-repeat-start="item in items">
: Header {{ item }}
: </header>
: <div class="body">
: Body {{ item }}
: </div>
: <footer ng-repeat-end>
: Footer {{ item }}
: </footer>
這個是在 Angular 中違和感最重的一個 directive 了。跟其它的
directive 格格不入,我也覺得很微妙。
一般 ng-repeat 的行為︰重覆自身,並把資料丟進 child scope 內。
<section ng-repeat="item in items">
...
</section>
這樣寫不是很好嗎
: <%
: for (item in items) {
: %>
: <header>
: Header <%- item %>
: </header>
: <div class="body">
: Body <%- item %>
: </div>
: <footer>
: Footer <%- item %>
: </footer>
: <%
: }
: %>
這個就回歸一般的 text processing。事實上用它來 render 非 HTML 的東西
也沒什麼不可。
: <div ng-show="someBooleanVariable"></div>
ng-show 的行為︰當資料為 no、false 時,隱藏自己
: <%
: if (someBooleanVariable) {
: %>
: <div></div>
: <%
: }
: %>
這也回歸一般的 text preprocessing。
Directive 和這些 template engine 的不同,就在於 directive 是用來改變
已經 render 出來,HTML element 的行為。而 template engine 是根據定好
的流程,把 HTML render 出來。
以我來說,Directive 的做法是比較適合前端的,而一般的 template engine
適合後端。
要是想做 text processing,也可以把 template engine 寫成 directive
<div template-engine template-engine-data="myTemplate">
<% if (var) { %>
<span>Hi</span>
<% } %>
</div>
template-engine 行為︰將自身內容和 templateEngineData 丟給
text processor,再將結果替換為自身內容。還可以 watch
templateEngineData,當資料改變時 re-render……等等。
說不定已經有人實作過了。