В этом уроке я напишу 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

Теперь вы можете увидеть свое приложение в действии, как в этом видео.