建站
咨詢
售后
建站咨詢
新聞中心
前言
使用Node做前后端分離的開(kāi)發(fā)模式帶來(lái)了一些性能及開(kāi)發(fā)流程上的優(yōu)勢(shì)(見(jiàn)《前后端分離的思考與實(shí)踐 一》), 但同時(shí)也面臨不少挑戰(zhàn)。在淘寶復(fù)雜的業(yè)務(wù)及技術(shù)架構(gòu)下，后端必須依賴Java搭建基礎(chǔ)架構(gòu)，同時(shí)提供相關(guān)業(yè)務(wù)接口供前端使用。Node在整個(gè)環(huán)境中最重要的工作之一就是代理這些業(yè)務(wù)接口，以方便前端(Node端和瀏覽器端)整合數(shù)據(jù)做頁(yè)面渲染。如何做好代理工作，使得前后端開(kāi)發(fā)分離之后，仍然可以在流程上無(wú)縫銜接，是我們需要考慮的問(wèn)題。本文將就該問(wèn)題做相關(guān)探討，并提出解決方案。
創(chuàng)新互聯(lián)公司長(zhǎng)期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為寧蒗企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站制作，寧蒗網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
由于后端提供的接口方式可能多種多樣，同時(shí)開(kāi)發(fā)人員在編寫(xiě)Node端代碼訪問(wèn)這些接口的方式也有可能多種多樣。如果我們?cè)诮涌谠L問(wèn)方式及使用上不做統(tǒng)一架構(gòu)處理，則會(huì)帶來(lái)以下一些問(wèn)題：
1. 每一個(gè)開(kāi)發(fā)人員使用各自的代碼風(fēng)格編寫(xiě)接口訪問(wèn)代碼，造成工程目錄及編碼風(fēng)格混亂，維護(hù)相對(duì)困難。
2. 每一個(gè)開(kāi)發(fā)人員編寫(xiě)自己的mock數(shù)據(jù)方式，開(kāi)發(fā)完畢之后，需要手工修改代碼移除mock。
3. 每一個(gè)開(kāi)發(fā)人員為了實(shí)現(xiàn)接口的不同環(huán)境切換(日常，預(yù)發(fā)，線上)，可能各自維護(hù)了一些配置文件。
4. 數(shù)據(jù)接口調(diào)用方式無(wú)法被各個(gè)業(yè)務(wù)model非常方便地復(fù)用。
5. 對(duì)于數(shù)據(jù)接口的描述約定散落在代碼的各個(gè)角落，有可能跟后端人員約定的接口文檔不一致。
6. 整個(gè)項(xiàng)目分離開(kāi)發(fā)之后，對(duì)于接口的聯(lián)調(diào)或者測(cè)試回歸成本依然很高，需要涉及到每一個(gè)接口提供者和使用者。
于是我們希望有這樣一個(gè)框架，通過(guò)該框架提供的機(jī)制去描述工程項(xiàng)目中依賴的所有外部接口，對(duì)他們進(jìn)行統(tǒng)一管理，同時(shí)提供靈活的接口建模及調(diào)用方式，并且提供便捷的線上環(huán)境和生產(chǎn)環(huán)境切換方法，使前后端開(kāi)發(fā)無(wú)縫結(jié)合。ModelProxy就是滿足這樣要求的輕量級(jí)框架，它是Midway Framework 核心構(gòu)件之一，也可以單獨(dú)使用。使用ModelProxy可以帶來(lái)如下優(yōu)點(diǎn)：
1. 不同的開(kāi)發(fā)者對(duì)于接口訪問(wèn)代碼編寫(xiě)方式統(tǒng)一，含義清晰，降低維護(hù)難度。
2. 框架內(nèi)部采用工廠+單例模式，實(shí)現(xiàn)接口一次配置多次復(fù)用。并且開(kāi)發(fā)者可以隨意定制組裝自己的業(yè)務(wù)Model(依賴注入)。
3. 可以非常方便地實(shí)現(xiàn)線上，日常，預(yù)發(fā)環(huán)境的切換。
4. 內(nèi)置river-mock和mockjs等mock引擎，提供mock數(shù)據(jù)非常方便。
5. 使用接口配置文件，對(duì)接口的依賴描述做統(tǒng)一的管理，避免散落在各個(gè)代碼之中。
6. 支持瀏覽器端共享Model，瀏覽器端可以使用它做前端數(shù)據(jù)渲染。整個(gè)代理過(guò)程對(duì)瀏覽器透明。
7. 接口配置文件本身是結(jié)構(gòu)化的描述文檔，可以使用river工具集合，自動(dòng)生成文檔。也可使用它做相關(guān)自動(dòng)化接口測(cè)試，使整個(gè)開(kāi)發(fā)過(guò)程形成一個(gè)閉環(huán)。
ModelProxy工作原理圖及相關(guān)開(kāi)發(fā)過(guò)程圖覽
在上圖中，開(kāi)發(fā)者首先需要將工程項(xiàng)目中所有依賴的后端接口描述，按照指定的json格式，寫(xiě)入interface.json配置文件。必要時(shí)，需要對(duì)每個(gè)接口編寫(xiě)一個(gè)規(guī)則文件，也即圖中interface rules部分。該規(guī)則文件用于在開(kāi)發(fā)階段mock數(shù)據(jù)或者在聯(lián)調(diào)階段使用River工具集去驗(yàn)證接口。規(guī)則文件的內(nèi)容取決于采用哪一種mock引擎（比如 mockjs, river-mock 等等）。配置完成之后，即可在代碼中按照自己的需求創(chuàng)建自己的業(yè)務(wù)model。
下面是一個(gè)簡(jiǎn)單的例子：
【例一】
- ***步 在工程目錄中創(chuàng)建接口配置文件interface.json, 并在其中添加主搜接口json定義
- {
- "title": "pad淘寶項(xiàng)目數(shù)據(jù)接口集合定義",
- "version": "1.0.0",
- "engine": "mockjs",
- "rulebase": "./interfaceRules/",
- "status": "online",
- "interfaces": [ {
- "name": "主搜索接口",
- "id": "Search.getItems",
- "urls": {
- "online": "http://s.m.taobao.com/client/search.do"
- }
- } ]
- }
- 第二步 在代碼中創(chuàng)建并使用model
- // 引入模塊
- var ModelProxy = require( 'modelproxy' );
- // 全局初始化引入接口配置文件 （注意：初始化工作有且只有一次）
- ModelProxy.init( './interface.json' );
- // 創(chuàng)建model 更多創(chuàng)建模式請(qǐng)參后文
- var searchModel = new ModelProxy( {
- searchItems: 'Search.getItems' // 自定義方法名: 配置文件中的定義的接口ID
- } );
- // 使用model, 注意: 調(diào)用方法所需要的參數(shù)即為實(shí)際接口所需要的參數(shù)。
- searchModel.searchItems( { q: 'iphone6' } )
- // !注意 必須調(diào)用 done 方法指定回調(diào)函數(shù)，來(lái)取得上面異步調(diào)用searchItems獲得的數(shù)據(jù)!
- .done( function( data ) {
- console.log( data );
- } )
- .error( function( err ) {
- console.log( err );
- } );
#p#
ModelProxy的功能豐富性在于它支持各種形式的profile以創(chuàng)建需要業(yè)務(wù)model：
- 使用接口ID創(chuàng)建>生成的對(duì)象會(huì)取ID***’.'號(hào)后面的單詞作為方法名
- ModelProxy.create( 'Search.getItem' );
使用鍵值JSON對(duì)象>自定義方法名: 接口ID
- ModelProxy.create( {
- getName: 'Session.getUserName',
- getMyCarts: 'Cart.getCarts'
- } );
- 使用數(shù)組形式>取*** . 號(hào)后面的單詞作為方法名
下例中生成的方法調(diào)用名依次為: Cart_getItem, getItem, suggest, getName
- ModelProxy.create( [ 'Cart.getItem', 'Search.getItem', 'Search.suggest', 'Session.User.getName' ] );
- 前綴形式>所有滿足前綴的接口ID會(huì)被引入對(duì)象，并取其后半部分作為方法名
- ModelProxy.create( 'Search.*' );
同時(shí)，使用這些Model，你可以很輕易地實(shí)現(xiàn)合并請(qǐng)求或者依賴請(qǐng)求，并做相關(guān)模板渲染
【例二】 合并請(qǐng)求
- var model = new ModelProxy( 'Search.*' );
- // 合并請(qǐng)求 (下面調(diào)用的model方法除done之外，皆為配置接口id時(shí)指定)
- model.suggest( { q: '女' } )
- .list( { keyword: 'iphone6' } )
- .getNav( { key: '流行服裝' } )
- .done( function( data1, data2, data3 ) {
- // 參數(shù)順序與方法調(diào)用順序一致
- console.log( data1, data2, data3 );
- } );
【例三】 依賴請(qǐng)求
- var model = new ModelProxy( {
- getUser: 'Session.getUser',
- getMyOrderList: 'Order.getOrder'
- } );
- // 先獲得用戶id，然后再根據(jù)id號(hào)獲得訂單列表
- model.getUser( { sid: 'fdkaldjfgsakls0322yf8' } )
- .done( function( data ) {
- var uid = data.uid;
- // 二次數(shù)據(jù)請(qǐng)求依賴***次取得的id號(hào)
- this.getMyOrderList( { id: uid } )
- .done( function( data ) {
- console.log( data );
- } );
- } );
此外ModelProxy不僅在Node端可以使用，也可以在瀏覽器端使用。只需要在頁(yè)面中引入官方包提供的modelproxy-client.js即可。
【例四】瀏覽器端使用ModelProxy
同時(shí)，ModelProxy可以配合Midway另一核心組件Midway-XTPL一起使用，實(shí)現(xiàn)數(shù)據(jù)和模板以及相關(guān)渲染過(guò)程在瀏覽器端和服務(wù)器端的全共享。關(guān)于ModelProxy的詳細(xì)教程及文檔請(qǐng)移步https://github.com/purejs/modelproxy
總結(jié)
ModelProxy以一種配置化的輕量級(jí)框架存在，提供友好的接口model組裝及使用方式，同時(shí)很好的解決前后端開(kāi)發(fā)模式分離中的接口使用規(guī)范問(wèn)題。在整個(gè)項(xiàng)目開(kāi)發(fā)過(guò)程中，接口始終只需要定義描述一次，前端開(kāi)發(fā)人員即可引用，同時(shí)使用River工具自動(dòng)生成文檔，形成與后端開(kāi)發(fā)人員的契約，并做相關(guān)自動(dòng)化測(cè)試，極大地優(yōu)化了整個(gè)軟件工程開(kāi)發(fā)過(guò)程。
【注】River 是阿里集團(tuán)研發(fā)的前后端統(tǒng)一接口規(guī)范及相關(guān)工具集合的統(tǒng)稱
本文標(biāo)題：Midway-ModelProxy — 輕量級(jí)的接口配置建?？蚣?
本文URL：http://www.5511xx.com/article/ccedgpj.html
