菜单

传说NodeJS的上下端分离的沉思与实行(三)轻量级的接口配置建立模型框架

2019年7月26日 - 金沙前端
  1. 数据接口调用形式非常的小概被依次业务model非常方便地复用。
    5.
    对此数据接口的陈诉约定散落在代码的逐条角落,有望跟后端人士约定的接口文书档案不平等。
    6.
    全方位项目分别开荒从此,对于接口的联调只怕测量检验回归开支依然极高,须求涉及到每三个接口提供者和使用者。
    于是我们希望有那般贰个框架,通过该框架提供的机制去描述工程项目中依赖的有所外界接口,对他们开始展览合併管理,同一时间提供灵活的接口建立模型及调用方式,而且提供便捷的线上遭受和生产条件切换形式,使前后端支付无缝结合。ModelProxy正是满足那样供给的轻量级框架,它是Midway
    Framework 宗旨部件之一,也足以独立选取。使用ModelProxy能够拉动如下优点:

  2. 不等的开垦者对于接口访问代码编写格局统一,含义清晰,收缩维护难度。
    2.
    框架之中采纳工厂+单例形式,达成接口三次配置多次复用。何况开垦者能够随便定制组装自身的工作Model(注重注入)。

  3. 能够特别低价地促成线上,平时,预发意况的切换。
  4. 放置river-mock和mockjs等mock引擎,提供mock数据充裕有益。
    5.
    施用接口配置文件,对接口的注重描述做联合的治本,幸免散落在各种代码之中。
    6.
    支撑浏览器端分享Model,浏览器端能够使用它做前端数据渲染。整个代理进程对浏览器透明。
    7.
    接口配置文件本人是结构化的叙说文书档案,能够利用river工具集结,自动生成文书档案。也可选拔它做连锁自动化接口测量试验,使整个开荒进程变成多少个闭环。

1.
每多少个开采职员使用分其余代码风格编写接口访谈代码,变成工程目录及编码风格混乱,维护相对困难。
2.
每四个开垦人士编写自个儿的mock数据格局,开采完成之后,要求手工业修改代码移除mock。
3.
每种开荒人士为了促成接口的例外条件切换(平常,预发,线上),只怕各自维护了有个别布局文件。

// 合併需要 (下边调用的model方法除done之外,皆为布局接口id时钦命)
model.suggest( { q: ‘女’ } )
    .list( { keyword: ‘iphone6’ } )
    .getNav( { key: ‘流行时装’ } )
    .done( function( data1, data2, data3 ) {
        // 参数顺序与办法调用顺序一致
        console.log( data1, data2, data3 );
    } );

下边是叁个简易的例子:

复制代码 代码如下:

复制代码 代码如下:

采纳数组情势>取最终 . 号前面包车型大巴单词作者为艺术名
下例中变化的点子调用名依次为: Cart_getItem, getItem, suggest, getName

ModelProxy.create( ‘Search.getItem’ );

前缀情势>全体满意前缀的接口ID会被引进对象,并取其后半有的作为艺术名

总结

var model = new ModelProxy( {
    getUser: ‘Session.getUser’,
    getMyOrderList: ‘Order.getOrder’
} );
// 先获得用户id,然后再依据id号拿到订单列表
model.getUser( { sid: ‘fdkaldjfgsakls0322yf8’ } )
    .done( function( data ) {
        var uid = data.uid;
        // 三遍数据要求注重第二次获得的id号
        this.getMyOrderList( { id: uid } )
            .done( function( data ) {
                console.log( data );
            } );
    } );

其余ModelProxy不仅仅在Node端能够应用,也足以在浏览器端使用。只必要在页面中引进官方包提供的modelproxy-client.js就可以。
【例四】浏览器端使用ModelProxy

在上图中,开拓者首先需求将工程项目中全体重视的后端接口描述,依据钦命的json格式,写入interface.json配置文件。供给时,须求对各种接口编写二个准绳文件,也即图中interface
rules部分。该准则文件用于在开采阶段mock数据或许在联调阶段选用River工具集去印证接口。准绳文件的内容在于选取哪一类mock引擎(比如mockjs, river-mock
等等)。配置完结之后,就可以在代码中遵照本人的要求创制和煦的事务model。

复制代码 代码如下:

【例一】

ModelProxy的效应充裕性在于它协助各样款式的profile以创办要求专业model:

复制代码 代码如下:

ModelProxy以一种配置化的轻量级框架存在,提供温馨的接口model组装及运用办法,同期很好的缓慢解决前后端支付情势分离中的接口使用正规难题。在全体项目费用进度中,接口始终只要求定义描述三次,前端开辟人士就能够援引,相同的时间利用River工具自动生成文书档案,产生与后端开垦职员的契约,并做连锁自动化测量试验,比十分大地优化了整个软件工程支出进度。

