Midway-ModelProxy — 轻量级的接口配置建模框架
使用Node做前后端分离的开发模式带来了一些性能及开发流程上的优势(见), 但同时也面临不少挑战。在淘宝复杂的业务及技术架构下，后端必须依赖Java搭建基础架构，同时提供相关业务接口供前端使用。Node在整个环境中最重要的工作之一就是代理这些业务接口，以方便前端(Node端和浏览器端)整合数据做页面渲染。如何做好代理工作，使得前后端开发分离之后，仍然可以在流程上无缝衔接，是我们需要考虑的问题。本文将就该问题做相关探讨，并提出解决方案。
由于后端提供的接口方式可能多种多样，同时开发人员在编写Node端代码访问这些接口的方式也有可能多种多样。如果我们在接口访问方式及使用上不做统一架构处理，则会带来以下一些问题：
1. 每一个开发人员使用各自的代码风格编写接口访问代码，造成工程目录及编码风格混乱，维护相对困难。
2. 每一个开发人员编写自己的mock数据方式，开发完毕之后，需要手工修改代码移除mock。
3. 每一个开发人员为了实现接口的不同环境切换(日常，预发，线上)，可能各自维护了一些配置文件。
4. 数据接口调用方式无法被各个业务model非常方便地复用。
5. 对于数据接口的描述约定散落在代码的各个角落，有可能跟后端人员约定的接口文档不一致。
6. 整个项目分离开发之后，对于接口的联调或者测试回归成本依然很高，需要涉及到每一个接口提供者和使用者。
于是我们希望有这样一个框架，通过该框架提供的机制去描述工程项目中依赖的所有外部接口，对他们进行统一管理，同时提供灵活的接口建模及调用方式，并且提供便捷的线上环境和生产环境切换方法，使前后端开发无缝结合。ModelProxy就是满足这样要求的轻量级框架，它是Midway Framework 核心构件之一，也可以单独使用。使用ModelProxy可以带来如下优点：
1. 不同的开发者对于接口访问代码编写方式统一，含义清晰，降低维护难度。
2. 框架内部采用工厂+单例模式，实现接口一次配置多次复用。并且开发者可以随意定制组装自己的业务Model(依赖注入)。
3. 可以非常方便地实现线上，日常，预发环境的切换。
4. 内置和等mock引擎，提供mock数据非常方便。
5. 使用接口配置文件，对接口的依赖描述做统一的管理，避免散落在各个代码之中。
6. 支持浏览器端共享Model，浏览器端可以使用它做前端数据渲染。整个代理过程对浏览器透明。
7. 接口配置文件本身是结构化的描述文档，可以使用工具集合，自动生成文档。也可使用它做相关自动化接口测试，使整个开发过程形成一个闭环。
ModelProxy工作原理图及相关开发过程图览
在上图中，开发者首先需要将工程项目中所有依赖的后端接口描述，按照指定的json格式，写入interface.json配置文件。必要时，需要对每个接口编写一个规则文件，也即图中interface rules部分。该规则文件用于在开发阶段mock数据或者在联调阶段使用River工具集去验证接口。规则文件的内容取决于采用哪一种mock引擎（比如 mockjs, river-mock 等等）。配置完成之后，即可在代码中按照自己的需求创建自己的业务model。
下面是一个简单的例子：
第一步 在工程目录中创建接口配置文件interface.json, 并在其中添加主搜接口json定义
"title": "pad淘宝项目数据接口集合定义",
"version": "1.0.0",
"engine": "mockjs",
"rulebase": "./interfaceRules/",
"status": "online",
"interfaces": [ {
"name": "主搜索接口",
"id": "Search.getItems",
"online": "http://s./client/search.do"
第二步 在代码中创建并使用model
// 引入模块
var ModelProxy = require( 'modelproxy' );
// 全局初始化引入接口配置文件
（注意：初始化工作有且只有一次）
ModelProxy.init( './interface.json' );
// 创建model 更多创建模式请参后文
var searchModel = new ModelProxy( {
searchItems: 'Search.getItems'
// 自定义方法名: 配置文件中的定义的接口ID
// 使用model, 注意: 调用方法所需要的参数即为实际接口所需要的参数。
searchModel.searchItems( { q: 'iphone6' } )
// !注意 必须调用 done 方法指定回调函数，来取得上面异步调用searchItems获得的数据!
.done( function( data ) {
console.log( data );
.error( function( err ) {
console.log( err );
ModelProxy的功能丰富性在于它支持各种形式的profile以创建需要业务model：
使用接口ID创建&生成的对象会取ID最后’.’号后面的单词作为方法名
ModelProxy.create( 'Search.getItem' );
使用键值JSON对象&自定义方法名: 接口ID
ModelProxy.create( {
getName: 'Session.getUserName',
getMyCarts: 'Cart.getCarts'
使用数组形式&取最后 . 号后面的单词作为方法名
下例中生成的方法调用名依次为: Cart_getItem, getItem, suggest, getName
ModelProxy.create( [ 'Cart.getItem', 'Search.getItem', 'Search.suggest', 'Session.User.getName' ] );
前缀形式&所有满足前缀的接口ID会被引入对象，并取其后半部分作为方法名
ModelProxy.create( 'Search.*' );
同时，使用这些Model，你可以很轻易地实现合并请求或者依赖请求，并做相关模板渲染
【例二】 合并请求
var model = new ModelProxy( 'Search.*' );
// 合并请求 (下面调用的model方法除done之外，皆为配置接口id时指定)
model.suggest( { q: '女' } )
.list( { keyword: 'iphone6' } )
.getNav( { key: '流行服装' } )
.done( function( data1, data2, data3 ) {
// 参数顺序与方法调用顺序一致
console.log( data1, data2, data3 );
【例三】 依赖请求
var model = new ModelProxy( {
getUser: 'Session.getUser',
getMyOrderList: 'Order.getOrder'
// 先获得用户id，然后再根据id号获得订单列表
model.getUser( { sid: 'fdkaldjfgsakls0322yf8' } )
.done( function( data ) {
var uid = data.
// 二次数据请求依赖第一次取得的id号
this.getMyOrderList( { id: uid } )
.done( function( data ) {
console.log( data );
此外ModelProxy不仅在Node端可以使用，也可以在浏览器端使用。只需要在页面中引入官方包提供的modelproxy-client.js即可。
【例四】浏览器端使用ModelProxy
&!-- 引入modelproxy模块，该模块本身是由KISSY封装的标准模块--&
&script src="modelproxy-client.js" &&/script&
&script type="text/javascript"&
KISSY.use( "modelproxy", function( S, ModelProxy ) {
// !配置基础路径，该路径与第二步中配置的拦截路径一致!
// 且全局配置有且只有一次！
ModelProxy.configBase( '/model/' );
// 创建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
同时，ModelProxy可以配合Midway另一核心组件一起使用，实现数据和模板以及相关渲染过程在浏览器端和服务器端的全共享。关于ModelProxy的详细教程及文档请移步
ModelProxy以一种配置化的轻量级框架存在，提供友好的接口model组装及使用方式，同时很好的解决前后端开发模式分离中的接口使用规范问题。在整个项目开发过程中，接口始终只需要定义描述一次，前端开发人员即可引用，同时使用River工具自动生成文档，形成与后端开发人员的契约，并做相关自动化测试，极大地优化了整个软件工程开发过程。
【注】River 是阿里集团研发的前后端统一接口规范及相关工具集合的统称
【附】相关文章列表&CSSOM视图模式(CSSOM View Module)相关整理&scrollIntoView 兼容所有浏览器&&mvc 综合网站&&月影在JSDC台湾关于打造前端团队之路的演讲分享&&JavaScript宝座：七大框架论剑&&360奇舞周刊&&《JavaScript 语言精粹》一书中，为什么每一章的开头都有一句威廉&莎士比亚的句子？&&手机百度前端工程化之路&&hasOwnProperty&&&鬼道&&宅居&&视频: 用AngularJS开发下一代WEB应用（大漠穷秋）&&艾伦哥，出视频教程了：&&&miaov课后作业&&视频: Web高性能动画 - 奇舞团黄薇&&HTML5 最好的新朋友，是 Apple 不是 Google&&在一个技术为王的公司，产品经理如何生存？&&贫穷有多可怕？&这个与技术无关，但可以看看别人的故事，以此来激励自己的人生。愿我们的这代与下代不在贫穷中失落，不在失落中迷失自我。&&使用getTimezoneOffset方法修正时差&&如何面试前端工程师：Github很重要&分享一篇介绍goroutines的文章&&&&
如何评价《JavaScript 的诞生与死亡》&&chrome调试canvas&&sass调试&&&a href="javascript:void(0)"&这样写为什么不好?&&谈一谈void&&前端工程师怎样告诉设计师，他设计的东西太丑&&怎么判定web前端架构师的能力高低？&未来职业方向的预测与评估&&为什么前端不能一直做？难道要转行？？&前端前景的探讨&&JSON.stringify 语法讲解&&&21副GIF动图让你了解各种数学概念&&if (obj.length === +obj.length)判断分析&&前端工程化&&在知乎的计算机领域都有哪些专家级用户？&&同为javascript框架，react和angular各有什么优缺点，各自又适合什么开发场景？&&人人网为什么不但没成为中国的 Facebook，反而日渐式微？&公司战略方面问题。&&Sublime Text 会取代 vim 或 emacs 吗？&&常用javascript设计模式&&pubjs，基于事件的模块化开发&&脑图&&如何当一个好的面试官？&&为什么前端工程师很少用 Visual Studio (Windows)?&
&一些实用的CSS Media Query代码片段&
&零经验的人都是怎么转行的？&&淘宝十年技术路&&IT 外包中的甲方乙方，德国人，美国人，印度人和日本人印象杂谈&&如果没有封锁，谷歌会在中国搜索引擎市场里成为第一吗？为什么？&&你怎么看《周鸿祎自述：我的互联网方法论》这本书？&&为什么淘宝这么成功，易趣却一败涂地？&公司战略类文章&&怎样拥有学霸那种一学就是十几个小时的精力？&&知乎上，前端开发领域有哪些值得推荐的问答&&Web 前端开发岗位，该选择百度还是腾讯？&&Web 开发的前端、后端的入门门槛是不是比较低？&知乎上有个前端开发这个标签，下面有一些文章：&&&页面统计&&你用过的最让你震惊的网站有哪些？为什么？&&team 团队协作开发平台&&学习编程语言最好的方法是什么？&电信旗下的天翼云的vps，支持nodejs&&WebKit技术内幕&&朱永盛&&程序员接私单不传秘籍之一：准备工作&&百度收藏&&为什么滴滴打车都烧了几十亿却忍着不赚钱，背后的商业逻辑是什么?&公司的战略背景分析&&原型工具&&一次十年后的同事聚会引发的职场感悟&&女程序员，美国本科，美国两年工作经历，打算回国。&------&
以下为贡献&
&5种你未必知道的JavaScript和CSS交互的方法&&鼠标与触摸设备&&SVG潘多拉图形动画效果demo&&ECMAScript 6 New Support&&深入理解JavaScript定时机制&&JavaScript最小时间片&&谈谈页面停留时间&&React.js编程思想&&escape 和 unescape 函數&&用Javascript获取页面元素的位置&&JavaScript Tween算法及缓动效果&&JavaScript的诞生与死亡（双语字幕）&&thenjs JavaScript异步回调&&从一行代码里面学点JavaScript&&HTML5 JavaScript实现图片文字识别与提取&&JavaScript 中的陷阱&&浏览器内核与js引擎&&基于前后端分离的模版探索&&使用Chrome开发工具调试Canvas&&Nginx has big plans for JavaScript&&JS抽奖&&JavaScript简易教程&&Handpicked Javascript Plugins&&js常见方法集合&&详解new function(){}和function(){}()&%E5%8E%9F%E7%90%86-%E6%9C%BA%E5%88%B6/#userconsent#&jQuery诞生记-原理与机制&&JS多文件下载&&undefined的插件&&
&IE中的CSS3不完全兼容方案&&纯CSS3响应式分页插件&&css3动画简介以及动画库animate.css的使用&&什么是网格布局&&如何开启浏览器CSS Grid Layout功能&&网格单元格布局&&css3-box-sizing&&CSS进阶之路&&clippy css图片样式工具&&CSS FRONTEND FRAMEWORKS&&响应式框架的比较&
&移动端webapp开发必备知识&&zepto源码注释&&移动优先的跨终端 Web&&如何创建支持低版本浏览器的响应式网站&kissyteam/kissy-mobile#3&触屏事件汇总&&友盟指数 - 设备指数以全新数据可视化方式呈现Android及iOS设备的相关数据&&使用 chrome mobile emulation 来辅助 device 测试&&淘宝的无线数读，隔天更新，来自集团的90%app&&专访阿里前端工程师：淘宝移动Web开发那些事儿&&&&安卓数字显示效果 spinner&&HTML5全屏API在FireFox/Chrome中的显示差异&&viewport双城记&&视网膜New iPad与普通分辨率iPad页面的兼容处理&
&Vim 实用技术，第 1 部分: 实用技巧&&Eclipse 常用快捷键 (动画讲解)&&(git)中team开发、fork和pull request的用法&&超棒的 15 款 Bootstrap UI 编辑器&&几个秒杀PPT的高大上的幻灯工具&&chrome调试工具常用功能整理&&css tools&&淺談 Firefox 31 開發者工具&&在线制作Impress.js等基于WEB的PPT&&分享8个难忘的HTML5炫酷动画及源码&&回调JSONP&&Chrome 开发工具 Workspace 使用&&开发者不可不知的Google Chrome七大新特性&&AngularJs分页&&bootstrap 的插件&&ECMAScript 6 转5&&HTML5/CSS3实现蝙蝠侠人物动画演示地址&&WEB开发基础 & web开发最佳实践手册&&ECMAEcript6兼容性手册&&国产UI&&jsPerf: JavaScript performance playground&&程序员必读的书籍和期刊杂志&&常用前端开发工具合集&&WEB APP原型在线设计&&百度云收藏&&JQ常见效果插件&&html5截屏&&JS截屏&&chrome profiles&&css小工具集合。&&Cygwin windows下操作git利器。&&7个经典创意jQuery应用插件及源码&&实现CSS动画的工具和教程指南&&超炫酷的HTML5简历&
&如何成为一名优秀的web前端工程师（前端攻城师）？&&JavaScript中圆括号() 和 方括号[] 的特殊用法疑问？&&&知乎上有哪些 JavaScript 高手&&怎样拥有学霸那种一学就是十几个小时的精力？&&为什么淘宝这么成功，易趣却一败涂地？&&知乎上，前端开发领域有哪些值得推荐的问答？&&一些人瞧不起 jQuery 的理由是什么？&&Web 前端开发前景如何？&&知乎前端标签&&Web 前端开发岗位，该选择百度还是腾讯？&&Web 开发的前端、后端的入门门槛是不是比较低？&&谈谈你对各种编程语言的看法&&GitHub应该放什么类型的代码?&&校招进 BAT 产品岗究竟多难？&&在 Mac 上进行开发比在 Windows 上效率更高吗？如何量化和比较这两个平台的开发效率&&作为一个IT人员是否必须有Macbook？&&产品经理应该如何正确处理老板不靠谱的需求？&&怎么从零开始学习 Python 语言编程？&&学习编程语言最好的方法是什么？&&阿里java校招本科生要求？自学没方向&&怎么判定web前端架构师的能力高低？&&买了kindle就一定会爱上读书吗？&&创业的首要问题&&为什么世界四大古代文明只有中华文明没有被毁灭？&&为什么滴滴打车都烧了几十亿却忍着不赚钱，背后的商业逻辑是什么?&&怎么判定web前端架构师的能力高低？&&云计算到底那家强？&&为什么前端不能一直做？难道要转行？？&&如何评价淘宝 UED 的 Midway Framework 前后端分离？&&一份优秀的前端开发工程师简历是怎么样的？&&遇到关注你薪资且会直接发问的老同学，怎么回答最合适？&&现在从事 Web 前端开发的高级工程师，想请问你们初入行时的战斗力如何？&&大公司里怎样开发和部署前端代码？&&知乎工程师们的开发环境是怎样的？&
&一个对前端模板技术的全面总结&&程序员编程的10个实用技巧&&2014年程序员的工资有多高？你是否该跳槽了！&&Web应用开发中的几个问题&&淘宝的十年技术之路&&程序员必须知道的10个算法和数据结构有哪些？&&阿里上市后首次员工讲话 马云说了啥？&&百度2015校园招聘面试题回忆录（成功拿到offer）&&马云：创业智慧！&&老程序员：当编程成为你的第二职业&&计算机启动过程详解&&7本不错的HTML 5书籍推荐&&有jQuery背景，该如何用AngularJS编程思想？&&D2-淘宝移动端Web开发实践&&BAT及各大互联网公司2014前端笔试面试题--Html,Css篇&&BAT及各大互联网公司2014前端笔试面试题--JavaScript篇&&要扁平化，也要可用性&&中国顶尖技术团队访谈录&&有jQuery背景，该如何用AngularJS编程思想？&&&程序员应该阅读的非编程类书籍有哪些？&&&21副GIF动图让你了解各种数学概念&&我泡在GitHub上的177天&&几十种编程语言的快速入门教程&&人人网的失败：抄袭不来的是灵魂&&github干货系列&
参加2014 D2前端技术交流的一些感想和思考&http://moxiaohe/moxiaohe.github.io#2
记录10.25杭州D2前端技术论坛&&参加 D2 的这个周末&& 杭州D2行&
勾三股四的感悟&&第五届D2-豪情&%E7%AC%AC%E4%BA%94%E6%AC%A1d2%EF%BC%8D%E5%85%B3%E6%B3%A8%E5%9C%A8%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E6%9E%B6%E6%9E%84/#userconsent#&第五次D2--张克军&&苏宁总结&
&HTML编码规范&%E4%BD%8D%E7%BD%AE&CSS编码规范&&JAVASCRIPT编码规范&&&前端编码规范之js&&最流行的PHP 代码规范&&&AMD与CMD规范的区别&&KISSY 源码规范&%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md&php代码编写规范&&bt编码规范&&规范加强版。&
&表单验证&&&数字验证&&表单验证规则&&&漂亮验证
前端开发qq群： ，禁止闲聊，非喜勿进~！
阅读(...) 评论()如何评价淘宝 UED 的 Midway Framework 前后端分离_百度知道
如何评价淘宝 UED 的 Midway Framework 前后端分离
提问者采纳
——所以我是赞成后端工程师学习nodejs的，对现在的移动互联网趋势没有敏锐的发现机会并适应变革、项目上都不用去看后端项目的排期和配合了、离业务核心太远导致的，是大量面临瓶颈的资深前端工程师无法抗拒的诱惑，前端人员天然对多终端。阿里很早就了nodejs写的开发服务器用于内部测试。这不能不说是前端这一层过于薄，技术上。　　3，现在从技术上侵入服务端，扩大了前端的势力范围，近期的技术升级非常少，促进阿里后端web框架的进化，前端开发模式的变革。nodejs来了，后端重心后移）！　　2，　　对技术影响力　1，技能树终于开了新分支，给这停滞的技术领域注入活力，可能性猛然大了无数倍。对个人成长的渴望。　　这一点是没有很多人甚至阿里人没注意到的（前端不懂webx、晋升答辩极为重要，技术形态已经陷入僵化，一下子似乎发现了新大陆、招聘，很遗憾地缺席了新时代、自主性，webx框架发布已经很久、造轮子，也是厚积薄发，极大提高了开发和测试的便利度。要知道在阿里前端最高的级别是P8、发paper，进一步榨取前端劳力提供了可能、体验的关注会为后端框架吹过一缕新风，现在走到线上。　　自己玩后端、多屏、交互，这为提高开发效率，洗牌开始，人数则一只手能数的过来
其他类似问题
为您推荐：
ued的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}