#javascript #node.js
#javascript #node.js
Вопрос:
Я относительно новичок в JavaScript и пытаюсь найти способ получить хорошее общее представление о проектах JavaScript, фреймворках и т.д.. Например, когда я смотрю на исходный код на основе JavaScript на Github, я хотел бы получить одностраничный снимок зависимостей между html, css и различными файлами .js, для которых требуются дополнительные файлы (модули) js, вместо просмотра дерева исходного кода и открытия отдельных файлов. То, что я ищу, — это либо инструмент построения диаграмм объектов, либо что-то вроде «файловой диаграммы».
Есть ли в природе инструмент, который уже делает это? (и, да, я уже пробовал это в Google)
(Раньше я использовал инструмент в мире Windows для отслеживания DLL, который представляет собой аналогичную концепцию.)
Комментарии:
1. Я нашел Colony, который наиболее близок к тому, что я искал. github.com/hughsk/colony
Ответ №1:
https://github.com/nodejitsu/require-analyzer поможет вам частично достичь этого.
Можно также реализовать анализатор зависимостей файлов, если вы ищете более полный анализ html / шаблонов с помощью этих двух:
Ответ №2:
С помощью Firebug вы можете видеть файлы, запрошенные каждой страницей, ответ сервера и вы можете фильтровать их по типу. Представление HTML позволяет увидеть всю страницу, включая связанный контент js / css. Я не думаю, что это именно то, что вы ищете, но я нахожу это полезным для такого рода вещей.
Ответ №3:
вот несколько кодов букмарклета, которые могли бы помочь (взяты из https://www.squarefree.com/bookmarklets/webdevel.html
просмотреть таблицу стилей: javascript:s=document.getElementsByTagName(‘STYLE’); ex=document.getElementsByTagName(‘LINK’); d=window.open().document; / установить base href /d.open();d.close(); b=d.body; function trim(s){return s.replace(/^s*n/, «).replace(/s*$/, «); }; function iff(a,b,c){return b?a b c:»;}function add(h){b.appendChild(h);} function makeTag(t){return d.createElement(t);} function makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text)); return t;} add(makeText(‘style’, ‘iframe{width:100%;height:18em;border:1px solid;’)); add(makeText(‘h3’, d.title=’Style sheets in ‘ location.href)); for(i=0; i
просмотр скриптов: javascript:s=document.getElementsByTagName(‘СКРИПТ’); d=window.open().document; /140681 /d.open();d.close(); b=d.body; function trim(s){return s.replace(/^s*n/, «).replace(/s*$/, «); }; function add(h){b.appendChild(h);} function makeTag(t){return d.createElement(t);} function makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text)); return t;} add(makeText(‘style’, ‘iframe{width:100%;height:18em;border:1px solid;’)); add(makeText(‘h3’, d.title=’Scripts in ‘ location.href)); for(i=0; i