Jak uczynić kod javascript łatwym w utrzymaniu

Question

Wszystko, pracuję nad wysoce interaktywną aplikacją webową, która będzie wymagać dużej ilości jquery lub kodu js, I stwierdzam, że mój kod staje się trochę trudny do utrzymania i nie jest aż tak czytelny. Czasami nawet autor nie może znaleźć określonego kodu.

Do tej pory zrobiłem dla jasnego kodu poniżej.

1. Jednym z elementów w jednym pliku js js. (Np. CustomTab.js jest składnikiem zakładka w moim app.)
2. Korzystanie z Templete do generowania HTML składnika w przeliczeniu na JSON.
3. Korzystanie z interfejsu Jquery.
4. Nie rzucający się w oczy JavaScript.

Czy są jeszcze jakieś uwagi, na które trzeba zwrócić uwagę? W każdym razie, Każda sugestia lub zalecana technika tworzenia biblioteki js/framework łatwa do miantanance jest uzasadniona, dziękuję.

Answer 1

Mogę zaproponować użycie wzoru modułu razem z RequireJS do uporządkowania kodu JavaScript. Do produkcji będziesz mógł użyć optymalizatora RequireJS, aby zbudować moduły w jednym pliku JavaScript.

Jeśli spodziewasz się, że Twoja aplikacja po stronie klienta będzie ogromna, skorzystaj z niektórych ram JavaScript MVC, takich jak Backbone.js, razem z usługą RESTful po stronie serwera.

Answer 2

Używam tego wzoru przestrzeni nazw dla moich bibliotek:

MyLibrary.ListView.js:

var MyLibrary = MyLibrary || {}; 

MyLibrary.ListView = { 

    doSomethingOnListView: function() { 
     ... 
     return this; 
    }, 

    doSpecialThing: function() { 
     ... 
     return this; 
    }, 

    init: function() { 

     // Additional methods to run for all pages 
     this.doSomethingOnListView(); 

     return this; 
    } 
}; 

Niezależnie strona tego potrzebuje:

<script type="text/javascript" src="/js/MyLibrary.ListView.js"></script> 
<script type="text/javascript"> 
$(function() { 
    MyLibrary.ListView 
     .init() 
     .doSpecialThing(); 
}); 
</script> 

Możesz metody nawet jeśli pewna łańcuchowe strona wymaga dodatkowej funkcji.

Answer 3

Obecnie pracuję również nad ramami JS dla mojej firmy. Co robię, używam elementów OOP dla JS. Innymi słowy implementuję podobny kod do bibliotek C# (nie podobne, symulowanie będzie poprawnym słowem). Jako przykład w języku C# używasz Microsoft.Window.Forms, więc mogę użyć JSOOP i użyć metody rozszerzania i nadpisywania, aby utworzyć ten sam scenariusz. Jeśli jednak zajdziesz daleko w projekcie, konwersja kodu JS do JSOOP będzie czasochłonna.

używać JSLint, to sprawdzi twój kod i doprowadzi do czytelnego, przyjaznego skryptowi kodu. Chociaż JSLint jest bardzo restrykcyjny, więc możesz używać JSHint również.

używanie oddzielnego pliku dla każdego komponentu to dobry pomysł, że robię to również.

Jeśli chcesz, możesz pobrać wersję deweloperów jQuery i możesz mieć ogólne pojęcie o tym, jak stworzyli framework. Nauczyłem się wielu rzeczy patrząc na framework jQuery!

Answer 4

To jest dokładnie to samo pytanie, które zadaję sobie za każdym razem. Myślę, że jest kilka sposobów na łatwe utrzymanie kodu.

• Współuczestniczyć w projektach open source javascript i zrozumieć, w jaki sposób rozwiązały ten problem.Myślę, że możesz zebrać unikalne rozwiązania z każdego projektu, a wspólna część struktury projektów odpowie na twoje pytanie dotyczące konserwacji.

• zużyć rozwiązania jak backbone, knockout, ember lub angularjs jeśli się nie mylę kątowa nie daje Ci strukturę, ale zapewni Państwu potężne narzędzie do tworzenia stron z mniej kodu. Sprawdź także todomvc dla gotowych rozwiązań.

• Czytaj książki i spróbuj stworzyć strukturę dla swoich potrzeb. To będzie trudne i długie, ale wynik (może kilka lat później :)) będzie niesamowity.