1

到目前为止，我正在构建我的第一个移动应用程序，但不知道我的解决方案是否好。

我使用了一个只有一个 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();
  }
});

我现在有几个问题。

  1. 该应用程序有点慢。
  2. Pageinit 事件被频繁触发。你能阻止它吗？
  3. 由于我得到了大约 100 个外部 javascript 文件，因此该代码对于第三人来说不是很可读。（每次用户做某事约 500 个 div 被隐藏并显示 10 个）
  4. 您是否有具有良好架构的应用程序的完整示例？
4

1 回答 1

1

您的应用程序很慢，因为它每次都加载一个大页面。页面初始化多次触发可能是因为您每次单击链接时都重新加载了一个大页面。

在 JQM 中，您有许多 data-role="page"，而不仅仅是一个。下面是 Dreamweaver CS6 生成的标准模板。它使用 JQ 和 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>

于 2013-02-16T05:55:00.000 回答