web-dev-qa-db-ja.com

クライアント側のAPI呼び出しを別の.jsファイルとクラスに分離し、それを参照する必要がありますか？

概要

Webフォームユーザーコントロールから直接WebApiを呼び出す代わりに、jQuery AJAXリクエストを返す関数を含むJS classを作成しました。コントロールはクラスをインスタンス化してこれらの関数を呼び出します。これにより、APIを呼び出すコードを自分のコントロールから分離できます。

これが最善の方法ですか？後でどのような問題が発生する可能性がありますか

実装

MyService.js

WebApiコントローラーがMyServiceControllerと呼ばれていると仮定します。クライアント側のJSクラスは次のようになります。

class MyService
{
    //  Example method to call
    start = function(userId) {
        return $.ajax({
            url: '/api/myService/start',
            type: 'POST',
            data: {
                id: userId
            });
    }

    // Another example method
    stop = function() {
        return $.ajax({
            url: '/api/myService/stop',
            type: 'POST'
        });
    }
}

MyCode.ascx

これは、次のようにWebフォームコントロールから消費されます。

// Instantiate the class
var let api = new MyService();

// Assume document has loaded and add click-handler
var someId = 1;

// Call Start
$('.myService-start').click(function(){
    api.start(someId)
        .done(function(){
            console.log('start completed');
        })
        .fail(function(){
            console.log('start failed');
        });
});

// Call Stop
$('.myService-stop').click(function(){
    api.stop()
        .done(function(){
            console.log('stop completed');
        })
        .fail(function(){
            console.log('stop failed');
        });;
});

<span class"myService-start">Start</span>
<span class"myService-stop">Stop</span>

質問

私は悪いパターンに従っていますか？これは後でコード臭いにつながりますか？

これを実装するより良い方法があるかどうか私に知らせてください

c#asp.netweb-apiwebforms
1
Brownish Monster

はい、その良い習慣です。

あなたはおそらくあなたのアプリを通していくつかの異なる場所でapiを使用したいと思うでしょう、そしてこれはあなたにコードを節約し、物事をよりきれいにするでしょう。

さらに進んで、JavaScriptクライアントを独自のプロジェクトに配置して、複数のプロジェクトで使用し、npn経由で配布し、TypeScriptタイプを追加し、$。ajaxからネイティブのfetch（）に変更しますwebformsからアップグレードします？！？!!!？!!!など

0
Ewan