Przeglądarka obiektów JavaScript?

Question

Niedawno miałem za zadanie udokumentować dużą aplikację JavaScript, którą od pewnego czasu utrzymuję. Tak więc mam dobrą znajomość systemu.

Ale ze względu na rozmiar aplikacji, prawdopodobnie zajmie to dużo czasu nawet przy wcześniejszej wiedzy o kodzie i samym kodzie źródłowym w formie nieskompresowanej.

Poszukuję więc narzędzi, które pomogłyby mi odkryć klasy i metody oraz ich relacje w JavaScript i jeśli to możliwe, udokumentować je po drodze, czy jest dostępna?

Coś takiego, jak przeglądarka obiektów w VS, byłoby fajne, ale można użyć dowolnych narzędzi, które pomogą mi w szybszym wykonaniu zadania.

Dzięki!

Answer 1

Firebug „s DOM tab pozwala przeglądać zawartość globalnej window obiektu, można sprawdzić konkretny obiekt wpisując inspect(whatever) w wierszu poleceń.

Nie będzie można go użyć do wykrywania relacji, chyba że instancja jednego obiektu przechowuje instancję powiązanego obiektu, ale jest to początek.

Można również użyć menu Opcje na karcie DOM, aby ograniczyć wyświetlane funkcje i właściwości zdefiniowane przez użytkownika, co powinno pomóc w zmniejszeniu bałaganu.

Answer 2

Firebug + uneval (obj) to prosta sztuczka, która często jest pomocna.

Answer 3

Spójrz na Aptana, mają one zarys, który może pomóc ci określić, jakie przedmioty i ich relacje są czasem.

Answer 4

Nie wiemy, czy ta aplikacja JS została zaprojektowana do pracy w przeglądarce internetowej ...
Jeśli tak, zgodnie z zaleceniami, Firebug (rozszerzenie przeglądarki Firefox) jest doskonały do ​​debugowania JS i eksplorowania Dom.
Po stronie IE, masz kilka narzędzi, takich jak IEDocMon, Web Accessibility Toolbar (to więcej niż jego nazwa) lub Fiddler (niezwiązane z twoim pytaniem, ale wciąż dobrym narzędziem do posiadania).

Answer 5

Firebug (Firefox)/Dragonfly (Opera) może pomóc oglądanie obiektów w czasie rzeczywistym

Aptana/JS/UML (Eclipse) może pomóc w relacjach obiektów

Answer 6

Widzę wielu ludzi mówiących o badaniu DOM w Firebug. Jednak z twojego pytania wygląda na to, że chcesz coś takiego jak jsdoc? po prostu dodaj informacje o typie i klasie poprzez komentarze, a jsdoc generuje dokumentację, w tym relacje klas. http://jsdoc.sourceforge.net/

Google ma widełki to z dodatkowymi funkcjami http://code.google.com/p/jsdoc-toolkit/

UPDATE: To nie jest widelec, to przepisać przez autora, który napisał JSDoc pierwotnie jako skrypt Perl. Ma na celu bycie bardziej elastycznym, aby można było używać dowolnego stylu dziedziczenia/zdarzeń/właściwości. Inną cechą jest to, że pozwala na modyfikowanie szablonów używanych do generowania kodu HTML w znacznie prostszy sposób.

Answer 7

To jest stare pytanie, ale pozwól mi na nie odpowiedzieć.

1. Użyj IDE. Zintegrowane środowiska programistyczne zostały stworzone do szybkiego przechodzenia między kodami. Kluczowymi funkcjami, które będziesz wykorzystywać podczas eksploracji, będzie przeglądanie struktury pliku lub konspektu, przeskakiwanie do deklaracji lub użycia oraz przeszukiwanie całego projektu dla wszystkich wystąpień ciągu znaków. Jeśli korzystasz z WebStorm, skonfiguruj niestandardowy zakres dla plików z wyjątkiem plików wygenerowanych i pliku node.js, aby ułatwić wyszukiwanie.

2. Uruchom "npm la | less ', który zawiera listę wszystkich twoich zależnych modułów z jednym opisem linii. Być może nigdy nie widziałeś pliku moment.js i nigdy nie musisz czytać dokumentacji, ale warto poświęcić czas na przeczytanie podsumowania w jednym wierszu. Jeśli potrzebujesz więcej informacji na temat narzędzia niż jedno podsumowanie linii, wyszukaj termin na SlideShare. Slajdy są szybsze niż ReadTheDocs.

3. Dokumentuj trochę, jak idziesz. Jestem fanem zmuszania ludzi do ciągłego korzystania z notebooków, a nie z zadrapania papieru. Ponadto uważam, że dodanie komentarza do jednego wiersza do każdego pliku JavaScript jest opłacalne. Chcesz wiedzieć, co powinno znajdować się w każdym katalogu twojego projektu. Polecam również tworzenie glosariusza dokładnego znaczenia terminów domeny w twoim systemie, np. Co oznacza "praca" w twoim systemie.

4. Wreszcie, być może trzeba po prostu uruchomić aplikację w debugerze i rozpocząć przechodzenie przez jej część. Większość dużych projektów zyskała na wartości od programistów o różnych poziomach umiejętności i motywacjach.

Jesteś mające na poziomie „koncepcyjnym integralności” (by zacytować Yourdon) lub do „grok” oprogramowanie (zacytować Heinlien). Zajmuje to trochę czasu, nie można go obejść i można to zrobić skutecznie.