思维和基于NodeJS前后分离的实践（二）模板的探索
前言当您进行前后分离时，首先要关注的是呈现，即视图级别的工作。
在传统的开发模式中，浏览器端和服务器端是由前端和后端两个团队共同开发的，但模板之间存在着模糊的区域，模板上不可避免地会出现越来越复杂的逻辑，最终难以维护。
我们选择了NodeJS作为一个前端和后端的中间层。尝试使用NodeJS，角度分析水平。
使前台和后台分工更加清晰，使项目更好的维护，实现更好的用户体验。
本文
在前端开发人员的日常工作中，这项工作占了很大的比重，而且也是最容易与后端开发纠缠在一起的地方。
回顾近几年来前端技术的发展，在视图层面的工作经历了许多变化，如：
表单刷新部分页面刷新
服务器继续着色+客户端渲染
传统的单页应用程序页面跳转>
可以观察到，在过去的几年中，每个人都倾向于把这个问题从服务器端传递到浏览器端。
服务器端侧重于服务和提供数据接口。
浏览器端渲染的好处
浏览器侧渲染的好处对我们来说是很清楚的，比如
1。摆脱在java模板引擎的业务逻辑和表现逻辑的耦合和混乱。
2。对于多终端应用程序，它更容易以多终端应用的形式进行交互，不同的应用程序在浏览器端呈现不同的模板。
3。页面渲染不仅是HTML，而且前端的渲染可以更容易地以基于组件的形式提供功能（HTML + CSS + CSS），因此前端组件不需要依赖服务器生成的HTML结构。
4。不依赖后端开发和发布过程。
5。调整方便。
浏览器端绘制的缺点
但在享受这些好处的同时，我们也面临浏览器端渲染的缺点，例如：
1。模板是不同的库分离。一些模板都放在服务器端（java），有些是放在浏览器端（JS），前、后模板语言不相通。
2。需要等待在浏览器结束时呈现的所有模板和组件。
三.第一次，将有一个白色屏幕等待时间来渲染，这不利于用户体验。
4。在开发一个单页应用程序时，前端路由与服务器端路由不匹配，处理起来麻烦。
5。重要内容在前端组装，不利于SEO。
对前、后定义的再思考
事实上，回想起我们，当我们提取的渲染工作从服务器端（java）到浏览器端（JS），我们的目的是明确职责分工的前端和后端，而不是非浏览器的渲染。
只因为在传统的开发模式下，服务器端进入浏览器，前端的工作内容只能限制在浏览器端。
很多人已经识别了后端=服务器前端=浏览器端，如下所示。
在淘宝UED中途在中途岛的项目，通过在浏览器中建立一个java NodeJS中间层，试图保持分割线的前端，再次为责任区分开来，而不是硬件环境区分（浏览器服务器）。
因此，我们有机会分享模板和路线，这也是最理想的状态，在前面和后面的分工。
淘宝中途岛中途
该项目在中途岛，我们把线前后边界结束，从浏览器回到服务器。
用Nodejs层是由前端容易控制，浏览器共享，前后分离可以做得更清楚。
它还允许前端开发来确定不同情况下最合适的解决方案。
职责分工
中途岛不想把自己的工作赶回到项目前面，只对模糊区模板进行明确的划分，做了更明确的职责划分。
后端（java），专注于
1。服务层
2。数据格式和数据稳定
三.业务逻辑
前端，集中于
1.ui层
2。控制逻辑、呈现逻辑
三.交互，用户体验
它不再受制于服务器端或浏览器端的差异。
模板分享
在传统的开发模式中，浏览器端和服务器端是由前端和后端两个团队共同开发的，但模板之间存在着模糊的区域，模板上不可避免地会出现越来越复杂的逻辑，最终难以维护。
随着Nodejs，后端的学生可以专注于业务逻辑和数据开发的java层。前端的学生都集中在控制逻辑的发展和渲染。选择模板自己向他们提供在服务器端（NodeJS）或在浏览器端。
用相同的模板语言XTemplate，相同的渲染引擎的Javaｓｃｒｉｐｔ
在不同的渲染环境（服务器端、PC浏览器、移动浏览器、Web视图等）中呈现相同的结果。
路由共享
也因为的Nodejs层，你可以控制路由更仔细。
如果你需要在浏览器前面做路由，也可以配置服务器路由，页面在浏览器或服务器页面上，可以得到一致的渲染。
同时，对SEO的问题也进行了探讨。
模板共享实践
通常，当我们在浏览器端呈现一个模板时，过程只不过是它。
在浏览器端加载模板引擎（xtmpleate，榨汁机，handlerbar，等）
模板文件加载在浏览器端，方法可能是
使用页面上的打印
使用模块加载工具加载模板文件（亲吻，requirejs，等）
其他
获取数据，使用模板引擎生成HTML
将HTML插入指定位置。
从上面的过程中，您可以看到，为了实现模板的交叉端共享，焦点是一致的模块选择。
市场上有许多种模块标准，如KMD、AMD和CommonJS。只要Nodejs模板文件可以出口到NodeJS端通过一致的模块规范，基础模板共享可以做。
以下系列文章将进一步讨论模型的代理和共享。
案例研究
由于中间层的中途岛，针对过去的一些问题有更好的答案，例如
复杂交互应用程序的例子（例如购物车、单页）
状态：所有HTML都在前端渲染中完成，服务器只提供接口。
问题：进入页面时会有一个很短的白色屏幕。
答案uff1a
对于网页中的第一次，整版的渲染在Nodejs侧行，以及相关的模板在后台下载。
后续交互操作，在浏览器端完成本地刷新
相同的模板用于产生相同的结果。
案例二单页应用程序
状态：在浏览器页面框架中使用客户端MVC。
问题：渲染和翻转在浏览器结束时完成，直接输入URL或F5刷新，无法直接显示相同内容。
答案uff1a
共享同一航线的设置与Nodejs边在浏览器端
浏览器页面、路由页面内容更改和浏览器呈现
当相同的网址直接进入，页面框架+网页内容呈现在Nodejs侧行
无论是浏览器页面，还是直接输入同一URL，看内容都是一样的。
除了增加经验和降低逻辑的复杂性，更能解决SEO的问题。
案例三纯浏览页面
状态：页面只提供信息，很少或没有交互。
问题：HTML是在服务器端生成的，CSS和js被放置在另一个位置，它们相互依赖。
答案uff1a
通过对NodeJS，html+css+js统一管理
如果以后需要扩展成复杂的应用程序或单页应用程序，也可以轻松地传输。
案例四跨终端页面
状态：相同的应用程序在不同端点呈现不同的接口和交互。
问题：html管理不容易，服务器端常常产生不同的HTML，浏览器端做不同的处理。
答案uff1a
交叉终端页面是渲染的问题，Unity是由前端处理的。
通过对Nodejs层服务和后端，最佳的解决方案可以设计这类复杂的应用。
总结
以往Ajax、客户端MVC、SPA、双向数据绑定等技术都在试图解决前端开发的瓶颈。
NodeJS中间层的出现也在试图解决一个限制，前端是有限的浏览器端。
本文重点对前端模板分享，也希望和大家一起讨论如何NodeJS中间层的这个框架，我们可以改善我们的工作流程如何，如何与后端的合作，工作的前端更好。