В этом уроке я напишу 10-строчный код JavaScript, который будет служить структурой одностраничного приложения. Итак, начнем.
Во-первых, создайте папку с именем, которое вы хотите использовать для приложения, в моем случае это spa.
cd ~/code mkdir spa cd spa
Теперь создайте файл index.html по умолчанию в папке приложения.
touch index.html
Создайте новую папку с именем src, которая будет содержать все различные страницы, которые будет обслуживать наше приложение.
mkdir src
Теперь откройте файл index.html в любом редакторе кода (в моем случае это VSCode).
code index.html
Внутри файла index.html свяжите jQuery через CDN.
<html> <head> <title>10 line SPA</title> </head> <body> <script src="some-cdn-domain/jquery/3.6.0/jquery.min.js"></script> </body> </html>
Теперь добавьте новый тег script в файл index.html, который будет содержать наше событие SPA и загрузчик.
<script> var HashChange = function( ){ var hash = window.location.hash if( hash.startsWith('#/') && hash.length>2 ){ hash = hash.replace( "#/", "" ); $("#AppContainer").load("src/" + hash + ".html"); }else{ window.location = "#/home" } } window.onhashchange = HashChange //Initial Call HashChange(); </script>
взгляните на код, это очень просто. Я создал функцию с именем HashChange, которая будет получать данные из URL-адреса и искать определенный html-файл в папке src. Наконец, я прикрепил функцию HashChange к onhashchange даже объекта окна.
Нам нужно будет создать страницы в соответствии с URL-адресом, который мы будем использовать для доступа к странице.
Давайте создадим 3 html-файла внутри папки src, которые будут отображаться для нашего пользователя при переходе по определенной ссылке.
- home.html для URL-адреса перехода пользователя #/home
- about.html для #/about
- contact.htmlдля #/contact
Вот содержимое каждого файла
home.html <h1>Home Page</h1> <p>Welcome to our Single Page Application</p> <a href="#/about">About Me</a> <a href="#/contact">Contact Me</a> about.html <h1>About Me</h1> <p>I am a Geek with a Sacred Intellect<p> <a href="#/home">Home</a> contact.html <h1>Contact Me</h1> <p>Send me a message at [email protected]</p> <a href="#/home">Home</a>
Вот и все, хотя в настоящее время он будет обслуживать только статические страницы, но мы можем изменить и использовать KnockoutJS или любую другую библиотеку, чтобы дать нашему приложению больше функций.
Откройте файл index.html в браузере или я предлагаю запустить простой сервер в папке spa.
cd ~/code cd spa php -S localhost:8000
Теперь вы можете увидеть свое приложение в действии, как в этом видео.