Javascript: jak zrozumieć wszystkie frameworki i filozofie projektowania?

Jestem użytkownikiem jQuery (i niektórych jego drobnych pluginów) od jakiegoś czasu. Kod Javascript, który opracowałem przez lata, można opisać najlepiej jako... bałagan. Używał mnóstwo globalnych zmiennych i funkcji tu i ówdzie, nie używał standardowych sposobów porządkowania kodu,ani żadnych wzorców projektowych.

Obecnie buduję nową wersję strony internetowej i ukończyłem backend z szablonami Pear::MDB2 i Smarty. Na reszta to tylko homebrew PHP z niektórymi klasami.

Teraz jestem w punkcie, w którym dodam warstwę Javascript na górze strony, aby poprawić łatwość obsługi niektórych funkcji. (upewniając się, że wszystko rozkłada się wdzięcznie) chcę pisać lepiej, czystsze, bardziej zorganizowane Javascript niż kiedyś, więc zrobiłem trochę badań. Czytałem Javascript Stefanova, aby lepiej zrozumieć niektóre pojęcia, o których znałem tylko luźno (prototypy, konstruktory itp.) jako cóż. Teraz utknąłem w punkcie, w którym zastanawiam się, jakich frameworków Javascript powinienem używać i jak to wszystko zorganizować.

Po przeprowadzeniu moich badań zrozumiałem Cappuccino & Objective-J i Sproutcore nie były tym, czego szukałem. Cytuję Cappucino o stronie:

Cappuccino nie jest przeznaczony do budowy stron internetowych, ani do bardziej "dynamicznego"tworzenia istniejących stron. Uważamy, że cele te są zbyt odległe od celów rozwoju aplikacji, aby mogły być dobrze obsługiwane przez jedną ramę. Projekty takie jak Prototype i jQuery są doskonałe w tych zadaniach

Więc to jest to. Potem dowiedziałem się o Coffee Script , który jest bardziej "kompilatorem" jeden do jednego i nie pomoże mi w rzeczywistej organizacji mojego kodu.

Natknąłem się również na kilka artykułów, które dają wskazówki:

Dowiedziałem się też o kręgosłupie.js, Shoestring, JavaScriptMVC, Google Loader, narzędzia jQuery, jQuery UI . Nie wiem, co z tym zrobić... Rzeczy, które wiem:

  • nie chcÄ™ inwestować zbyt wiele czasu w naukÄ™ czegoÅ› zbyt zÅ‚ożonego, chcÄ™, aby rzeczy byÅ‚y proste i elastyczne jak najbardziej (dlatego nie używam na przykÅ‚ad Symfony na backendzie), ale czyste i zorganizowane.
  • chcÄ™ używać jQuery, pytanie brzmi, co powinienem z nim używać? (to też jest zgodne)

W tej chwili używam narzędzi jQuery i jQuery i "organizuję" to wszystko w prostej przestrzeni nazw / dosłownym obiekcie za pomocą prostych właściwości i metod, a także, ponieważ strona jest zlokalizowana, planuję użyć prostego vsprintf (Jak to robię w backendzie) z parami key:value załadowanymi z dosłownego obiektu dostarczonego przez backend. JavaScriptMVC wydaje się interesujące, ale obawiam się, że przyniosłoby to zbyt wiele złożoności dla projektu, który jest dość mały. Tu potrzebuję twojej rady! Z góry dziękuję.

Author: Sisyphus, 2011-06-02

4 answers

Ok, moja próba odpowiedzi:

nie ma "najlepszego" sposobu, aby to zrobić.Teraz wiesz, co tam jest i myślę, że możesz mieć preferencje dla siebie, czego chcesz. W takim przypadku wybierz framework i naucz się go od podszewki. (przepraszam, że pękam, ale każdy framework ma krzywą uczenia się, niektóre strome, niektóre bardzo łatwe, ale w końcu, aby dobrze go używać, musisz w to zainwestować. Po prostu to zrób, nie pożałujesz).

Oczywiście preferujesz czysty kod, więc możesz wziąć pod uwagę pewne kwestie. Mówisz też, że preferujesz jQuery, co jest w porządku, ale są pewne ograniczenia(jak również wskazano w linku dostarczonym przez eskimoblood).

Istnieje kilka ciekawych wykładów / i samouczków z poradami na temat struktury kodu w jQuery:

Niektóre przewodniki po stylach:

Narzędzia do sprawdzania kodu

Prace Standardowe (javascript)

Może być więcej.. być może więcej osób może wnieść swój wkład, ale myślę również, że już prawie dotarłeś do końca tego, czego możesz się nauczyć, zanim pobrudzisz sobie ręce. Wiele z tych przewodników jest napisanych w bardzo ogólny sposób, ale interesujące jest to, że javascript jest wywoływany w wielu konkretnych sytuacjach. Przydałoby się po prostu wrzucić jakiś kod, który uważasz, że "bałagan", a my pomożemy Ci wymyślić, jak zrobić to lepiej. Powodzenia!

 5
Author: Arend,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-04 08:26:44

Powinieneś obejrzeć film i przeczytać linki w tym artykule a następnie ponownie zadać sobie pytanie, czy jquery jest właściwym narzędziem. Może użyjesz dojo, które jest znacznie lepsze dla większych projektów lub przyjrzysz się kręgosłupowi i gdzie możesz zostać z jquery. W końcu oba są bardziej "javascriptowe" niż coś jak sproutcore, cappuciono czy nawet GWT. A także o wiele łatwiejsze do zrozumienia, gdy pochodzisz z jquery.

 2
Author: Andreas Köberle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-02 14:50:10

Jednym z frameworków, który należy wziąć pod uwagę, jest zdecydowanie ReactJS z Facebook. Ten framework jest dość sprytny pod wieloma względami.

Pierwszą rzeczą, którą musisz wiedzieć jest to, że jest to framework widoku. Może być używany po stronie serwera do wstępnego renderowania stron, ale naprawdę świeci po stronie klienta. Ponieważ jest to framework widoku, może być używany z szkieletem lub dowolnym innym frameworkiem"back-front".

Jednym z głównych punktów reakcji jest jej szybkość. Przechowuje wirtualny DOM w pamięci i zwirtualizuj wszystkie zdarzenia stron internetowych. Tak więc zdarzenie virtuals służy do utrzymywania agnostyki przeglądarek zdarzeń.

Wirtualny DOM sprawia, że programowanie jest dynamiczną stroną tak, jakbyś programował starą statyczną stronę internetową. Możesz po prostu strzelić cały HTML, aby renderować do silnika widoku (tak jakbyś "ponownie renderował" całą stronę) i będzie zarządzać operacjami DOM. Robi różnicę między nowym wirtualnym DOM i bieżącym wirtualnym DOM i wstawia tylko węzły, które muszą być wstawione. Tędy. zmniejszasz liczbę operacji DOM i tym samym znacznie zwiększasz szybkość renderowania.

Dobrym miejscem na początek jest ten tutorial , który pokazuje, jak używać "Flux" (przepływ sieci zaprojektowany przez Facebook dla swojej strony) w celu realizacji aplikacji Todo!

 1
Author: Hugo Dozois,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-24 15:53:29

Czy założysz stronę, która będzie intensywnie korzystać z Ajaksa? Wtedy możesz użyć kręgosłupa.js, aby zorganizować Ci JS po stronie klienta.

Przeczytaj ten artykuł w celach informacyjnych: http://www.codethinked.com/building-epic-win-with-backbone-js

 0
Author: OnesimusUnbound,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-02 14:42:36