2009-02-09 44 views
63

Korzystam z bardzo intensywnej aplikacji internetowej jquery opartej na ajax. Dochodzę do punktu, w którym prawie tracę kontrolę nad zdarzeniami, które powinny wywoływać określone działania, itp.Jak skonstruować mój kod javascript/jquery?

Jestem trochę pozostawiony z poczuciem, że moja struktura javascript jest zła, na bardziej podstawowym poziomie. W jaki sposób struktura kodu javascript/jquery, obsługa zdarzeń itp., Wszelkie porady dla programisty javascript dla początkujących.

Odpowiedz

33

AMDS!

Minęło trochę czasu, odkąd pierwsze odpowiedzi zostały wysłane na to pytanie i wiele się zmieniło. Przede wszystkim świat przeglądarki JS wydaje się zmierzać w kierunku AMD (definicja modułu asynchronicznego) w celu organizacji kodu.

Sposób, w jaki działa jest napisać swój kod jako moduły AMD, np:

define('moduleName', ['dependency1', 'dependency2'], function (dependency1, dependency2) { 
    /*This function will get triggered only after all dependency modules loaded*/ 
    var module = {/*whatever module object, can be any JS variable here really*/}; 
    return module; 
}); 

A potem moduły ładowane przy użyciu ładowarki AMD jak curl.js lub require.js etc, na Przykład:

