1

これまでに初めてのモバイル アプリケーションを構築していますが、ソリューションが優れているかどうかわかりません。

data-role="page" が 1 つだけの 1 つのテンプレート (html ファイル) を使用しました。各コンテンツ要素は、javascript を介して非表示または表示される単なる div です。明確にするために、次のコードを確認してください。これは、私のアプリケーションのエントリ ポイントでもあります。

 $(document).delegate("#index", "pageinit", function(event, ui) {
      initRotation();
      initNavigation();
      initImpressum();
      initService();
      cookie = null;
      ......
      isLoggedIn(); //returns cookie = true || false
      if (cookie == null) {
        $('#login').show();
        $('#home, #foot, #service').hide();
        initRegistration();
  } else {
      $('#login, #service').hide();
      $('#foot, #home').show();
      $('#naviHome').addClass("ui-btn-active"); // ui-state-persist?!
      createHomeContentFromServer();
  }
});

私は今、いくつかの問題を抱えています。

  1. アプリはちょっと遅いです。
  2. Pageinit イベントが頻繁に発生します。あなたはそれを防ぐことができますか？
  3. 100個の外部JavaScriptファイルを取得したため、コードは第三者にとってあまり読みにくいです。(ユーザーが何かを行うたびに、約 500 個の div が非表示になり、10 個が表示されます)
  4. 優れたアーキテクチャを備えたアプリの完全な例はありますか?
4

1 に答える 1

1

毎回 1 つの大きなページを読み込んでいるため、アプリが遅くなります。おそらく、リンクをクリックするたびにその 1 つの大きなページをリロードしているため、ページの初期化が複数回発生しています。

JQM では、data-role="page" は 1 つではなく、多数あります。以下は、Dreamweaver CS6 が生成する標準テンプレートです。JQ & JQM CDN を使用し、4 ページにフォーマットされています。それはあなたに良いスタートを与えるはずです：

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"     rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head> 
<body> 

<div data-role="page" id="page">
<div data-role="header">
    <h1>Page One</h1>
</div>
<div data-role="content">   
    <ul data-role="listview">
        <li><a href="#page2">Page Two</a></li>
        <li><a href="#page3">Page Three</a></li>
        <li><a href="#page4">Page Four</a></li>
    </ul>       
</div>
<div data-role="footer">
    <h4>Page Footer</h4>
</div>
</div>

<div data-role="page" id="page2">
<div data-role="header">
    <h1>Page Two</h1>
</div>
<div data-role="content">   
    Content     
</div>
<div data-role="footer">
    <h4>Page Footer</h4>
</div>
</div>

<div data-role="page" id="page3">
<div data-role="header">
    <h1>Page Three</h1>
</div>
<div data-role="content">   
    Content     
</div>
<div data-role="footer">
    <h4>Page Footer</h4>
</div>
</div>

<div data-role="page" id="page4">
<div data-role="header">
    <h1>Page Four</h1>
</div>
<div data-role="content">   
    Content     
</div>
<div data-role="footer">
    <h4>Page Footer</h4>
</div>

于 2013-02-16T05:55:00.000 に答える