Techniki grupowania kodu javascript

Question

Mam wiele funkcji i procedur obsługi zdarzeń, które są podzielone na wiele plików javascript, które są zawarte na różnych stronach w mojej witrynie.

Ze względu na wydajność chcę połączyć wszystkie te pliki w jeden plik, który jest globalny w całym serwisie.

Problem polega na tym, że moduły obsługi zdarzeń będą wywoływać elementy, które niekoniecznie będą istniały i te same nazwy funkcji.

Jest to przykład typowego pliku javascript ...

$(document).ready(function(){ 
    $('#blah').keypress(function(e){ 
     if (e.which == 13) { 
      checkMap(); 
      return false; 
     } 
    }); 
}); 

function checkMap() { 
    // code 
} 

function loadMap() { 
    // code 
} 

musiałbym oddzielić ten kod do obiektu, który nazywa się na tej konkretnej stronie.

Myślami mogę ponownie napisać to tak:

(function($) { 
    $.homepage = { 
     checkMap: function(){ 
      // code 
     }, 
     loadMap: function(){ 
      //code 
     } 
    }; 
})(jQuery); 

A potem na stronie, że wymaga mogłem zadzwonić $.homepage.checkMap() itp

Ale wtedy jak bym zadeklarować obsługi zdarzeń jak document.ready bez zawierania go w swojej własnej funkcji?

Każda rada dotycząca najlepszej praktyki byłaby świetna, dziękuję!

Answer 1

Myślę, że wszystko, czego potrzebujesz, to przestrzeń nazw dla ciebie aplikacji. Przestrzeń nazw jest prosty obiekt JSON, który mógłby wyglądać następująco:

var myApp = { 
    homepage : { 
     showHeader : function(){}, 
     hideHeader : function(){}, 
     animationDelay : 3400, 
     start : function(){} // the function that start the entire homepage logic 
    }, 
    about : { 
    .... 
    } 
} 

Można podzielić go w kilku plików:

1. MojaApl będzie zawierać MojaApl = {} obiekt, może z kilku przydatnych narzędzi, takich jak object.create lub co ty.
2. Strona główna.js będzie zawierała myApp.homepage = {...} ze wszystkimi metodami strony głównej.
3. Lista jest wyświetlana z pozostałymi stronami.

Pomyśl o tym jak o pakietach. Nie musisz używać $ jako głównego obiektu.

<script src="myapp.js"></script> 
<script src="homepage.js"></script> 
<-....-> 
<script> 
    myApp.homepage.start(); 
</script> 

Byłby sposób, w jaki będę korzystać z obiektu strony głównej.

Podczas kompresji z YUI, trzeba mieć:

<script src="scripts.min.js"></script> 
<script> 
    myApp.homepage.start(); 
</script> 

Answer 2

Aby upewnić się, że zrozumiałem cię poprawnie, masz jeden plik js z całym kodem, ale chcesz nadal mieć kontrolę nad tym, co jest wykonywane na określonej stronie?

Jeśli tak jest, to może Cię zainteresować Terrific JS framework. Pozwala na zastosowanie funkcji javascript do modułu. Moduł to komponent na twojej stronie internetowej, taki jak nawigacja, nagłówek, konwerter walut. Terrific JS skanuje dom i wykonuje js dla modułów, które znajdzie, więc nie musisz się martwić o wykonanie. Terrific JS wymaga konwencji nazewnictwa OOCSS do identyfikacji modułów. Nie jest to szybkie rozwiązanie twojego problemu, ale pomoże ci, jeśli chcesz poświęcić trochę czasu. Oto kilka linki mogą okazać się przydatne:

Hello World Przykład: http://jsfiddle.net/brunschgi/uzjSM/

blogpost na podstawie: http://thomas.junghans.co.za/blog/2011/10/14/using-terrificjs-in-your-website/

Answer 3

Przede wszystkim: W zależności od tego ile kod trzeba, należy wziąć pod uwagę, jeśli serwowanie całego kodu w jednym pliku jest naprawdę dobrym pomysłem. Zapisywanie żądań HTTP jest w porządku, ale jeśli załadujesz ogromny fragment kodu, z którego korzystasz 5% na jednej stronie, możesz być lepszy dzięki zachowaniu oddzielnych plików js (zwłaszcza w środowiskach mobilnych!). Pamiętaj, że możesz pozwolić przeglądarce na buforowanie tych plików. W zależności od tego, jak często zmienia się twój kod i jak wiele źródła się zmienia, możesz chcieć oddzielić swój kod na stabilne podstawowe funkcje i dodatkowe pakiety .js do specjalnych celów. W ten sposób możesz lepiej radzić sobie z ruchem i utrzymaniem ruchu.

Osadzanie funkcji w różnych obiektach to dobry pomysł, aby zapobiec niepotrzebnemu zanieczyszczaniu przestrzeni nazw i podnoszenia funkcji.

Wreszcie można uniknąć wywoływania niepotrzebnych obsługi zdarzeń przez:

Wprowadzenie jakiegoś typu strony, która pomoże Ci zdecydować, nazywając tylko niezbędne funkcje.

lub

sprawdzanie istnienia pewnych elementów jak ten if($("specialelement").length > 0){ callhandlers}

aby przyspieszyć swój JS, można użyć Google Closure Compiler. Minimalizuje i optymalizuje twój kod.

Answer 4

Używałbym czegoś takiego jak kompresor YUI, aby scalić wszystkie pliki w jeden plik min.js, który jest zminimalizowany. Jeśli szukasz wydajności, zarówno fuzja, jak i minizing to droga do zrobienia. http://developer.yahoo.com/yui/compressor/

Przykład: Javascript pliki wejściowe: jquery.js, ads.js support.js

run Yui z jquery.js, ads.js, support.js wyjście to do min.js

Pliki wyjściowe JavaScript: min.js

następnie użyj min.js w swoim kodzie HTML.

Answer 5

Oto prezentacja na temat sposobu, w jaki to zrobić w Yahoo (YUI): http://www.youtube.com/watch?v=HifKkERVtVs

Answer 6

Spójrz na tych facetów web site i związanych presentation. Strona internetowa jest ZAPROJEKTOWANA, aby pomóc Ci wybrać ramy.