复制代码 代码如下:

利用键值JSON对象>自定义方法名: 接口ID

// 引入模块
var ModelProxy = require( ‘modelproxy’ );

<!– 引进modelproxy模块,该模块自个儿是由KISSY封装的专门的工作模块–>
<script src=”modelproxy-client.js” ></script>
<script type=”text/javascript”>
    KISSY.use( “modelproxy”, function( S, ModelProxy ) {
        // !配置基础路线,该路径与第二步中布局的阻拦路线一致!
        // 且全局配置有且唯有三遍!
        ModelProxy.configBase( ‘/model/’ );

// 全局伊始化引入接口配置文件  (注意:起初化专门的学问有且独有贰遍)
ModelProxy.init( ‘./interface.json’ );

【注】River 是Ali集团研究开发的内外端统一接口标准及有关工具集结的统称

同不平日候,ModelProxy能够兼容Midway另一基本器件Midway-XTPL一齐使用,落成多少和模板以及相关渲染进程在浏览器端和劳务器端的全共享。关于ModelProxy的详尽教程及文书档案请移步

出于后端提供的接口方式或然多样各个,同一时候开垦人员在编排Node端代码访谈这一个接口的办法也会有希望八种多种。就算我们在接口访谈格局及应用上不做联合架构管理,则会带动以下部分难题:

{
    “title”: “padTmall项目数量接口集合定义”,
    “version”: “1.0.0”,
    “engine”: “mockjs”,
    “rulebase”: “./interfaceRules/”,
    “status”: “online”,
    “interfaces”: [ {
        “name”: “主寻找接口”,
        “id”: “Search.getItems”,
        “urls”: {
            “online”: “”
        }
    } ]
}

ModelProxy.create( ‘Search.*’ );

况且,使用这几个Model,你能够很自由地贯彻统一须求大概注重诉求,并做相关模板渲染

图片 1

复制代码 代码如下:

// 使用model, 注意: 调用艺术所须求的参数即为实际接口所供给的参数。
searchModel.searchItems( { q: ‘iphone6’ } )
    // !注意 必须调用 done
方法钦命回调函数,来取得地点异步调用searchItems得到的数目!
    .done( function( data ) {
        console.log( data );
    } )
    .error( function( err ) {
        console.log( err );
    } );

// 创制model 更多创立情势请参后文
var searchModel = new ModelProxy( {
    searchItems: ‘Search.getItems’  // 自定义方法名:
配置文件中的定义的接口ID
} );

其次步 在代码中成立并动用model

【例三】 依赖诉求

ModelProxy专门的学问规律图及连锁支付进程图览

ModelProxy.create( {
    getName: ‘Session.getUserName’,
    getMyCarts: ‘Cart.getCarts’
} );

你只怕感兴趣的稿子:

使用接口ID创设>生成的靶子会取ID最终’.’号前边的单词作者为艺术名

        // 创建model
        var searchModel = ModelProxy.create( ‘Search.*’ );
        searchModel
            .list( { q: ‘ihpone6’ } )
            .list( { q: ‘冲锋衣’ } )
            .suggest( { q: ‘i’ } )
            .getNav( { q: ‘滑板’ } )
            .done( function( data1, data2, data3, data4 ) {
                console.log( {
                    “list_ihpone6”: data1,
                    “list_冲锋衣”: data2,
                    “suggest_i”: data3,
                    “getNav_滑板”: data4
                } );
            } );
    } );
</script>

应用Node做上下端分离的费用方式带来了一部分属性及开荒流程上的优势,
但同期也面对非常多挑衅。在Tmall复杂的职业及本事架构下,后端必须正视Java搭建基础架构,同期提供有关作业接口供前端采取。Node在方方面面情状中最关键的劳作之一就是代理那几个事情接口,以福利前端(Node端和浏览器端)整合数据做页面渲染。如何办好代监护人业,使得上下端支出分离之后,照旧可以在工艺流程上无缝衔接,是大家供给思量的主题材料。本文将就该难点做相关研讨,并提出消除方案。

第一步 在工程目录中创制接口配置文件interface.json,
并在其间增多主搜接口json定义

【例二】 合併央求

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

ModelProxy.create( [ ‘Cart.getItem’, ‘Search.getItem’,
‘Search.suggest’, ‘Session.User.getName’ ] );

图片 2

前言

var model = new ModelProxy( ‘Search.*’ );

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图