Использование лучшей практики Javascript

Question

Я ищу наилучший практический опыт использования внешнего частного файла Javascript. У меня есть проект со многими различными HTML-файлами. Мой вопрос в том, что является лучшей практикой, состоит в том, чтобы иметь 1 .js-файл для всех HTML-страниц или должен ли я иметь отдельный файл .js для каждого HTML-кода? Я все еще не понимаю, возможно ли вообще иметь файл .js для разных HTML-страниц, как я могу использовать возможности DOM?

Answer 1

Это довольно широкий вопрос, и это действительно зависит от того, как вы структурируете свой проект.

Этот день и возраст, мой общий совет: структурируйте его в любым способом, который облегчает работу с, но при создании/развертывании/в любом случае слияние всех файлов и минимизация результата.

Это обеспечивает легкую разработку для вас и максимальную производительность для конечного пользователя. Кроме того, не забудьте о соответствующих заголовках кеширования и отметке времени в URL-адресе для этого JS-файла.

Этот совет применим и к файлам CSS.

Answer 2

Я согласен с ответом @ Vilx, но я подозреваю, что вопрос немного более простой, чем этот.

На каждой странице HTML вы можете просто ссылаться на скрипт, содержащий функции и переменные на сайте, и, возможно, также уникальный для этой страницы сценарий. Например, если вы имели специальные функции на странице Обо мне, вы могли бы связать с ней нравится:

<!-- Global functions and variables --> 
<script type="text/javascript" src="/scripts/global.js"></script> 

<!-- Functions and variables that only apply to this page --> 
<script type="text/javascript" src="/scripts/about-me.js"></script> 

Таким образом, вы по-прежнему есть свои функции полезности в global.js, но контролировать конкретную страницу с помощью about-me.js.

Еще один способ, которым вы могли бы это сделать, - сохранить все ваши JavaScript в одном файле, но выполнять соответствующие функции inline на соответствующей странице.

Main.js

function homepage(){ 
    // do things specific to the homepage 
} 

function aboutMe(){ 
    // do things specific to about me 
} 

function contactUs(){ 
    // do things specific to the contact page 
} 

О-Me.html

<!-- Global functions and variables --> 
<script type="text/javascript" src="/scripts/main.js"></script> 
<script> 
    // Execute the relevant function defined in main.js 
    aboutMe(); 
</script> 

Лучший способ действительно то, что подходит для вашего приложения. Если это большое сложное приложение, тогда вам понадобятся отдельные файлы, но вы, вероятно, захотите объединить их перед публикацией проекта. Если это небольшой персональный проект, тогда нет никакого вреда в просто структурировании вашего проекта так, как вы считаете нужным.