2012-12-12 17 views
5

Po raz pierwszy tworzę komercyjny interfejs API dla responsywnych stron/aplikacji internetowych (urządzeń mobilnych).Tworzenie JavaScript API po raz pierwszy

jestem nowy i, niestety, działa sam, jak nowy na Javascript (długa skomplikowana historia).

Zastanawiam się, czy ktoś z branży może zaoferować swoją opinię zawodową w następującym formacie z „get” zaproszenia: Zaproszenie

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

Funkcja:

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

dowolnego wejścia lub naprowadzania będzie bardzo doceniony.

+9

Tego rodzaju pytanie może lepiej pasować do [http://codereview.stackexchange.com/](http://codereview.stackexchange.com/) –

+0

Dzięki, na pewno to sprawdzę –

+1

Oprócz tego ten widok codere może być odpowiedni, masz prawdziwy problem z kodem. GetSample używa asynchronicznego wywołania Ajax, więc nie można zwrócić wartości z funkcji. Będziesz musiał wywołać funkcję wywołania zwrotnego jako argument lub zwrócić obiekt obietnicy. – David

Odpowiedz

3

Nie jestem profesjonalistą z branży, per se, ale jest kilka rzeczy, które myślę, że będzie poprawić swój kod:

  • formatowanie zgodnie ze wspólnymi umowami. Trudno zobaczyć, co robi twój kod bez odpowiedniego wcięcia.
  • Po prostu użyj $("#"+lid) zamiast $("ul#"+lid). Początkowo ul nie dodaje żadnego ujednolicenia, ponieważ atrybuty id muszą być unikatowe, a jedynie parsowanie zajmuje więcej czasu.
  • Ditch localstorage w tym przypadku. Nie jest obsługiwany we wszystkich przeglądarkach i o ile wiem, nie potrzebujesz go tutaj. Wystarczy bezpośrednio użyć danych zwróconych z odpowiedzi.

Oto jak chciałbym zmienić swój kod:

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: Edytowany wersja kodu wygląda dobrze dla mnie, z wyjątkiem drobnych ul# rzeczy.

+0

Dziękuję. Wprowadzę zalecane zmiany. Czy istnieje prawdziwa różnica między funkcjami .promise(). Then then() i .success()? A może to zrobisz? –

+0

Istnieje różnica, ale w tym przypadku są one funkcjonalnie identyczne. –

3

Jeszcze kilka sugestii, aby Państwa API odrobinę bardziej profesjonalny wygląd:

1 - Przestrzenie nazw

używać przestrzeni nazw, aby utrzymać swój kod pakowane starannie w jego własnej przestrzeni, gdzie nie będzie kolidować z innej funkcji definicje na stronie. Coś w tym stylu na początek:

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

Jeśli twój kod zacznie się powiększać, możesz zawinąć cały obiekt w zamknięciu. Możesz także zdefiniować go jako klasę, a następnie utworzyć instancję, aby uczynić kod bardziej uporządkowanym i pozwolić na przechowywanie zmiennych instancji i wywołanie this.anotherFunction(). Mogę podać przykłady tych również, jeśli chcesz.

2 - metoda API podpisy

Inną rzeczą Wolę zobaczyć jest jednoznacznych argumentów do funkcji zamiast funkcji get (params) Kod stylu. Wykonywanie wyraźnych parametrów sprawia, że ​​kod jest łatwiejszy do odczytania, a także zniechęca do hakowania ad-hoc, co jest szczególnie ważne przy pisaniu API. Jest to sprawa tylko dlatego, że nie może to oznaczać, że powinieneś.

3 - Config

Spróbuj przenieść rzeczy jak identyfikatorów i adresów URL do zmiennych zacząć, aby Twój kod nieco łatwiejsze do ponownego użycia i pracować.

Ogólnie rzecz biorąc, programiści JavaScript słyną z tego, że patrzą na twój kod, zanim przejrzą twoje dokumenty API, więc wszystko, co możesz zrobić, aby ułatwić im tworzenie nazw funkcji API i nazw argumentów, było bardziej wyraziste i samodzielne.

+0

1 - Rzeczywiście miałem przestrzenie nazw przed edycją OP. Jednak na razie wycofałem ich użycie, a ja wypracowałem solidną strukturę, która pozwoliła na niejednoznaczność. 2 - Jak wspomniano powyżej, te konkretne metody get nazywa się niejednoznacznie. Doszedłem do wniosku, że pisanie na sztywno argumentów utrudni korzystanie z delegatów w wywołaniach interfejsu użytkownika, takich jak printList() 3 - Zobaczysz zmienną "URL" w właściwości url $ .ajax, która jest konfiguracją var ustawioną poza zakresem . Zastanowię się nad pomysłami pisania na klawiaturze i spróbuję znaleźć elegancki sposób na ponowne wprowadzenie przestrzeni nazw :) –

Powiązane problemy