SPA页面

2019-07-23 20:54:05 阅读：199 来源： 互联网

标签：Web hash const let location SPA 路由页面

背景：

　　单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用，它将所有的活动均局限于一个Web页面中；这就表示Web应用被加载出来之后，Web中所有的交互和跳转均不会与服务器发生交互，而是使用JS转换HTML中的内容。

实现的原理：

　　1. 使用 hashchange 可以检测路由的变化情况

　　2. 使用 location.hash 路由，然后根据路由选择需要渲染的页面内容

SPA Demo：

 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>

参考资料：

　　1. 如何快速开发SPA应用：https://www.cnblogs.com/constantince/p/5586851.html

标签：Web,hash,const,let,location,SPA,路由,页面
来源： https://www.cnblogs.com/oulae/p/11234308.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

SPA页面