从NodeJS构建中间层谈前后端分离

Nodejs之前在于闯的项目中是作为中间层使用的，但是我当时并不太明白它背后的真正原因；后来在和一位学长谈话的过程中，我也了解到蚂蚁金服也在用类似的方法，用nodejs作为中间层来请求真实的后台数据；后来人们到了北京，也看到现在的公司在向nodejs的后端靠拢。随着知识的增加，再加上我自己接触到的信息，我慢慢总结出了一些原则。

从做微信小程序引发的思考

最近出于爱好写了一个音乐播放器的微信小程序(本来打算用vue写的，后来因为公司业务原因，可能明年会做一个微信小程序，所以换了前端技术栈)。源代码在我的GitHub上：wx-audio。

思考：由于性能等原因，后端提供的接口返回的数据格式可能不适合前端直接使用。前端所需的排序功能和过滤功能，以及视图层的页面显示，都可能需要对界面提供的数据进行二次处理。虽然这些过程可以在前端执行，但可能大量数据会浪费浏览器性能。如今，添加节点是一个很好的解决方案。

在我的微信小程序演示的服务器端代码中，我通过http模块向真实后台(网易云音乐API)发出http请求，然后通过快递模块搭建后端服务。

启动：

//http.jsvar formatURL=require('。/format URl . js ')；var http=require(' http ')；const POSttp=function(request){ return new Promise((解析，拒绝)={ let body=http模块获取数据http . get(format(request . body . music name)，function(RES){ RES . on(' data ')={ body=data；}).on('end '，()={//Format const {name，audio: music URL，page，专辑： { name : musical name，picurl，}，艺术家3360 [{name 3360 singer，}]，}=json.parse. const reply={ name，picUrl，music URL，page，singer，}；解决(回复)；});});});};module.exports=POSThttp将数据传回前端：

ar express=require(' express ')；var POSThttp=require('。/POSttp . js ')；var body parser=require(' body-parser ')；//使用主体解析器来解析发布请求的参数。如果没有，req.body未定义。var app=express()；app . use(BodyParser . JSON())；app . use(BodyParser . URL encoded({ extended : true })；app.post('/'，(req，RES)={ PostTP(req)。然后((数据)={ res.send(数据)；}).catch((err)={ RES . send(err)；});});app.listen(3000，()={ console.log('打开wx-audio服务器成功！')});这几十行代码也在中间层实现了简单的演示，实现了中间层格式化参数供前端使用的过程。

为什么需要中间层？

其实这个问题，我觉得和面试问题有关系：“为什么我需要把前端和后端分开？”是相似的，原因可以总结如下：

在

现今网站存在问题

之前，我和一个在百度有多年工作经验的老前辈聊过。我提到了搜狐的代码冗余和前端耦合的问题。他回答并给了我这样的建议：

图1)" alt="从NodeJS搭建中间层再谈前后端分离(图1)" data-bd-imgshare-binded="1" src="http://www.yiyongtong.com/uploads/allimg/180207/102S11206-0.jpg" />

其实，提炼出来，现今大公司的老项目（包括百度、搜狐等公司所采用的后端渲染等），或多或少都会存在这样的一些问题：

• 前端代码越来越复杂
• 前后端依旧高度耦合
• 无法良好的支持跨终端

前辈们提出的解决方案

参考淘宝前后端分离解决方案

• 前端代码越来越复杂，我们希望尽可能地减少工作量，开始使用类似MV*的分层结构，使前端后分离成为必要。
• 前端需要处理更多的工作，希望有权操控View，Router（如：SPA的尝试）
• 各种终端设备的兴起，需要我们把页面适配到更多的地方。

开始：我们所尝试的CLIENT-SIDE MV* 框架，后端暴露数据接口、处理业务逻辑，前端接收数据、处理渲染逻辑。

关于MVC的定义：MVC是一种设计模式，它将应用划分为3个部分：数据（模型）、展现层（视图）和用户交互（控制器）。换句话说，一个事件的发生是这样的过程：　　1. 用户和应用产生交互。　　2. 控制器的事件处理器被触发。　　3. 控制器从模型中请求数据，并将其交给视图。　　4. 视图将数据呈现给用户。我们不用类库或框架就可以实现这种MVC架构模式。关键是要将MVC的每部分按照职责进行划分，将代码清晰地分割为若干部分，并保持良好的解耦。这样可以对每个部分进行独立开发、测试和维护。

如：Backbone, EmberJS, KnockoutJS, AngularJS等框架。

但这样的方式仍旧存在问题：

各层职责重叠

• Client-side Model 是 Server-side Model 的加工
• Client-side View 跟 Server-side是 不同层次的东西
• Client-side的Controller 跟 Sever-side的Controller 各搞各的
• Client-side的Route 但是 Server-side 可能没有

性能问题

• 渲染，取值都在客户端进行，有性能的问题
• 需要等待资源到齐才能进行，会有短暂白屏与闪动
• 在移动设备低速网路的体验奇差无比

重用问题

• 模版无法重用，造成维护上的麻烦与不一致
• 逻辑无法重用，前端的校验后端仍须在做一次
• 路由无法重用，前端的路由在后端未必存在

跨终端问题

• 业务太靠前，导致不同端重复实现
• 逻辑太靠前，造成维护上的不易

渲染都在客户端，模版无法重用，SEO实现 麻烦

NodeJS作为中间层的全栈开发方案

有了NodeJS之后，前端可以更加专注于视图层，而让更多的数据逻辑放在Node层处理。

我们使用Node层：

• 转发数据，串接服务
• 路由设计，控制逻辑
• 渲染页面，体验优化
• 中间层带来的性能问题，在异步ajax转成同步渲染过程中得到平衡
• 更多的可能

其实更为重要的是，对于前端来说，NodeJS的学习成本是相当低的：我们无需学习一门新的语言，就能做到以前开发帮我们做的事情，一切都显得那么自然。

技术在不断变化中，唯有跟上技术革新的浪潮，才能不被时代所淘汰，不管是人还是企业。