Выносим js и css во внешние файлы
В этом уроке мы разберём, как разделять код на отдельные файлы, чтобы каждый из них отвечал только
за свою часть. Это позволяет соблюдать Принцип единой ответственности (Single Responsibility
Principle):
- Верстка — в
index.html
- Стили — в
index.css
- JavaScript логика — в
index.js
Наш код до рефакторинга имеет такой вид:
<input
value="Dmitry"
title="Enter your name"
class="first-name-input default-input"
id="first-name"
/>
<input value="Kuzyuberdin" class="last-name-input default-input" id="last-name" />
<input value="Minsk city" class="address-input default-input" id="address" />
<select id="cities">
<option>Kiev</option>
<option>Minsk</option>
<option selected="selected">Moscow</option>
</select>
<textarea id="hobbies">JS, CSS, HTML</textarea>
<div id="avatar-wrapper">
<img
id="avatar"
src="https://pp.userapi.com/c631924/v631924026/44d7/AiFmeYaLmTc.jpg"
alt="аватар"
/>
</div>
<script>
// тому что слева, мы присваиваем то, что справа
var firstNameId = "first-name"
// = это оператор присваивания ... то есть, то что слева (переменная), ей присваивается значения слова
var firsNameEl = document.getElementById(firstNameId)
var lastNameId = "last-name"
var lastNameEl = document.getElementById(lastNameId)
var addressId = "address"
var addressEl = document.getElementById(addressId)
var citiesId = "cities"
var citiesEl = document.getElementById(citiesId)
var hobbiesId = "hobbies"
var hobbiesEl = document.getElementById(hobbiesId)
var avatarWrapperId = "avatar-wrapper"
var avatarWrapperEl = document.getElementById(avatarWrapperId)
var avatarId = "avatar"
var avatarEl = document.getElementById(avatarId)
firsNameEl.value = "Andrey"
lastNameEl.className = "last-name-input default-input error-input"
lastNameEl.title = "Wrong last name"
avatarEl.src =
"http://is1.mzstatic.com/image/thumb/Purple128/v4/a6/05/ca/a605ca8d-ff54-ccf7-76ed-233f4cd5331f/source/175x175bb.jpg"
avatarEl.title = "I am avatar"
citiesEl.value = "Minsk2"
hobbiesEl.value = "I have not interests"
avatarWrapperEl.innerHTML = "<ul id='list'><li>1</li><li>2</li></ul>"
var listId = "list"
var numberList = document.getElementById(listId)
window.alert(numberList.innerHTML)
</script>
<style>
.default-input {
border: green 5px solid;
padding: 5px;
}
.error-input {
border-color: red;
}
</style>
1. Создаем новые файлы для стилей и логики
1.1. Создаем файл для стилей
Для наших стилей создаем файл index.css и переносим всё содержимое из тега style в этот файл
.default-input {
border: green 5px solid;
padding: 5px;
}
.error-input {
border-color: red;
}
1.2. Создаем файл для JS кода
Весь JavaScript код переносим из тега script в файл index.js
// тому что слева, мы присваиваем то, что справа
var firstNameId = "first-name"
// = это оператор присваивания ... то есть, то что слева (переменная), ей присваивается значения слова
var firsNameEl = document.getElementById(firstNameId)
var lastNameId = "last-name"
var lastNameEl = document.getElementById(lastNameId)
var addressId = "address"
var addressEl = document.getElementById(addressId)
var citiesId = "cities"
var citiesEl = document.getElementById(citiesId)
var hobbiesId = "hobbies"
var hobbiesEl = document.getElementById(hobbiesId)
var avatarWrapperId = "avatar-wrapper"
var avatarWrapperEl = document.getElementById(avatarWrapperId)
var avatarId = "avatar"
var avatarEl = document.getElementById(avatarId)
firsNameEl.value = "Andrey"
lastNameEl.className = "last-name-input default-input error-input"
lastNameEl.title = "Wrong last name"
avatarEl.src =
"http://is1.mzstatic.com/image/thumb/Purple128/v4/a6/05/ca/a605ca8d-ff54-ccf7-76ed-233f4cd5331f/source/175x175bb.jpg"
avatarEl.title = "I am avatar"
citiesEl.value = "Minsk2"
hobbiesEl.value = "I have not interests"
avatarWrapperEl.innerHTML = "<ul id='list'><li>1</li><li>2</li></ul>"
var listId = "list"
var numberList = document.getElementById(listId)
window.alert(numberList.innerHTML)
Теперь файл index.html содержит только разметку:
<input
value="Dmitry"
title="Enter your name"
class="first-name-input default-input"
id="first-name"
/>
<input value="Kuzyuberdin" class="last-name-input default-input" id="last-name" />
<input value="Minsk city" class="address-input default-input" id="address" />
<select id="cities">
<option>Kiev</option>
<option>Minsk</option>
<option selected="selected">Moscow</option>
</select>
<textarea id="hobbies">JS, CSS, HTML</textarea>
<div id="avatar-wrapper">
<img
id="avatar"
src="https://pp.userapi.com/c631924/v631924026/44d7/AiFmeYaLmTc.jpg"
alt="аватар"
/>
</div>
<script></script>
<style></style>
2. Почему сайт "сломался" после разделения
До рефакторинга у нас был такой вид сайта:
Но после того как мы вынесли стили и логику в соответствующие файлы, мы получили такой вид:
По факту мы видим, что JavaScript не выполнился и стили не применились. Это произошло потому что мы
вынесли их в отдельные файлы, но в HTML разметке не указали эти файлы — HTML не знает о их
существовании. Поэтому следующим шагом будет подключение файлов в HTML.
3. Подключаем файлы в index.html
Подключим наш JavaScript через тег script. До этого мы писали код внутри тега, но также можно
передать параметр src и импортировать наш файл, который мы создали внутри папки с файлом
index.html. Соответственно, мы можем прописать путь к файлу, просто написав название файла
index.js.
3.1. Подключаем JavaScript файл
<input
value="Dmitry"
title="Enter your name"
class="first-name-input default-input"
id="first-name"
/>
<input value="Kuzyuberdin" class="last-name-input default-input" id="last-name" />
<input value="Minsk city" class="address-input default-input" id="address" />
<select id="cities">
<option>Kiev</option>
<option>Minsk</option>
<option selected="selected">Moscow</option>
</select>
<textarea id="hobbies">JS, CSS, HTML</textarea>
<div id="avatar-wrapper">
<img
id="avatar"
src="https://pp.userapi.com/c631924/v631924026/44d7/AiFmeYaLmTc.jpg"
alt="аватар"
/>
</div>
<!--Подключаем через src и вписываем путь к файлу-->
<script src="index.js"></script>
Посмотрим, что у нас получилось. Теперь мы видим, что подгружаются наши файлы:
- подгружается
index.html
- запрашиваем изображение и получаем
200 код, что сообщает нам об успешном запросе
- поскольку код в
HTML выполняется сверху вниз, у нас index.js выполняется немного позже
- затем запрашиваем изображение по новой ссылке, которую мы определили в
index.js, но изображение
мы не увидим, так как мы заменили изображение на список
3.2. Подключаем CSS файл
Для подключения index.css нам нужно использовать мета тег link в index.html
<input
value="Dmitry"
title="Enter your name"
class="first-name-input default-input"
id="first-name"
/>
<input value="Kuzyuberdin" class="last-name-input default-input" id="last-name" />
<input value="Minsk city" class="address-input default-input" id="address" />
<select id="cities">
<option>Kiev</option>
<option>Minsk</option>
<option selected="selected">Moscow</option>
</select>
<textarea id="hobbies">JS, CSS, HTML</textarea>
<div id="avatar-wrapper">
<img
id="avatar"
src="https://pp.userapi.com/c631924/v631924026/44d7/AiFmeYaLmTc.jpg"
alt="аватар"
/>
</div>
<!--Подключаем через src и вписываем путь к файлу-->
<script src="index.js"></script>
<!--Подключаем стили через тег link и указываем необходимые параметры-->
<link rel="stylesheet" type="text/css" href="index.css" />
Теперь стили снова отображаются как и прежде
4. Создаем папки для файлов
Для структуры и большого количества файлов важно структурировать их по папкам вот пример когда мы
можем создать для многих файлов для примера для js одну папку и для css файлов другую папку
Обратите внимание: если файлы лежат в папках, путь подключения нужно указать с учётом папки
<input
value="Dmitry"
title="Enter your name"
class="first-name-input default-input"
id="first-name"
/>
<input value="Kuzyuberdin" class="last-name-input default-input" id="last-name" />
<input value="Minsk city" class="address-input default-input" id="address" />
<select id="cities">
<option>Kiev</option>
<option>Minsk</option>
<option selected="selected">Moscow</option>
</select>
<textarea id="hobbies">JS, CSS, HTML</textarea>
<div id="avatar-wrapper">
<img
id="avatar"
src="https://pp.userapi.com/c631924/v631924026/44d7/AiFmeYaLmTc.jpg"
alt="аватар"
/>
</div>
<!--Подключаем через src и вписываем путь к файлу-->
<script src="js/index.js"></script>
<!--Подключаем стили через тег link и указываем необходимые параметры-->
<link rel="stylesheet" type="text/css" href="css/index.css" />
❗
Важно: используйте для папок латинские буквы, не используйте пробелы, спецсимволы или кириллицу!
