基于Node.js实现前端分离

基本介绍

从一个重要的概念“模板”开始。广义来说，网页中的模板是可以填充数据以生成文件的页面。严格来说，是模板引擎通过使用特定格式的文件和提供的数据来编译和生成页面。模板大致分为前端模板(如ejs)和后端模板(如freemarker)，分别在浏览器端和服务器端进行编译。

由于现场有些同学对node.js了解不多，我在这里补充一些关于node.js的知识。官网给了他事件驱动、异步等定义。在这里，我借用朴灵书中的一个图片来解释node.js的结构，懂java的同学可以理解为js jvm。一般来说，浏览器包括渲染器和js脚本引擎。以chrome浏览器为例，我们使用的是webkit内核渲染器和v8脚本引擎，而node.js使用的是V8引擎。总之是一个js运行环境，就像浏览器的F12调试工具一样，只是node.js没有DOM和BOM。

这个图描述了一些围绕node.js的信息，比如npm，一个优秀的包管理器，cnode社区，github，一定程度上促进了node.js的繁荣，提供了技术支持。

大公司通常是技术的风向标，例如谷歌的angular和facebook的react现在非常流行。这里只列举了三家大公司作为例子。不用说，淘宝的中途岛架构，中国node.js的开创者朴灵，就来自淘宝。还有一个技术框架，应该叫“QTX”。由360月球阴影领导的75团队基于ES6/ES7制作了一个web服务器框架——thinkjs。当时我们的技术总监非常看好。但是由于没有时间学习ES6，也没有插件，所以选择了比较成熟的Express。

在离家更近的地方，这张表列出了我接触过的三种开发方法。首先是java等后端语言模板的最常用，它对SEO友好，缓存利用率好，减轻了浏览器的渲染负担。最大的问题是模板文件耦合度太高，没人想解决问题。前端人员看不到数据，后端人员看不懂页面。模板文件就像一个烫手山芋。二是我们目前项目的移动终端的实现方案，采用angular的框架(angular的指令可以看作前端模板)和nginx的反向代理服务器，使前端和后端完全解耦，只通过ajax交换数据。这个方案的优缺点与前一个正好相反。前端模板的性能一直是个问题，尤其是移动端，尤其是低端移动设备。最后，新项目使用node.js作为前端服务器，将前端职责从浏览器划分到模板，解决了以上所有问题，但也有新的问题，后面会分析。

当然，全栈开发也非常适合小项目。对于传统的jsp/php开发来说，全栈开发的通信成本更低，开发者更容易理解整个功能模块，从而更好地还原产品设计。尤其是基于js语言：meteor和MEAN技术的全栈开发，使得前端开发直接用一种语言完成。有了Mongodb，数据可以直接使用，不用从浏览器逃到数据库，不用写sql，开发成本大大降低。

这次在构建node.js服务器中使用了一些插件。不用说，著名的express是一个轻量级的web服务器框架。使用车把模板引擎也是巧合，因为express4是默认的，车把不愧为“弱逻辑”的模板引擎，主张减少模板逻辑，尽量只使用变量和分页。基于它的设计理念，我只扩展了两个助手。文章：https://yalishizhude.github.io/2016/01/22/handlebars/superagent因高速公路仍在使用4。因为它的测试代码使用基于superagent的supertest，所以它使用Superagent来转发和发起请求。Superagent仍然太弱，无法建立长连接，所以我们推荐请求插件。restfuleAPI没有什么好介绍的。前端服务器和浏览器、前端服务器和后端服务器都使用这套规范，基本上就是说URL指向资源，进行添加、删除、修改和检查，并表达具体的请求方式，状态码表示结果等。~大口打包工具，webpack研究了很久，发现每增加一页都需要修改配置文件，太痛苦了，所以放弃了。

显色法

如果这个分享主要是关于如何利用node.js作为前端服务器实现前端和后端的分离，那么就没什么好谈的了。看看淘宝UED的文章就知道了。其实前端分离最大的问题就是通信成本的增加，具体就是接口的定义和调试。在上面显示的传统开发过程中，将接口的定义放在接口服务器中，然后前端和后端根据接口文档的假数据进行本地调试，然后进行联合调试。这个环节就是前端和后端开始撕裂的时间。这个参数是错误的，那个返回值也是错误的。总之就是浪费时间。接下来看看这个问题在我们的项目中是如何解决的~

因为接口撕裂的问题一直存在，作为一个保守的人，我相信迭代开发，所以第一步是添加一个模拟服务器。这个服务器的神奇之处在于它根据接口文档自动生成虚假数据，实现接口，即API。前端学生不用为了测试而把数据写死。我没办法。我是前端开发者，首先想到的是自己的人。呵呵~当然这只是在一定程度上有利于前端开发，当后端接口和文档不一致、不协调的时候就会出现问题。怎么办？

偶尔在《破浪》的博客上看到马劳的一篇文章，其中一个重要的概念就是合同测试也叫双边测试。核心概念是解决远程联合调试的问题。检查前端和后端的参数，要求大家按照接口文档开发。受其启发，添加了json-schema规则来验证http请求的参数，任何不遵守规则的人都会更改它们。

这个redmine是我们最早的界面文档管理器，除了记录和查看没有其他功能。

swag号称世界上最受欢迎的接口文档服务器，界面美观，插件众多，可以直接生成后端语言的测试代码。但是我在部署的时候一直不理解，yaml格式也不如json，所以放弃了。

这是我们现在项目使用的文档服务器和模拟服务器，基于MEAN技术的服务器有基本功能：

使用mockjs插件，可以动态生成随机数据。基于json-schema，可以对接口参数进行检查和接口测试，节省测试状态和接口响应时间。简单json编辑器有登录验证功能，登录后可以调试界面。模拟服务器根据api服务器响应请求，并在接口更新时自动更新。

一些问题

Node.js是前端工程师的翅膀，但插上翅膀是天使还是魔鬼？这取决于它能否解决使用它带来的问题。

首先，前端工作量无疑会增加，但通信成本会降低。node.js单线程的服务器稳定性不够好，但是代码的健壮性和完善的日志可以有效避免。回调。这个问题的解决方案太多了，比如node.js的q/async模块，ES6/ES7。调试node.js虽然我一直排斥IDE，但不得不承认webstorm确实很方便调试。我用的节点检查器也还可以，界面和chrome开发者工具差不多，看着眼熟。

对于后端程序员来说，更重要的是集群node.js接口集成的工作交给前端服务器处理，同时与前端的耦合度大大降低，降低了工作量和工作效率。

经验有两点。

虽然node.js的使用有一定的学习成本，但对前端开发人员还是非常友好的。而且如果前端使用node.js，无论是技术含量还是工作量都会有所提升，从而增强了岗位的重要性。只有现在的开发者能创造更多的价值，才有资格要求更高的薪水~在工作中，建议少提建议，多提可行的方案，同时进行技术预研，而不是写一个简单的helloworld。

摘要

可能有人会说，你介绍的这一套东西太复杂了，用起来太麻烦了，不如面对面交流。我只能用腾讯高级UI工程师郭玉在《web全栈工程师的自我修养》中提到的一个例子。有一次，他打电话给一家小公司的前端负责人，问他怎么管理代码，对方说直接用ftp上传，抱怨他的工作人员总是更新错误的代码，问他为什么不用svn或者git。他说不如手动更新方便。这个故事的真相就是我对问题的回答~

ppt的下载地址