curl(
    [ 
     'myApp/moduleA', 
     'myApp/moduleB' 
    ], 
).then(
    function success (A, B) { 
     // load myApp here! 
    }, 
    function failure (ex) { 
     alert('myApp didn't load. reason: ' + ex.message); 
    } 
); 

zalety:

  1. Musisz tylko umieścić pojedynczy element <script> na swojej stronie, który ładuje sam program ładujący AMD (niektóre z nich są dość małe).

  2. Po tym czasie wszystkie pliki JS zostaną pobrane automatycznie w asynchronicznym BRAKU BLOKADY! moda, a więc droga szybciej!

  3. Niezbędne moduły zostaną wykonane dopiero po wczytaniu zależności.

  4. Modułowy (co oznacza kod łatwiejszy do konserwacji i ponownego użycia).

  5. Zanieczyszczenie zmiennych globalnych może zostać całkowicie wyeliminowane, jeśli jest stosowane prawidłowo.

Szczerze mówiąc, kiedyś pojęcie ma kliknięciu w głowie, nigdy nie wrócić do starych sposobów.

P.S: jQuery rejestruje się jako moduł AMD począwszy od wersji 1.7.

Więcej informacji na AMDS:

+1

Wspaniale, popatrzę na to dla mojego następnego projektu. Dziękuję za dodanie do tego pytania znacznie później. –

25

Dla kodu JavaScript Znalazłem poniższe linki z Christian Heilmann niezbędnych

Ja też bardzo podobne metody opisanej przez Petera Michaux here

dla jQuery , Serdecznie polecam przeczytanie przewodników na Authoring d Znalazłem tutorial jQuery plugin patterns bardzo dobrej

+1

+1 za polecenie link do authoringu. Muszę dla początkujących. – bendewey

+1

Podobał mi się link do tworzenia (za co muszę Ci podziękować), ale muszę przyznać, że nie jestem wielkim fanem sposobu, w jaki wtyczki jQuery prezentują publiczne metody. Sądzę, że po prostu odkryłem sposób, w jaki Christian ujawnia pojedynczy obiekt publiczny lub czy publiczne uwagi Paula są bardziej czytelne. – Steerpike

+1

Christian właśnie wskazał mi inną opcję modułu, jeszcze bardziej elegancję: http://www.wait-till-i.com/2007/08/22/again-with-the-module-pattern-reveal- something -to-the-world/ –

1

Moi js pliki są zwykle konwencji nazewnictwa podobnego do tego:

  • xxx.utility.js
  • mypage.events.js
  • xxx. common.js
  • /lib/
  • /OS-DoNotDistribute/lib/

Gdzie

  • 'mypage' to nazwa html, aspx, php, etc.
  • "xxx" jest pojęciem. (Tj orders.common.js)
  • „użytkowych” oznacza to wielokrotnego użytku skrypt biblioteki (tj ajax.utility.js, controlfader.utility.js)
  • „wspólne” jest wielokrotnego użytku funkcjonalność dla tej aplikacji, ale nie wielokrotnego użytku całej inne projekty
  • „lib” jest podkatalogu dla jakichkolwiek zewnętrznych lub biblioteki skryptów
  • „OS-DoNotDistribute” jest podkatalogu do zapewnienia bez kodu licencjonowanego OS jest rozprowadzany jeśli aplikacja jest kiedykolwiek sprzedany.

Ponadto, dla ajax, mam specjalną konwencję nazewnictwa dla funkcji oddzwaniania, więc łatwo jest powiedzieć, jakie one są.

Nie jestem pewien, czy jest blisko tego, czego szukałeś, ale mam nadzieję, że to pomaga.

9

aby moje wydarzenia w kontroli używam Publish/subskrybować mechanizm

jQuery.subscribe = function(eventName, obj, method){ 
    $(window).bind(eventName, function() { 
     obj[method].apply(obj, Array.prototype.slice.call(arguments, 1)); 
    }); 
    return jQuery; 
} 

jQuery.publish = function(eventName){ 
    $(window).trigger(eventName, Array.prototype.slice.call(arguments, 1)); 
    return jQuery; 
} 

Oto przykład użycia

// a couple of objects to work with 
var myObj = { 
    method1: function(arg) { 
     alert('myObj::method1 says: '+arg); 
    }, 
    method2: function(arg1, arg2) { 
     alert(arg1); 
     //republish 
     $.publish('anEventNameIMadeUp', arg2); 
    } 
} 

var myOtherObj = { 
    say: function(arg){ 
     alert('myOtherObj::say says: ' + arg); 
    } 
} 



// you can then have all your event connections in one place 

//myObj::method2 is now listening for the 'start' event 
$.subscribe('start', myObj, 'method2'); 

//myOtherObj::say is now listening for the 'another' event 
$.subscribe('anotherEvent', myOtherObj, 'say'); 

//myObj::method1 is now listening for the 'anEventNameIMadeUp' event 
$.subscribe('anEventNameIMadeUp', myObj, 'method1'); 
//so is myOtherObj::say 
$.subscribe('anEventNameIMadeUp', myOtherObj, 'say'); 


// ok, trigger some events (this could happen anywhere) 
$.publish('start', 'message1', 'message2'); 
$.publish('anotherEvent', 'another message'); 
+2

Podczas wyzwalania niestandardowych zdarzeń jQuery działa, należy wziąć pod uwagę, jak wolno jest używać DOM jako źródło zdarzeń. Rozważ skorzystanie z [wtyczki PubSub] (http://higginsforpresident.net/js/static/jq.pubsub.js) po zapoznaniu się z [miarami PubSub przy użyciu zdarzeń pamięci w porównaniu do zdarzeń DOM jQuery] (http: // weblog.bocoup.com/publishsubscribe-with-jquery-custom-events). –

2
(function($, window, slice) 
{ 

    $.subscribe = function(eventName, obj, method) 
    { 
     $(window).bind(eventName, function() 
     { 
      obj[method].apply(obj, slice.call(arguments, 1)); 
     }); 
     return $; 
    }; 

    $.publish = function(eventName) 
    { 
     $(window).trigger(eventName, slice.call(arguments, 1)); 
     return jQuery; 
    }; 

})(jQuery, window, Array.prototype.slice); 
+0

@Akzhan, zobacz komentarze opublikowane na @meouw. Używanie zdarzeń DOM jest wolne w porównaniu do alternatywnej pamięci. –

2

Aby dodać do istniejących odpowiedzi, oto great post który obejmuje bardziej zaawansowane techniki, które budują na wzór modułu.

Gdy kod JavaScript osiągnie określony rozmiar, nieuchronnie chcesz go zmienić, dzieląc go na wiele plików/modułów/pod-modułów. Jeśli nie wiesz, jak to zrobić, używając wzorca modułu, ten artykuł jest niezbędny do przeczytania.

0

Możemy używać wzoru mvc w naszych aplikacjach jQuery javascript. (Backbone.js, knockout.js vs ....) to dojrzałe biblioteki, których możemy użyć do tego celu.

Powiązane problemy