SPA模式下的多页面跳转原理及实现—

SPA模式下的多页面跳转原理及实现——jQuery Mobile为例

news2024/9/22 9:59:09

jQuery Mobile在SPA模式下的多页面跳转原理及实现案例

文章目录

jQuery Mobile在SPA模式下的多页面跳转原理及实现案例
前言
一、SPA的实现原理和代码分析
- 1.实现原理说明
- - （1）index.html
  - （2）index.js
  - （3）page2.html
  - （4）page2.js
- 2.代码分析
二、特别说明

前言

jQuery Mobile提供了采用SPA(Single Page Application）方式的多页面开发，特别适合于移动跨端开发中提升多页面应用的性能。其中，在官方文档提到了changePage、loadPage的方式，也给出了采用< a href>标签的方式，并且在官方文档中只给出了以内联方式的多页面切换（即各个页面写在同一个html文件中，用< div data-role=“page” id=“pagex”>区分不同页面，其中的x代表了page1、page2…），但对于一个包含较多页面的应用，会导致html文件过于复杂和超长，带来维护困难和可读性差的问题。
那么在jQuery Mobile中SPA下多页面的不同调用方式有什么区别？对于单独保存为不同的html页面又该如何调用呢？
本文详细分析和描述了jQuery Mobile中SPA多页面调用外部和内联页面的原理，并给出代码分析。

一、SPA的实现原理和代码分析

1.实现原理说明

在示例中是基于jQuery Mobile开发的cordova App。
主入口index.html中采用不同方式调用了page2.html或内联页面pagetwo。代码如下：

（1）index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="lib/jquery.mobile-1.4.5.min.css">
    <script src="lib/jquery-2.2.4.min.js"></script>
    <script src="js/index.js"></script>
    <!--index.js必须在jqmobile调用前加载,否则mobileinit不会被捕获，导致init函数不执行-->
    <script src="lib/jquery.mobile-1.4.5.min.js"></script>
    <title>Multi Page Change Demo</title>
</head>
<body>
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h2>第一页</h2>
        </div>
        <div data-role="main" class="ui-content">
            <button id="page2Btn">changePage按钮跳转page2</button>
            <a href="page2.html" data-role="button" data-ajax="true" data-transition="slide">ajax锚跳转page2</a>
            <a href="#pagetwo" class="ui-shadow" data-transition="slide" data-role="button">内联跳转page2</a>
        </div>
        <div data-role="footer">
            <h3>版权所有&copy;W</h3>
        </div>
    </div>
	<!--以下为内联页面-->
    <div data-role="page" id="pagetwo">
        <div data-role="header">
            <h2>第二页</h2>
        </div>
        <div data-role="main" class="ui-content">
            <a href="#pageone"  data-transition="flip">跳转到第一个页面</a>
        </div>
        <div data-role="footer">
            <h3>版权所有&copy;W</h3>
        </div>
    </div>
    <script src="cordova.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

（2）index.js

var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
    deviceReadyDeferred.resolve();
}
$(document).on("mobileinit",function(){
    jqmReadyDeferred.resolve();
});
function init(){
    $(document).on("touchend","#page2Btn",function(e){
        alert("in index.js click page2Btn,开始跳转外部page2.html");
        // $.mobile.changePage("page2.html");//成功
        // $.mobile.loadPage("page2.html");//该方式不成功
        //该方式可访问内联页面
        // $.mobile.changePage("#pagetwo",{
        //     transition:"pop",
        //     reverse:true
        // });
        //该方式也成功
        $.mobile.pageContainer.pagecontainer("change","page2.html",{
            changeHash:false
        });
    });
    //changPage外部跳转不能在浏览器运行，会出现跨域安全提示，可以在cordova运行
    $(document).on("touchend","#page1Btn",function(e){
        alert("in index.js click page1Btn which in page2.html,开始跳转外部index.html")
        // $.mobile.changePage("index.html");
        $.mobile.changePage("index.html",{
            transition:"pop",
            reverse:true
        });
    });
}

（3）page2.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Page 2</title>
  <link rel="stylesheet" href="lib/jquery.mobile-1.4.5.min.css">
    <script src="lib/jquery-2.2.4.min.js"></script>
    <script src="lib/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!--ajax方式只会更新div data-role="page"其中的部分-->
<div data-role="page" id="page2">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>This is Page 2.</p>
    <button id="page1Btn">回到第一个页面</button>
    <a href="index.html" data-role="button" data-ajax="true" data-transition="slide" data-direction="reverse">ajax锚方式返回</a>
  </div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>
在div外面的部分将不会被Ajax方式加载，因此该部分文字和page2.js不会被执行
<script src="js/page2.js"></script>
</body>
</html>

（4）page2.js

在运行中，page2.js不会被执行

$(document).on("touchend","#page1Btn",function(e){
    alert("in page2.js click page1Btn,changePage跳转index.html");
    $.mobile.changePage("index.html");
    // $.mobile.changePage("index.html",{
    //     transition:"pop",
    //     reverse:true
    // });
});

2.代码分析

运行结果如图：
在这里插入图片描述
确定后，则跳转到page2.html, 如图，再点击"回到第一个页面"，则又回页面index.html

点击其中的"AJAX锚跳转PAGE2”和“AJA X锚方式返回"，也具有同样的效果，只是实现代码采用了< a href>方式;
而”内联跳转PAGE2“则是显示的index.html中的pagetwo页面。

二、特别说明

在index.js中用了Deferred延迟对象来实现挂起进程，直到用resolve()可以继续执行。
在其中需要判断deviceready和mobileinit两个事件都就绪后，才开始执行init函数的内容。
因此，要特别注意两个事件的触发机制。

jQuery Mobile的mobileinit事件，会在 <script src="lib/jquery.mobile-1.4.5.min.js"></script>加载后马上触发，甚至早于 jQuery 的 document.ready 事件，因此，自己开发的绑定侦听事件的index.js需要在加载 jQuery Mobile之前，否则会由于错过mobileinit而导致侦听不执行！因此，应按如下顺序加载 jQuery Mobile：

  <link rel="stylesheet" href="jquery.mobile-XXX.css">
    <script src="jquery-XXX.js"></script>
    <script src="index.js"></script><!--自己的js文件-->
    <script src="jquery.mobile-XXX.js"></script>