首頁 > 開發者 > JavaScript
jquery mobile 是一個基於html，js，css而進行開發的手機架構工具，即是，類似一個網站一般，多個html，jquery實現參數傳遞，部分特效效果等，css實現UI和部分特效；和網站的區別就是應為是手機用戶端開發，所以沒有伺服器指令碼語言。
既然是html，就會有head，body等標籤，
jq mobile 的架構在進入app時，有mobileinit的事件，不過這個時間要在jquery.js引入，但是jquery mobile還沒引入時就定義，就是
[html]
<script src="jquery.js"></script>
<script src="myscript.js"></script>
<script src="jquery-mobile.js"></script>
其中myscript就是mobileinit的事件的位置；
這個架構的特點是，在進入app的第一個html的時候，的<head></head>標籤的內容是載入（也就是被執行）的，其他html裡的head標籤是不被執行的，當然，window.location.href='second.html',這樣的js原生態寫法，把頁面重新徹底跳轉一次，head標籤就會被再次執行；否則，jquery mobile 裡的<a href='second.html'></a>標籤也好，$.mobile.changePage('second.html',{transition:"slide"})也罷，都是不會再次執行head標籤的內容的。
可能讀者會問，那有時候不想引進所有的js，在執行到某些頁面的時候，再載入這些特定的js，也就是按需載入；這又如何處理呢？
要解決這個問題，先來在看看jq mobile的機制。
在每個html裡，都會有
[html]
<body>
<div data-role="page">
<span style="white-space:pre"> </span><div data-role="header" data-theme="b">... ...</div>
<span style="white-space:pre"> </span><div data-role="content">... ...</div>
<span style="white-space:pre"> </span><div data-role="footer">... ...</div><pre name="code" class="html" style="font-size: 18.18181800842285px; "></div></pre></body>
<pre></pre>
<span style="white-space:pre"></span>在每次a標籤或者<span style="font-size:18.18181800842285px">$.mobile.changePage()事件的時候，改變的都是<div data-role="page"></div>的內容。</span>
<pre></pre>
筆者研究發現，jquery mobile的頁面裡，最多有兩個<div data-role="page"></div>，在這兩個div裡面，第二次出現的div裡會有data-external-page="true"這個屬性，而且，第一個進入的div是永遠停留在那裡，不會被替換，也就是說，引入新的頁面，都是在第二個<div
data-role="page"></div>（帶有data-external-page="true"這個屬性）的div層裡進行替換載入；可以做個分類，有12345個頁面，從小到大串連過去，那麼1一直都佔著一個<div
data-role="page"></div>，2345就在不停的替換第二個<div data-role="page"></div>；這個說的深入了。
那如何按需載入呢？當我們把要進入的js寫在新的html的<div
data-role="page"></div>裡面就可以，就是
[html]
<div data-role="page">
<script src="my.js"></script></div>
那當頁面改變，也就是a標籤點擊，changPage的時候，我想執行一些操作呢，jq mobile有pagebeforchange事件，就是
[javascript]
$(document).bind('pagebeforechange',function(e,data){... ...});
但是在頁面改變的時候，這個時間會執行兩次（這是jq mobile的架構問題），這兩次參數data的內容都不相同，一次data.toPage的屬性是一個函數，一個屬性是string;一般情況都是從string屬性進行下手：
[javascript]
$(document).bind('pagebeforechange',function(e,data){
if (typeof data.toPage !== "string"){
return;
}
... ...
});
第一個記錄到此。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
