jQuery로 간단한 SPA 샘플을 만들어 보았습니다.
jQuery로 간단한 SPA를 구현해 보았습니다.
SPA를 본격적으로 구현한다면 React나 Vue를 구현하는 것이 좋을 것입니다만, 간단한 SPA이면 jQuery에서도 구현은 가능합니다.
완성 이미지는 아래와 같이 되어 첨부 이미지의 노란 부분만 바뀝니다.
HTML
spa 클래스가 붙은 div 태그를 jQuery로 덮어 씁니다.
HTML<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>シンプルSPA</title>
<link rel="stylesheet" type="text/css" href="assets/reset.css">
<link rel="stylesheet" type="text/css" href="assets/spa.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<nav>
<a href="#page1">page1</a> |
<a href="#page2">page2</a> |
<a href="#page3">page3</a>
</nav>
</header>
<main id="spa">
<!-- ここが切り替わる -->
<div class="spa"></div>
</main>
<footer class="footer">
footer
</footer>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="assets/spa.js"></script>
</body>
</html>
해시에 대응한 파일명의 HTML을 준비해 둡니다.
예: 해시가 #page1인 경우 page1.html을 로드하도록 합니다.
page2.html, page3.html도 마찬가지입니다.
page1.html<div class="page1 page">page1</div>
CSS
설명은 할애.
CSS@charset "utf-8";
.wrapper {
width: 600px;
margin: auto;
}
.page {
text-align: center;
line-height: 300px;
font-size: 24px;
font-weight: bold;
}
.page1 {
background: #f0e68c;
}
.page2 {
background: #4169e1;
}
.page3 {
background: #ffb6c1;
}
.header,
.footer {
text-align: center;
background: #ccc;
padding: 20px;
}
자바스크립트
hashchange 이벤트를 사용하여 URL 해시가 전환되면 로드할 HTML 파일을 전환합니다.
불규칙한 해시를 두드린 경우나 처음 액세스할 때는 init() 쪽으로 page1.html을 읽어들입니다.
참고 : MDN WindowEventHandlers.onhashchange
자바스크립트;(function(){
'use strict';
//URLの一覧を配列で用意
const url_list = [
'page1',
'page2',
'page3',
];
function init(){
$.get('/page/page1.html').done((data) => {
$('.spa').html(data);
}).fail(() => {
error();
});
}
function hashchange(){
const page = location.hash.slice(1);
const in_url = $.inArray(page, url_list);
if(in_url !== -1){
$.get(`/page/${page}.html`).done((data) => {
$('.spa').html(data);
}).fail(() => {
error();
});
}
}
function error(){
$('.spa').html('読み込みエラー');
}
$(window).on("hashchange", () => {
hashchange();
});
$(function(){
init();
});
})();
요약
URL의 계층이 깊어진 경우나 동적 URL에 대응하고 있지 않는 최저한의 구현입니다만 SPA와 같은 것이 구현할 수 있었습니다.
본격적으로 구현한다면 어른스럽게 Vue 등의 프레임워크를 사용하는 것이 버그도 적게 구현할 수 있을까 생각합니다만, 기존 사이트의 일부에 조금 구현하는 경우나 개인 사이트 정도라면 이 정도라도 충분할까 생각 합니다.
Reference
이 문제에 관하여(jQuery로 간단한 SPA 샘플을 만들어 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ikdysk/items/85ad3a5b18f022ee8f6d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>シンプルSPA</title>
<link rel="stylesheet" type="text/css" href="assets/reset.css">
<link rel="stylesheet" type="text/css" href="assets/spa.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<nav>
<a href="#page1">page1</a> |
<a href="#page2">page2</a> |
<a href="#page3">page3</a>
</nav>
</header>
<main id="spa">
<!-- ここが切り替わる -->
<div class="spa"></div>
</main>
<footer class="footer">
footer
</footer>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="assets/spa.js"></script>
</body>
</html>
<div class="page1 page">page1</div>
@charset "utf-8";
.wrapper {
width: 600px;
margin: auto;
}
.page {
text-align: center;
line-height: 300px;
font-size: 24px;
font-weight: bold;
}
.page1 {
background: #f0e68c;
}
.page2 {
background: #4169e1;
}
.page3 {
background: #ffb6c1;
}
.header,
.footer {
text-align: center;
background: #ccc;
padding: 20px;
}
;(function(){
'use strict';
//URLの一覧を配列で用意
const url_list = [
'page1',
'page2',
'page3',
];
function init(){
$.get('/page/page1.html').done((data) => {
$('.spa').html(data);
}).fail(() => {
error();
});
}
function hashchange(){
const page = location.hash.slice(1);
const in_url = $.inArray(page, url_list);
if(in_url !== -1){
$.get(`/page/${page}.html`).done((data) => {
$('.spa').html(data);
}).fail(() => {
error();
});
}
}
function error(){
$('.spa').html('読み込みエラー');
}
$(window).on("hashchange", () => {
hashchange();
});
$(function(){
init();
});
})();
Reference
이 문제에 관하여(jQuery로 간단한 SPA 샘플을 만들어 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ikdysk/items/85ad3a5b18f022ee8f6d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
