Question

到目前为止，我正在构建我的第一个移动应用程序，并且如果我的解决方案是好的话也不知道。

我使用了一个只有一个data-role =“page”的模板（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();
  }
});

我现在有几个问题。

应用程序有点慢。
Pageinit事件经常被解雇。你能预防吗？
由于我有100个外部javascript文件，因此代码对第三人来说不太可读。（每次用户执行某些操作时，会隐藏500个div，显示10个）
您是否有一个具有良好架构的应用程序的完整示例？

Answer 1

你的应用很慢，因为它每次都会加载一个大页面。页面init多次触发可能是因为每次单击链接时都会重新加载一个大页面。

在JQM中，您有许多data-role =“page”，而不仅仅是一个。以下是Dreamweaver CS6生成的标准模板。它使用JQ＆amp; JQM CDN的格式为四页。它应该给你一个良好的开端：

<!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>

Phonegap和jQuery Mobile架构问题

1 个答案: