基于NodeJS的前端分离的思考与实践(3)轻量级接口配置建模框架

序

使用Node作为前端分离开发模式，在性能和开发过程上带来了一定的优势，但也面临诸多挑战。在淘宝复杂的业务和技术架构下，后端必须依靠Java来构建其基础设施，并为前端提供相关的业务接口。Node在整个环境中最重要的任务之一就是表示这些业务接口，以便于前端(Node和浏览器)集成数据进行页面渲染。如何做好代理工作，让前端开发分离后，流程仍然可以无缝衔接，这是我们需要考虑的问题。本文将讨论这一问题并提出解决方案。

因为后端提供的接口可能有多种方式，所以开发人员在Node端编写代码时也可能有多种方式来访问这些接口。如果我们不在接口访问模式和使用上做统一的架构处理，就会带来以下问题：

1.每个开发人员用自己的代码风格编写接口访问代码，导致项目目录和编码风格混乱，维护相对困难。2.每个开发人员都编写自己的模拟数据模式。开发完成后，他需要手动修改代码来移除mock。3.每个开发人员可能会维护一些配置文件，以便在不同的环境(日常、预发布和在线)之间切换界面。4.数据接口的调用方式不容易被各种业务模型重用。5.数据接口的描述约定分散在代码的各个角落，可能与后端人员约定的接口文档不一致。6.整个项目单独开发后，接口对齐或测试回归的成本仍然很高，需要涉及到每一个接口提供者和用户。所以我们希望有这样一个框架，提供一种机制来描述所有依赖于项目的外部接口，统一管理，提供灵活的接口建模和调用方法，提供在线环境和生产环境之间便捷的切换方式，让前端和后端开发能够无缝结合。ModelProxy是满足这一要求的轻量级框架。它是Midway Framework的核心组件之一，也可以独立使用。使用模型代理可以带来以下优势：

1.不同的开发人员统一编写接口访问代码，含义清晰，降低了维护难度。2.框架中使用了Factory singleton模式，使得接口可以一次配置，多次重用。开发人员可以随意定制和组装自己的业务模型(依赖注入)。3.在线、日常和发送前环境之间切换非常方便。4.内置了river-mock和mockjs等模拟引擎，提供模拟数据非常方便。5.使用接口配置文件统一管理接口依赖描述，避免分散在各种代码中。6.支持浏览器共享模型，浏览器可以使用它进行前端数据渲染。整个代理过程对浏览器是透明的。7.界面配置文件本身是一个结构化的描述文档，可以使用river工具集合自动生成。也可以用来测试相关的自动化接口，使整个开发过程形成一个闭环。

模型代理及相关开发流程示意图

上图中，开发者首先需要将项目中所有的后端接口描述按照指定的json格式写入到interface.json配置文件中。如果需要，需要为每个接口编写一个规则文件，也就是图中的接口规则。这个规则文件用于在开发阶段模拟数据，或者在调试阶段使用River工具集验证接口。规则文件的内容取决于使用哪个模拟引擎(如mockjs、river-mock等)。).配置完成后，您可以在代码中根据自己的需求创建自己的业务模型。

下面是一个简单的例子：

[示例1]

第一步是在项目目录中创建接口配置文件interface.json，并在其中添加主搜索接口的json定义

