2012-12-12 10 views
5

私は応答性の高いWebページ/ Webアプリケーション(モバイルデバイス)用の商用APIを初めて作成しています。初めてJavaScript APIを作成する

私は新しく、悲しいことに、Javascript(長い複雑な物語)の新人だけでなく、単独で働いています。

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); 
       }); 
      }); 
     } 
    ); 
} 

任意の入力や指導業界から誰かが「取得」コールの次のような形式に彼らの専門的な意見を提供することができれば

私は思っていました非常に高く評価されます。

+9

この種の質問は、[http://codereview.stackexchange.com/](http://codereview.stackexchange.com/) –

+0

に適しているかもしれません。ありがとう、私は確かにそれをチェックします –

+1

事実そのcodereviewが適切かもしれない、あなたのコードに本当の問題があります。 getSampleは非同期Ajax呼び出しを使用するため、関数から値を返すことはできません。コールバック関数を引数として持ち込むか、またはプロミスオブジェクトを返す必要があります。 – David

答えて

3

私は産業界からの専門的、自体ないんだけど、いくつかの私はあなたのコードを向上させるだろうと思う事があります:

  • フォーマットは、それが一般的な慣習に従いました。あなたのコードが適切な字下げなしで何をしているのかを見るのは難しいです。
  • $("ul#"+lid)の代わりに$("#"+lid)を使用してください。 idの属性は一意でなければならないため、冒頭のulには曖昧さがありません。解析するのに時間がかかります。
  • この場合、ローカルストレージを削除してください。これはすべてのブラウザでサポートされているわけではありません。私が知る限り、ここには必要ありません。レスポンスから返されたデータをそのまま使用してください。ここで

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

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); 
      }); 
     }); 
    }); 
} 

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

見ているあなたのAPIが少しよりプロフェッショナルにするいくつかのより多くの提案
+0

ありがとうございます。私は推奨される変更を行います。 .promise()。then()と.success()の機能の違いはありますか?またはトリックを行うか? –

+0

違いがありますが、この場合は機能的には同じだと思います。 –

3

1 -

を名前空間は、それが他の機能と競合しないだろう、それ自身の空間できちんとパッケージされ、あなたのコードを維持するために、名前空間を使用しますページ上の定義。これから始めるこのようなもの:

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

コードが大きくなると、ロット全体が閉じてしまうことがあります。また、すべてをクラスとして定義し、一度インスタンス化してコードをきれいにし、インスタンス変数を格納してthis.anotherFunction()を呼び出すことができます。あなたが好きであれば、私はそれらの例も提供することができます。

2 - APIメソッドのシグネチャ

私が見ることを好むもう一つは、明示的な関数の引数ではなく、関数のget(のparams)スタイルのコードです。パラメータを明示的にすることで、コードを読みやすく理解しやすくなり、APIを書くときに特に重要なアドホックハッキングを避けることができます。それはあなたができるはずがないからという理由だけである。

3 - コンフィグ

を再利用して動作するようにあなたのコードが少し簡単にするためにで開始する変数にIDとURLのようなものを動かすようにしてください。

一般的に、JavaScriptの開発者はAPIドキュメントを見る前にあなたのコードを見ることで有名です。そのため、API関数名や引数名をより表現力豊かで自己記述的にすることができます。

+0

1 - 私は実際にOPを編集する前に名前空間を持っていました。しかし、しばらくの間、私はあいまいさを許容するために頑丈な構造を作り出しながら、その使用を非難しました。 2 - 上記のように、これらの特定のgetメソッドはあいまいに呼び出されます。私はハードタイピングと思っていたので、printList()のようなUIコールでデリゲートを使用するのは難しくなります 3 - $ .ajax urlプロパティに "URL"変数が表示されます。これはスコープの外にあるconfig varセットです。 私は、ハードタイプの引数のアイデアを検討し、名前空間を再導入するエレガントな方法を見つけようとします:) –

関連する問題