5

レスポンシブ Web ページ/Web アプリケーション (モバイル デバイス) 用の商用 API を初めて作成しています。

私は新人で、悲しいことに、一人で作業しているだけでなく、Javascript も初めてです (長くて複雑な話)。

業界の誰かが、次の形式の「get」呼び出しについて専門的な意見を提供できるかどうか疑問に思っていました。

var getSample = function(params) {
    //Returns Object
    return $.ajax({ 
        url: URL + 'downloadQuadrat.php',
        type: 'GET',
        data: { 'projectID': params.pid, 'quadratID': params.qid },
        dataType: dataType
    });
}

関数呼び出し:

var printList = function(lid,options,get) {
    var list = $("ul#"+lid);
    var promise = get(options);

    promise.promise().then(
        function(response) {
            var items = response;
            list.empty();

            $.each(items, function(item,details) {
                var ul = $('<ul/>');
                ul.attr('id', lid+'_'+details.ID);
                var li = $('<li/>')
                .text(details.ID)
                .appendTo(list);
                ul.appendTo(list);

                $.each(details,function(key,value) {
                    var li = $('<li/>')
                    .text(key+': '+value)
                    .appendTo(ul);
                });
            });
        }
    );
}

ご意見やご指導をいただければ幸いです。

4

2 に答える 2

3

私は業界の専門家ではありませんが、コードを改善すると思われることがいくつかあります。

  • 一般的な規則に従ってフォーマットします。適切なインデントがないと、コードが何をしているかを確認するのは困難です。
  • $("#"+lid)の代わりに使用して$("ul#"+lid)ください。属性は一意でなければならず、解析に時間がかかるだけなので、最初のulは明確化を追加しません。id
  • この場合、ローカルストレージを捨ててください。すべてのブラウザーでサポートされているわけではなく、私が知る限り、ここでは必要ありません。応答から返されたデータを直接使用するだけです。

コードを変更する方法は次のとおりです。

var printList = function(lid, options, get) {
    var promise = get(options);
    var list = $("#" + lid);

    promise.success(function(response) {
        var data = response;
        list.empty();
        $.each(data, function(item, details) {
            var ul = $('<ul/>').attr('id', lid + '_' + details.ID);
            var li = $('<li/>').text(details.ID).appendTo(list);
            ul.appendTo(list);
            $.each(details, function(key, value) {
                var li = $('<li/>').text(key + ': ' + value).appendTo(ul);
            });
        });
    });
}

編集:あなたのコードの編集されたバージョンは、マイナーなことを除いて、私にはうまく見えますul#。

于 2012-12-12T02:38:00.703 に答える
3

API をよりプロフェッショナルな外観にするためのいくつかの提案:

1 - 名前空間

名前空間を使用して、ページ上の他の関数定義と競合しない独自のスペースにコードをきちんとパッケージ化します。このようなものから始めます：

window.MyNamespace =  {};
MyNamespace.get = function(qid, pid) {
   //things
};
MyNamespace.anotherFunction = function() {
   //other stuff
}

コードが大きくなり始めたら、全体をクロージャーでラップできます。また、すべてをクラスとして定義し、一度インスタンス化してコードを整理し、インスタンス変数を保存して this.anotherFunction() を呼び出すこともできます。必要に応じて、それらの例も提供できます。

2 - API メソッドの署名

私が見たいもう 1 つのことは、関数 get(params) スタイルのコードではなく、関数への明示的な引数です。パラメーターを明示的にすると、コードが読みやすく理解しやすくなり、API を作成するときに特に重要なアドホック ハックを防ぐことができます。できるからといって、そうすべきだというわけではありません。

3 - 構成

ID や URL などを変数に移動して、コードを再利用して操作しやすくすることから始めてください。

一般に、Javascript 開発者は API ドキュメントを見る前にコードを見ることで有名なので、API 関数名と引数名をより表現力豊かで自己文書化するためにできることは何でも助けになります。

于 2012-12-12T02:54:55.513 に答える