1

Делаю небольшое single-page приложение под андроид на веб технологиях (html, css, js). Погуглив немного, нашел, что можно использовать angular, но использовать такой инструмент ради простой задачи, не хочется. Подумал, как-то блоками сделать, менять их, или какие-то темплейты использовать, переключать. Как лучше реализовать SPA?

1 ответ 1

0

Проще уже некуда ( хотя можно вообще без js, делать всем неактивным страницам display: none, но это немного другое, это пример нативной шаблонизации ) -

const PageType = {
  MainPageType: "main",
  SomePageType: "some",
  
  DefaultPageType: "main"
};

const mainPageTemplate = () => (`<div class="page"><span>main</span></div>`);
const somePageTemplate = () => (`<div class="page"><span>some</span></div>`);

const templates = {
  [ PageType.MainPageType ]: mainPageTemplate,
  [ PageType.SomePageType ]: somePageTemplate,
}

const router = {
  set( routeType ){
    document.body.querySelector('main').innerHTML = templates[ routeType ]();
  }
};

router.set( PageType.DefaultPageType );

// navigation

document.body.querySelector('.button-group__navbar').addEventListener('click', ({target}) => {
  if( target.classList.contains( 'button-group__navbar__button' ) ){
    router.set( target.dataset.route )
  }
});
.page {
  width: 100%;
  height: 100%;
  
  background: tomato;
  
  display: flex;
  
  justify-content: center;
  align-items: center;
  
  position: absolute;
}

span {
  font-size: 5rem;
}

.button-group__navbar {
  position: absolute;
  
  top: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
<main></main>
<div class="button-group__navbar">
  <button class="button-group__navbar__button" data-route="main">main</button>
  <button class="button-group__navbar__button" data-route="some">some</button>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.