Skip to content

singlePage.js(更自然地创建单页应用)

Jump to bottom
awei.yu edited this page Jun 20, 2017 · 2 revisions

说明:用于创建单页应用。

使用示例：

index.html内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    我是首页
    <!--注意:singlePage.js必须放在所有js之前body之底!保证它能够优先被执行 -->
    <!--通过"?singlePage/global.html"的方式引入全局资源,比如global.html中是一个全局播放器,那么该播放器不会因为页面切换而受到任何影响 -->
    <script src="/libs/js/singlePage.js?singlePage/global.html"></script>
    <!--index页面自身的js -->
    <script src="index.js"></script>
</body>
</html>

global.html(名字随意啦)内容如下:

    <style>
        div{
            /*就是做个样子==*/
        }
    <style>
    <div id="globalDiv">我是全局资源，哈哈哈！无论你怎么切换页面，我都在哦~</div>
    <script>
        var i=0;
        setInterval(function(){
            document.getElementById("globalDiv").innerHTML+=(i++);
        },1000);
    </script>

ok!大功告成了。按照上述例子，假设你在其它页面中也引入

<script src="/libs/js/singlePage.js?singlePage/global.html"></script>

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

相关参考:

Clone this wiki locally