用于创建跨页面共享组件，例如全局播放器。 项目地址

演示地址

使用

首页 index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    我是首页
    <!--注意:singlePage.js必须放在所有js之前body之底!保证它能够优先被执行 -->
    <!--通过"?singlePage/global.html"的方式引入全局资源,比如global.html中是一个全局播放器,那么该播放器不会因为页面切换而受到任何影响 -->
    <script src="https://cdn.jsdelivr.net/gh/aweiu/JsLibs/libs/js/singlePage.js?singlePage/global.html"></script>
  </body>
</html>

共享组件 global.html:

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  div {
    /*就是做个样子==*/
  }
</style>
<div id="globalDiv">我是全局资源，哈哈哈！无论你怎么切换页面，我都在哦~</div>
<script>
  var i = 0
  setInterval(function() {
    document.getElementById('globalDiv').innerHTML += i++
  }, 1000)
</script>

ok, 大功告成了！按照上述例子，假设你在其它页面中也引入 global.html:

1
<script src="https://cdn.jsdelivr.net/gh/aweiu/JsLibs/libs/js/singlePage.js?singlePage/global.html"></script>

那么你会发现，页面即使发生”跳转”,计时器仍然平稳运行!一个简单的单页应用完成了！
是的，你完全不用关注单页应用的实现，每个页面还是按着你之前习惯的方式去写就好了，各自页面维护各自资源。

相关文章

喜马拉雅黑科技——无卡顿网页播放器


 上一页

文档 sea.js

 评论