在浏览器端載入模版引擎 （xtmpleate, juicer, handlerbar, etc.）
在浏览器端载入模版档案，方法可能有
使用 <script type="js/tpl"> ... </script> 印在页面上
使用模块载入工具，载入模版档案 （KISSY, requireJS, etc.）
其他
取得数据，使用模版引擎产生html
将html插入到指定位置。
從以上的流程可以觀察到，要想要做到模版的跨端共享，重点其实在 一致的模块选型 这件事。
市面上流行很多种模块标准，例如 KMD、AMD、CommonJS，只要能将NodeJS的模版档案透过一致模块规范输出到NodeJS端，就可以做基本的模版共享了。
而后续的系列文章会针对Model的proxy与共享，做进一步的探讨。
案例探讨
因为有了中途岛这中间层，针对过往的一些问题都有了更好的解答，例如说
案例一 复杂交互应用 （如购物车、下单页面）
状况：全部的HTML都是在前端渲染完成，服务端仅提供接口。
问题：进入页面时，会有短暂白屏。
解答：
首次进入页面，在NodeJS端进行 全页渲染 ，并在背景下载相关的模版。
后续交互操作，在浏览器端完成 局部刷新
用的是 同一份模版 ， 产生 一样的结果
案例二 单页面应用
状况：使用Client Side MVC框架，在浏览器换页。
问题：渲染与换页都在浏览器端完成，直接输入网址进入或f5刷新时，无法直接呈现同样的内容。
解答：
在浏览器端与NodeJS端共享 同样的Route 设定
浏览器端换页时，在浏览器端进行Route变更与 页面内容渲染
直接输入同样的网址时，在NodeJS端进行 页面框架 + 页面内容渲染
不管是浏览器端换页，或直接输入同样的网址，看到的内容都是 一样的 。
除了增加体验、减少逻辑複杂度外。更解决了 SEO 的问题
案例三 纯浏览型页面
状况：页面仅提供资讯，较少或没有交互
问题：html在服务端产生，css与js放在另外一个位置，彼此间有依赖。
解答：
透过NodeJS，统一管理html + css + js
日后若需要扩展成复杂应用或是单页面应用，也可以轻易转移。
案例四 跨终端页面
状况：同样的应用要在不同端点呈现不同的介面与交互
问题：html管理不易，常常会在服务端产生不一样的html，浏览器端又要做不一样的处理
解答：
跨终端的页面是渲染的问题，统一由前端来处理。
透过NodeJS层与后端服务化，可以针对这类型复杂应用，设计最佳的解决方案。
总结
过去的AJAX、Client-side MVC、SPA、Two-way Data Binding 等技术的出现，都是试图要解决当时的前端开发遇到的瓶颈。
而NodeJS中间层的出现，也是在试图解决现今前端被侷限在浏览器端的一个限制。
这边文章专注于前后端模版共享，也希望能抛砖引玉，与大家一起讨论如何在NodeJS中间层这个架构下，我们可以怎样的改善我们的工作流程，怎样的跟 后端配合，来把 前端 这个工作做得更好。
您可能感兴趣的文章: