SPA頁面

時間 2019-11-18

標籤 spa 頁面简体版

原文原文鏈接

背景：html

　　單頁 Web 應用 (single-page application 簡稱爲 SPA) 是一種特殊的 Web 應用，它將全部的活動均侷限於一個Web頁面中；這就表示Web應用被加載出來以後，Web中全部的交互和跳轉均不會與服務器發生交互，而是使用JS轉換HTML中的內容。服務器

實現的原理：app

　　1. 使用 hashchange 能夠檢測路由的變化狀況spa

　　2. 使用 location.hash 路由，而後根據路由選擇須要渲染的頁面內容code

SPA Demo：htm

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>SPA Demo</title>
 6     <style>
 7  .box {
 8  width: 300px;
 9  height: 300px;
10  background: lightyellow;
11  margin: 0 auto;
12         }
13  .content {
14  width: 100%;
15  height: 100%;
16         }
17     </style>
18 </head>
19 <body>
20     <div class="box">
21         <div class="content"></div>
22         <button>下一頁</button>
23     </div>
24     <script>
25  const renderHtml = (text) => { 26  let element = document.querySelector('.content') 27  element.innerHTML = text 28  } 29  const responseForPath = (path) => { 30  let mapper = { 31                 '/0': `<h3>第一個界面</h3>`,
32                 '/1': `<h3>第二個界面</h3>`,
33                 '/2': `<h3>第三個界面</h3>`,
34                 '/3': `<h3>第四個界面</h3>`,
35  } 36             if (path in mapper) { 37                 return mapper[path] 38  } else { 39                 return 'not found'
40  } 41  } 42         // 獲取當前的路由，而後根據路由選擇須要渲染的內容
43  const render = () => { 44  console.log(location.hash) 45             // 根據路由選擇相應的內容
46  let r = responseForPath(location.hash.slice(1)) 47             // 渲染內容
48  renderHtml(r) 49  } 50  const bindEvents = () => { 51             // 給當前窗口綁定 hashchange 事件
52  window.addEventListener('hashchange', (event) => { 53  render() 54  }) 55  } 56         // 給按鈕綁定事件，實現頁面路由的更換
57  const buttonBindEvent = () => { 58  let ele = document.querySelector('button') 59  ele.addEventListener('click', (event) => { 60  let x = location.hash 61                 // console.log(x)
62                 if (x === '') { 63  location.hash = '/0'
64  } else { 65  console.log(x) 66  let temp = x.slice(2) 67  console.log(temp) 68  temp = (Number(temp) + 1) % 4
69  location.hash = `/${temp}`
70  } 71  }) 72  } 73  const __main = () => { 74  bindEvents() 75  render() 76  buttonBindEvent() 77  } 78         
79         // DOMContentLoaded 事件表示 HTML 已經加載(渲染)到頁面中, 這個時候操做 DOM 元素就沒有問題
80  document.addEventListener('DOMContentLoaded', () => { 81  __main() 82  }) 83     </script>
84 </body>
85 </html>

參考資料：blog

　　1. 如何快速開發SPA應用：http://www.javashuo.com/article/p-ozvvulah-cy.html事件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。