实现一个简单的单页应用

简介: 实现一个简单的单页应用

本文实现的单页应用很简单。

一段简单 HTML 结构:

<main>这是一个简单的单页应用示例</main>
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>
首先,我们将每个不同路线的网站标题和内容存储在一个名为 pages 的对象中:

const pages = {
   
  '/': {
   
    title: 'Home',
    content: `<h1>欢迎来到我的网站!</h1>
      <p>这是我的网站主页</p>
      <h2>相关链接</h2>`
  },
  '/about': {
   
    title: 'About',
    content: `<h1>关于我</h1>
      <p>我喜欢吃吃喝喝!</p>
      <h2>相关链接</h2>`
  },
  '/contact': {
   
    title: 'Contact',
    content: `<h1>联系我</h1>
      <p>我可以通过 email 联系到我</p>
      <h2>相关链接</h2>`
  }

}
然后,在页面加载时执行以下操作:

获取当前路径名(例如 /、/about、/contact)
根据路径名将 main 元素的 innerHTML 设置为正确的内容
根据路径名设置文档标题
我们使用 window.location.pathname 访问当前路径。接着,我们根据 pages 对象设置 main 元素的 innerHTML 属性和 document.title 属性。

const path = window.location.pathname
document.querySelector('main').innerHTML = pages[path].content
document.title = pages[path].title

每次我们点击一个链接,我们都会向服务器发送一个请求,并得到相同的响应。我们需要防止链接执行 GET 请求,而是直接在视图中操作 HTML:

const links = document.querySelectorAll('a')
links.forEach((link) => {
   
  link.addEventListener('click', (e) => {
   
    e.preventDefault()
    const path = e.target.pathname
    window.history.pushState({
   }, pages[path].title, path)
    document.querySelector('main').innerHTML = pages[path].content
    document.title = pages[path].title
  })
})

以上代码中,我们为文档中的每个链接添加了一个事件监听器。使用 preventDefault 阻止链接的默认操作。相反,它从目标锚点元素获取路径名,使用 window.history.pushState 来更改 URL,然后执行与加载时执行的代码相同的 innerHTML 和 title 更改内容。

相关文章
|
5月前
单页404源码
单页404源码
75 4
单页404源码
|
5月前
|
缓存 前端开发 JavaScript
单页应用如何提高加载速度?
提高单页应用(Single Page Application,SPA)的加载速度可以从以下几个方面入手:
43 1
|
11月前
|
存储 缓存 算法
单页应用如何提高加速速度
单页应用如何提高加速速度
55 0
|
Web App开发 JavaScript 前端开发
单页切屏效果的原理
1.实现过程中的注意事项: 鼠标滚轮事件的兼容性问题: W3C并没有对鼠标滚轮事件进行规范,各浏览器厂商封装了不同的实现方法,事件属性也不一样,FireFox用了一个私有实现DOMMouseScroll。其他浏览器都是用mousewheel实现,所以需要做一下兼容处理(详见下面的js关键代码的截图)
147 0
单页切屏效果的原理
|
Web App开发 搜索推荐 前端开发
关于单页应用(SPA)的经验之谈
时下SPA单页应用如火如荼,对前端乃至后端开发都带来不小的冲击和变革。笔者整理了下笔记,决定写一下以前基于iframe做单页博客的一些经验方法。 对于单页应用,笔者没有找到最官方的定义。在笔者看来,在用户操作过程中,浏览器始终不会重载整个页面的web应用,便可以称为单页应用。
1711 0
|
Web App开发 JavaScript 前端开发
使用Vue快速开发单页应用
本文所涉及代码全在vue-cnode 单页应用,即在一个页面集成系统中所有功能,整个应用只有一个页面。因为路由的控制在前端,单页面应用在页面切换时比传统页面更快,从而在前端体验更好。
1564 0
|
前端开发
《分享》学习单页网站制作的20个优秀案例
  单页网站如果设计得当,是一个把所有的内容放到前沿和中心很好的方式,能够增加访问者看到它的机会。因此今天,我们收集了一组非常出色的单页网站来推荐给大家。如果大家想了解这些精美网站是如何实现的,可以看我之前分享的文章《谈谈构建单页布局网站的创意技术》。
762 0