jquery mobile 手機開發框架分析 (一)

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>  
 
<p data-role="page"> 
 
<span style="white-space:pre">  </span><p data-role="header" data-theme="b">… …</p> 
<span style="white-space:pre">  </span><p data-role="content">… …</p> 
<span style="white-space:pre">  </span><p data-role="footer">… …</p><pre name="code" class="html" style="font-size: 18.18181800842285px; "></p></pre></body> 
<pre></pre> 
<span style="white-space:pre"></span>在每次a標簽或者<span style="font-size:18.18181800842285px">$.mobile.changePage()事件的時候,改變的都是<p data-role="page"></p>的內容。</span> 
<pre></pre> 
筆者研究發現,jquery mobile的頁面裡,最多有兩個<p data-role="page"></p>,在這兩個p裡面,第二次出現的p裡會有data-external-page="true"這個屬性,而且,第一個進入的p是永遠停留在那裡,不會被替換,也就是說,引入新的頁面,都是在第二個<p
 data-role="page"></p>(帶有data-external-page="true"這個屬性)的p層裡進行替換加載;可以做個分類,有12345個頁面,從小到大連接過去,那麼1一直都占著一個<p
 data-role="page"></p>,2345就在不停的替換第二個<p data-role="page"></p>;這個說的深入瞭。
那如何按需加載呢?當我們把要進入的js寫在新的html的<p
 data-role="page"></p>裡面就可以,就是
[html] 
<p data-role="page"> 
<script src="my.js"></script></p> 
那當頁面改變,也就是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; 
    } 
    … …  
}); 

第一個記錄到此。

發佈留言