《Mastering JavaScript Single Page Application Development》 ？模板处理是“制作”文档的结构定义（字符串），怎么将它渲染到DOM上呢 ！！document.body.innerHTML = html; ！模板处理的「其它场景」可能只需要 文档结构定义，JS 的V组件制作，还得将这些模板结果进行 渲染 ！模板处理，不是「JS 的V组件制作任务」的必选（也可以手动），因为任务规模而增加的专业
"变量" 分隔符
模板数据都是通用，抽象过，在转换成结果前，一般需对变量赋值
EJS is a JavaScript templating engine that works much like Underscore.js and also uses ERB <% %> style delimiters. Alternatively, it also allows the use of [% %] style tags for delimiters. EJS 是一个 工作方式与下划线.js 类似的JavaScript 模板引擎，使用 ERB <%% >样式分隔符。此外 EJS 还允许对分隔符使用 [% %] 样式标记。
编程逻辑
除静态变量，复杂UI可能需要“编程”来渲染 Just like Underscore.js, EJS allows arbitrary JavaScript to be parsed when used with the standard <% %> ERB style syntax, and allows the evaluation of expressions using an equals sign = following the opening delimiter tag <%= %> 就像Underscore.js一样，EJS允许与标准<％％> ERB样式语法一起使用时 解析任意JavaScript，并允许在分隔符<％=％>之后使用等号=来对表达式求值： // templates/people.ejs
-
<% for (var i = 0; i < people.length; i++) { %>
- <%= firstName %> <%= lastName %> <% } %>
同步外部载入模板（.ejs）
Synchronous template loading In a typical EJS use case, each template is stored in a file with the proprietary .ejs extension.
1 外部模板
//templates/people.ejs 看上面
2 某View组件模块
A template is compiled from JavaScript code by creating a new EJS object, supplying the path to the template file, and calling the render method with the data you want to be interpolated.
var data = { "people": [ { "firstName": "Peebo", "lastName": "Sanderson" }, { "firstName": "Udis", "lastName": "Petroyka" }, { "firstName": "Jarmond", "lastName": "Dittlemore" }, { "firstName": "Chappy", "lastName": "Scrumdinger" } ] }; var html = new EJS({url: 'templates/people.ejs'}).render(data);
3 渲染的结果
- Peebo Sanderson
- Udis Petroyka
- Jarmond Dittlemore
- Chappy Scrumdinger
4 挂接上DOM树（真正的渲染）
Once you have the rendered HTML created in your JavaScript code, you simply insert it into the DOM in your application: var html = new EJS({url: 'templates/people.ejs'}).render(data); document.body.innerHTML = html;
5 外部文件加载是同步的，可能会阻塞，程序响应可能变慢
Note that since the path to the file is referenced in the JavaScript, a synchronous call must be made to initially load the template for parsing. This keeps the initial page load for your application low, but can lead to longer response times when interacting with your app, depending upon both the complexity of the template being loaded and the speed of the server upon which your app is running.
Asynchronous data loading One unique feature of EJS is the ability to render a template using asynchronous data loaded from an external source. Using the previous example, imagine the JSON data is in an external file named people.json : new EJS({url: 'templates/people.ejs'}).update('element_id', 'people.json'); In this example, the .update() method is called instead of .render() .
Caching EJS caches templates by default after the first time they are loaded synchronously. This provides an advantage in that templates used multiple times will always load more quickly after the first request, and unused templates will not take up any memory.
View helpers EJS includes some view helpers that are similar to the concept of helpers in Handlebars templates. They allow the use of shorter syntax for some common HTML elements. We will illustrate a few examples here.
