序文
ノードを使用してフロントエンド開発モデルを分離すると、パフォーマンスと開発プロセスの利点がありますが、多くの課題にも直面しています。 Taobaoの複雑なビジネスおよび技術アーキテクチャの下で、バックエンドはJavaに依存してインフラストラクチャを構築し、フロントエンドを使用するための関連するビジネスインターフェイスを提供する必要があります。環境全体でノードの最も重要なタスクの1つは、ページレンダリングのためのフロントエンド（ノード側とブラウザ側）でのデータの統合を容易にするために、これらのビジネスインターフェイスを促進することです。エージェンシーの仕事で良い仕事をする方法は、フロントエンドとバックエンドの開発をプロセスでシームレスに接続できるようにするために、考慮する必要がある問題です。この記事では、この問題について説明し、解決策を提案します。
バックエンドにはさまざまなインターフェイスが提供されるため、開発者はこれらのインターフェイスにアクセスするためのノード側のコードを記述するさまざまな方法もある場合があります。インターフェイスアクセス方法と使用法で統一アーキテクチャ処理を実行しない場合、次の問題が発生します。
1.各開発者は、独自のコードスタイルを使用してインターフェイスアクセスコードを書き込み、プロジェクトディレクトリとコーディングスタイルに混乱を引き起こすため、保守が比較的困難になります。
2。すべての開発者は、彼自身の模擬データ方法を書きます。開発が完了した後、彼はモックを削除するためにコードを手動で変更する必要があります。
3。インターフェイスのさまざまな環境（毎日、事前発行、オンライン）の切り替えを実現するために、各開発者は構成ファイルを維持することができます。
4.データインターフェイスコールメソッドは、さまざまなビジネスモデルで簡単に再利用できません。
5.データインターフェイスの説明契約は、コードのすべてのコーナーに散らばっています。これは、バックエンド担当者が合意したインターフェイスドキュメントと矛盾する場合があります。
6.プロジェクト全体が分散された後、インターフェイスを接続したり、回帰をテストするコストは非常に高く、各インターフェイスプロバイダーとユーザーを巻き込む必要があります。
したがって、このフレームワークによって提供されるメカニズムを使用して、エンジニアリングプロジェクトに依存するすべての外部インターフェイスを記述し、統一された方法で管理し、柔軟なインターフェイスモデリングと呼び出しメソッドを提供し、便利なオンライン環境と生産環境スイッチング方法を提供して、フロントエンドとバックエンドの開発をシームレスに組み合わせて組み合わせたフレームワークがあることを望んでいます。 ModelProxyは、そのような要件を満たす軽量のフレームワークです。ミッドウェイフレームワークのコアコンポーネントの1つであり、単独で使用することもできます。 ModelProxyを使用すると、次の利点があります。
1.さまざまな開発者には、統一されたインターフェイスアクセスコード作成方法、明確な意味、メンテナンスの難易度が低下しています。
2.フレームワークは、ファクトリー +シングルトンモードを採用して、一度にインターフェイス構成の複数の多重化を実現します。開発者は、独自のビジネスモデルをカスタマイズおよび組み立てることができます（依存噴射）。
3.オンライン、毎日、および発行前の環境を簡単に切り替えることができます。
4. river-mockやmockjsなどの組み込みのモックエンジンは、モックデータを提供することは非常に便利です。
5.インターフェイス構成ファイルを使用して、インターフェイスの依存関係の説明を均一に管理して、さまざまなコードに散在しないようにします。
6.ブラウザ側でのモデル共有をサポートします。これは、フロントエンドデータをレンダリングするために使用できます。プロキシプロセス全体がブラウザに対して透過的です。
7.インターフェイス構成ファイル自体は構造化された説明ドキュメントであり、ドキュメントはRiver Tool Collectionを使用して自動的に生成できます。また、関連する自動化インターフェイステストに使用して、開発プロセス全体で閉ループを形成することもできます。
ModelProxy作業原則図と関連する開発プロセス図
上記の図では、開発者は最初にプロジェクト内のバックエンドインターフェイスのすべての依存関係を記述し、指定されたJSON形式に従ってinterface.json構成ファイルに書き込む必要があります。必要に応じて、各インターフェイス、つまり、図の一部、つまりインターフェイスルールの一部についてルールファイルを記述する必要があります。このルールファイルは、開発段階でデータをモックするか、リバーツールセットを使用して、ジョイントデバッグ段階でインターフェイスを検証するために使用されます。ルールファイルのコンテンツは、どのモックエンジンが使用されるか（MOCKJ、川列など）に依存します。構成が完了したら、ニーズに応じてコードに独自のビジネスモデルを作成できます。
簡単な例を次に示します。
【例1】
最初のステップは、プロジェクトディレクトリにインターフェイス構成ファイルinterface.jsonを作成し、メイン検索インターフェイスJSON定義を追加することです。
コードコピーは次のとおりです。
{
「タイトル」：「Pad Taobaoプロジェクトデータインターフェイスコレクション定義」、
「バージョン」：「1.0.0」、
「エンジン」：「mockjs」、
「ルールベース」： "./interfacerules/"、
「ステータス」：「オンライン」、
「インターフェイス」：[{
「名前」：「メイン検索インターフェイス」、
"id"： "search.getitems"、
「urls」：{
「オンライン」：「http://smtaobao.com/client/search.do "
}
}]
}
ステップ2コードでモデルを作成および使用します
コードコピーは次のとおりです。
//モジュールを紹介します
var modelproxy = require（ 'modelproxy'）;
//グローバル初期化は、インターフェイス構成ファイルを導入します（注：初期化は1回だけ動作します）
ModelProxy.init（ './interface.json'）;
//作成モードの詳細については、次の記事を参照してください
var searchModel = new ModelProxy（{
SearchItems： 'Search.GetItems' //カスタムメソッド名：構成ファイルで定義されているインターフェイスID
}）;
//モデルの使用、注：メソッドを呼び出すために必要なパラメーターは、実際のインターフェイスに必要なパラメーターです。
searchModel.SearchItems（{Q： 'iPhone6'}）
//！上記のSearchItemsを呼び出して取得して取得したデータを取得するために、コールバック関数を指定するには、完了メソッドを呼び出す必要があることに注意してください！
.done（function（data）{
console.log（data）;
}）
.error（function（err）{
console.log（err）;
}）;
ModelProxyの機能の豊富さは、さまざまな形態のプロファイルをサポートして、ビジネスを必要とするビジネスモデルを作成することです。
インターフェイスID>を使用してオブジェクトを作成します。メソッド名としてIDの数
コードコピーは次のとおりです。
ModelProxy.Create（ 'Search.GetItem'）;
キー値JSONオブジェクトを使用>カスタムメソッド名：インターフェイスID
コードコピーは次のとおりです。
modelproxy.create（{
getName： 'SESSION.GETUSNAME'、
getmycarts： 'cart.getcarts'
}）;
配列フォームを使用して>最後の後に単語を取ります。メソッド名としての番号
次の例で生成されたメソッドコール名は次のとおりです。CART_GETITEM、getItem、suggint、getName
コードコピーは次のとおりです。
ModelProxy.create（['cart.getitem'、 'search.getItem'、 'search.suggest'、 'session.user.getName']）;
プレフィックスフォーム>プレフィックスを満たすすべてのインターフェイスIDがオブジェクトに導入され、後半部分がメソッド名として取得されます
コードコピーは次のとおりです。
ModelProxy.Create（ 'Search。*'）;
同時に、これらのモデルを使用して、マージリクエストまたは依存関係リクエストを簡単に実装し、関連テンプレートをレンダリングできます
[例2]マージリクエスト
コードコピーは次のとおりです。
var model = new ModelProxy（ 'Search。*'）;
//マージリクエスト（下記のモデルメソッドは、完了以外のインターフェイスIDを構成するときに指定されます）
model.Suggest（{Q： 'Female'}）
.list（{keyword： 'iphone6'}）
.getnav（{key： 'Popular Clothing'}）
.done（function（data1、data2、data3）{
//パラメーターの順序は、メソッド呼び出しの順序と一致しています
console.log（data1、data2、data3）;
}）;
[例3]依存関係リクエスト
コードコピーは次のとおりです。
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-Client.jsをページに紹介するだけです。
[例4]ブラウザ側でモデルプロキシを使用します
コードコピーは次のとおりです。
<！ - ModelProxyモジュールを導入しました。それ自体はKISSYによってカプセル化された標準モジュールです - >
<スクリプトsrc = "modelproxy-client.js"> </script>
<script type = "text/javascript">
kissy.use（ "modelproxy"、function（s、modelproxy）{
//！2番目のステップで構成されたインターセプトパスと一致する基本パスを構成します！
//グローバルな構成があり、一度だけです！
ModelProxy.configbase（ '/model/'）;
//モデルを作成します
var searchModel = modelproxy.create（ 'search。*'）;
SearchModel
.list（{q： 'ihpone6'}）
.list（{q： 'shangchao'}）
.suggest（{q： 'i'}）
.getnav（{q： 'skateboard'}）
.done（function（data1、data2、data3、data4）{
console.log（{
"list_ihpone6"：data1、
「list_shocksuit」：data2、
"summis_i"：data3、
「getNav_skateboard」：data4
}）;
}）;
}）;
</script>
同時に、ModelProxyをMidwayのもう1つのコアコンポーネントであるMid-XTPLで使用して、ブラウザーとサーバー側でデータ、テンプレート、関連するレンダリングプロセスの完全な共有を実現できます。 ModelProxyの詳細なチュートリアルとドキュメントについては、https：//github.com/purejs/modelproxyに移動してください。
要約します
ModelProxyは構成された軽量フレームワークとして存在し、フレンドリーなインターフェイスモデルアセンブリと使用方法を提供し、同時にフロントエンドとバックエンド開発モードの分離におけるインターフェイス使用仕様の問題を解決します。プロジェクト開発プロセス全体で、インターフェイスを常に定義および記述する必要があり、フロントエンド開発者はそれを参照できます。同時に、Riverツールを使用して、自動的にドキュメントを生成し、バックエンド開発者との契約を形成し、関連する自動テストを実施し、ソフトウェアエンジニアリング開発プロセス全体を大幅に最適化します。
【ノートriver川は、アリババグループによって開発され、アリババグループによって開発されたフロントエンド統一インターフェイス仕様および関連ツールの一般的な用語です。