通过script标签实现一个spa网站

什么是spa?

spa是放松保养疗法,中文也称水疗,然而比较偏向专业美容结合休闲而没有医学上的治疗意义,因此和某些烧烫伤患者在医院接受的水疗并不同。

哈哈,这个是“偏洗脚”类的意义,不开玩笑了。

单页应用程序 (SPA)是一种网页应用程序或网站,适合单个网页,目的是提供一个和桌面应用程序相似的用户体验。在一个单页面应用中,无论是所需要的代码是HTML、JavaScript还是CSS都在一次页面加载中获取,或者通常根据用户动作动态加载合适的资源并按需要加入到网页中。尽管位置的Hash或HTML5历史API可用于在应用中提供独立逻辑页的感性和导航,网页在这个过程中不会重新加载,也不控制跳转到另一个网页。和单页面应用交互通常会涉及到和网络服务器动态通信。

怎么实现呢?

技术类的文章不要多言,直接看代码:

实现的关键点是什么?

  • pushState的使用方法
  • hashchange的事件监听
  • 将dom结构放在script标签里
  • 通过grunt将一个一个页面模板整合到一个文件
  • 将dom结构放在script标签里,

为什么要这样实现单页面?

我主要是看到https://weui.io/是这样实现的,适不适合大规模的spa网站我没有研究。看截图:

注意

示例代码没有经过严格的兼容性测试,请不要在生产环境使用!具体demo看这里:http://git.oschina.net/zengxiaoluan/spa-with-script

我要分享

曾小乱

作者: 曾小乱

喜欢写点有意思的东西

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据