Создание одностраничного приложения Javascript без фреймворка
Этот рассказ впервые опубликован на
Привет, ребята, у нас есть новый учебник о том, как создать одностраничное приложение без фреймворка.
Хороший разработчик всегда стремится понять, как одностраничное приложение работает внутри, потому что в настоящее время мы заняты изучением фреймворков, но мы не думаем, как оно работает внутри, потому что мы не хотим, но как хороший программист вы должны знать все от и до. вещь, которую вы изучаете.
Прежде всего,
Что такое одностраничное приложение?
Одностраничное приложение — это терминология, в которой вы загружаете несколько страниц динамически без перезагрузки приложения. Например, у нас есть угловая структура, специально созданная для одностраничного приложения.
Давайте начнем
ПРИМЕЧАНИЕ. Мы будем следовать стандарту ES6 для кодирования. Это означает, что код, который мы пишем, не будет работать непосредственно в браузере, так как на данный момент браузеры не поддерживают большую часть стандартной функциональности ES6 напрямую, но не волнуйтесь, мы добавим соответствующий компилятор, который преобразует наш код в язык, понятный браузеру.
Итак, наконец, давайте начнем
Создание одностраничного приложения
Мы будем реализовывать одностраничное приложение с подходом к хэшированию местоположения и использовать веб-пакет для связывания и компиляции.
Настройка проекта
- Запустите команду «npm init» для создания package.json.
- Установите зависимости веб-пакета, как показано ниже.
- npm установить веб-пакет webpack-cli -D
после этого давайте создадим структуру папок
Как вы можете видеть выше, мы создали структуру папок, в которой у нас есть папка компонентов, в которой мы будем хранить наши файлы javascript.
Папка libs предназначена для хранения файлов нашей библиотеки (может включать файлы маршрутизации js, которые будут разработаны нами для целей одностраничного приложения)
папка views будет содержать файлы HTML, которые потребуются для загрузки при маршрутизации
index.html и index.js — точки входа для нашего приложения.
webpack.config.js для написания конфигурации webpack
Индекс.html
<!DOCTYPE html>
<head>
</head>
<body>
<a href="#detail">Details</a>
<a href="#landing">Landing</a>
<section id="app">
</section>
</body>
</html>Как вы можете видеть выше, в index.html мы взяли два тега href, в которых у нас есть маршрутизация для подробных и целевых ссылок, поэтому здесь moto — загрузить представление, связанное с этими ссылками.
раздел с идентификатором «приложение» используется для динамической загрузки маршрутов под этим.
Теперь давайте создадим файлы маршрутизации
Route.js
export class Routes {
constructor(viewObj, isDefaultRoute) {
this.viewObj = viewObj;
this.isDefaultRoute = isDefaultRoute;
}
isActiveRoute(hashPath) {
return hashPath.replace('#', '') === this.viewObj.path
}
}В приведенном выше коде у нас есть свойства, которые потребуются для отдельных маршрутов.
например, viewObj будет содержать свойства пути и URL, как показано ниже.
{
path: 'path',
templateUrl : 'path/to/html'
}isDefaultRoute решит, какой из них будет загружен по умолчанию, если какой-либо путь не совпадает с хешем местоположения.
Функция isActiveRoute сообщит вам текущий активный маршрут
Теперь давайте создадим Router.js, который позаботится о функциях маршрутизации.
Router.js
export class Router {
constructor(routes, routeElement) {
this.routes = routes;
this.routeElement = document.getElementById(routeElement);
this.initialize();
this.hashChanged();
}
getPathAndRouteMapping() {
const routeMapping = {};
for (let objKey in this.routes) {
routeMapping[this.routes[objKey].viewObj.path] = this.routes[objKey].viewObj.url;
}
return routeMapping;
}
initialize() {
window.addEventListener('hashchange', (e) => {
this.hashChanged()
})
}
hashChanged() {
const locationHash = window.location.hash;
for (let i = 0; i < this.routes.length; i++) {
const route = this.routes[i];
if (route.isActiveRoute(locationHash.substr(1))) {
this.navigate(route.viewObj.path)
}
}
}
navigate(path) {
const pathRouteMapping = this.getPathAndRouteMapping();
const url = pathRouteMapping[path];
const xhttp = new XMLHttpRequest();
let scope = this;
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
scope.routeElement.innerHTML = this.responseText;
}
};
xhttp.open('GET', url, true);
xhttp.send();
}
}Это основной класс, где у нас есть основная магия кода.
Здесь 4 функции и один конструктор
Конструктор: конструктор, принимающий 2 параметра, первый из которых является конфигурацией маршрутизации, относящейся к типу класса Routes, а другой является корневым элементом, в котором наше представление будет загружаться динамически.
Функция initialize предназначена для присоединения прослушивателя события hashchange, который будет запускаться при изменении хэша местоположения.
Функция hashChange вызывается каждый раз, когда срабатывает событие hashchange, и в этом случае мы сопоставляем правильный маршрут и загружаем этот URL-адрес.
Функция navigate обеспечивает загрузку HTML с помощью ajax-запроса.
Функция getPathAndRouteMapping используется для сохранения сопоставления пути и URL-адреса.
Пожалуйста, проверьте этот репозиторий кода для всего кода
В приведенном выше примере мы только что рассмотрели основы маршрутизации, которые мы можем продвинуть вперед. Прежде чем идти вперед, по крайней мере, вы, ребята, начните с этого.