复制的代码如下：{ 'title': 'pad淘宝项目数据接口集合定义'，' version' :' 1.0.0 '，' engine' :' mock js '，'规则库' : '。/interface rules/'。Status' :' online '，' interfaces' : [{'name' : '主搜索界面'，' id' :' search。getitems '，' URL ' : { ' online ' : ' http://s . m。

第二步是在代码中创建和使用模型

复制代码如下：//引入模块var模型proxy=require('模型proxy ')；

//导入接口配置文件进行全局初始化(注意：初始化只进行一次)modelproxy.init('。/interface . JSON’)；

//创建模型有关更多创建模式，请参考var search model=new model proxy({ search items : ' search . getitems '/user-defined method name 3360在配置文件中定义的接口id })；

//使用model，注意：调用方法需要的参数是实际接口需要的参数。search model . search items({ q : ' iphone 6 ' })//！注意调用done方法指定回调函数获取上面异步调用searchItems得到的数据！done(函数(数据){ console.log(数据)；} ) .错误(函数(err){ console . log(err))；} );

模型代理的功能丰富性在于它支持各种形式的概要文件来创建业务模型：

使用接口标识来创建生成的对象将采用最后一个“.”后面的单词作为方法名的标识

复制代码如下： model proxy . create(' search . getitem ')；

使用键JSON对象自定义方法名：接口ID

复制代码如下： model proxy . create({ getname : ' session . getusername '，getmycarts 3360 ' cart . getcarts ' })；

使用数组形式将单词放在最后一个单词之后。作为方法名签名。示例中生成的方法调用名称依次为： cart _ getitem、getitem、recommend、getname

复制代码如下： model proxy . create([' cart . getitem '，' search.getitem '，' search .建议'，' session . user . getname '])；

所有以前缀形式满足前缀的接口id都会被引入到对象中，后一半作为方法名

复制代码如下： modelproxy.create ('search。*');

同时，使用这些模型，您可以轻松实现合并请求或依赖请求，并呈现相关模板。

[示例2]合并请求。

复制代码如下：VAR模型=新模型代理('搜索。*');

//合并请求(除了完成，下面调用的模型方法，指定)model . improve({ q : '女性' })。列表({关键字3360' iphone6'})。getnav ({key: '时装' })。done(函数(data1，data2，Data3) {//参数顺序与方法调用顺序console.log(data1，data2，Data3)一致；} );

[示例3]依赖性请求。

复制代码如下： var model=new model proxy({ getuser : ' session . getuser '，getmyorderist : ' order . getorder ' })；//先获取用户id，再获取订单列表model . getuser({ sid : ' fdkaldjfgsakls 0322 yf8 ' })。done(function(data){ varuid=data . uid；//第二个数据请求取决于id号。getmyorderist({ id : uid })。完成(功能(数据){控制台。日志(数据)；} );} );

此外，模型代理不仅可以在节点端使用，还可以在浏览器端使用。只需将官方包提供的modelproxy-client.js引入页面即可。[示例4]浏览器使用模型代理

复制代码如下：-介绍modelproxy模块，它是由KISSY-script src=' http : model proxy-client . js '/script script type=' text/JavaScript ' KISSY . use(' model proxy '，function (s，modelproxy) {//！配置基本路径，与第二步配置的拦截路径一致！//并且全局配置一次！model proxy . config base('/model/')；

//创建模型var搜索模型=modelproxy.create ('search。*');Searchmodel。列表({q:' ihpan6'})。列表({q: '夹克' })。建议({q:' I'})。getnav ({q: '滑板' })。done(function(data1，Data2，data3，data4){ console . log({ ' list _ ihpane 6 ' : data 1，' list _ jacket' 3360data2，' improve _ I ' : data 3，' getnav _ slide ' : data 4 })；} );} );/script

同时，ModelProxy可以与Midway的另一个核心组件Midway-XTPL配合使用，实现数据、模板以及相关渲染过程在浏览器和服务器上的充分共享。有关模型代理的详细教程和文档，请访问https://github.com/purejs/modelproxy

摘要

ModelProxy作为一个具有配置的轻量级框架而存在，为接口Model的组装和使用提供了友好的方式，同时解决了前端开发模式和后端开发模式分离中的接口使用规范问题。在整个项目开发过程中，接口只需要定义和描述一次，前端开发人员可以参考。同时利用River工具自动生成文档，与后端开发人员形成合同，并做相关的自动化测试，大大优化了整个软件工程开发流程。

【注】River是阿里集团开发的前端统一接口规范及相关工具集的统称