分享程序员开发的那些事...
更新时间：2023-10-20 10:01:52
首先需要了解的是，99.9％的可用移动框架都很慢。这是由于：
First thing you need to understand is, 99,9% of available mobile frameworks are slow. This is due to:
用这个说我们可以走得更远，让我告诉你一些好的jQuery Mobile app架构的秘密。
With this said we can go further, let me tell you few secrets of good jQuery Mobile app architecture.
一个好的jQuery Mobile架构的第一个秘诀就是了解jQuery Mobile的实际工作原理。有两种方法可以创建jQuery Mobile页面骨架。像往常一样，事实就在中间。这两个模板都有好的和坏的方面，我们可以玩它们，特别是如果我们知道它们的坏侧以及它们如何影响整体应用程序功能。
First secret of a good jQuery Mobile architecture is the knowledge of how jQuery Mobile actually works. There are 2 possible ways how jQuery Mobile page skeleton can be created. As usual the truth lies somewhere in the middle. Both templates have good and bad sides and we can play around them, specially if we know their bad sides and how they affect overall application functionality.
第一个和经典的是一个多页面模板，其中一个HTML包含所有可用页面。这也是新jQuery Mobile开发人员展示的第一个模板。它也是最容易实现的两种模板。
First and classic one is a multi-page template where one HTML holds all available pages. This is also a first template shown to new jQuery Mobile developers. It is also an easiest template to implement, of two available.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
正如您所见，一个HTML包含所有可用页面。虽然这对普通的Web开发人员来说听起来很愚蠢，但这是一个非常好的解决方案这种模板解决方案不会遇到像使用多个HTML页面的模板解决方案这样的页面转换问题（我们将很快讨论）。因为jQuery Mobile使用ajax来处理页面加载延迟，所以延迟可能导致页面转换问题。由于所有内容已经加载到DOM多页面模板中，因此不会遇到这类问题。
As you can see one HTML holds all available pages. While this may sound silly to a normal web developer it is quite an excellent solution. This kind of template solution don’t suffer from page transition problems like template solution using several HTML pages (we will discuss it soon). Because jQuery Mobile uses ajax for page loading delays should be expected, same delays that could cause problems with page transitions. As everything is already loaded into the DOM multipage template will no suffer this kind of problems.
另一方面，此解决方案也存在一个严重问题。移动Web应用程序可以占用DOM的相当大的一部分，虽然这不是桌面浏览器的问题，但它可能会导致移动设备及其附带的浏览器出现问题。另外，请不要忘记我们正在讨论为移动Web应用程序制定的框架。
On the other hand this solution also hold one severe problem. Mobile web application can take a sizable part of the DOM and while this is not a problem for desktop browsers it can cause problems on mobile devices and its accompanying browsers. Also don’t forget that we are talking about the framework made for a mobile web applications.
多个页面可能感觉不是很多，但想想如果Web应用程序有什么会发生什么复杂的页面结构（我已经看到jQuery Mobile页面包含数百个表单元素）。您所看到的页面HTML不是最终的HTML。当jQuery Mobile加载页面时，它会使用自己的CSS来增强它们。
Several pages may not feel that much but think what would happen if web application has complex page structures (and I have seen jQuery Mobile pages holding several hundred form elements). What you see as a page HTML is not final HTML. As jQuery Mobile loads pages it enhances them with its own CSS.
最终的HTML结构可以比初始HTML大2-8倍，一切都是动态完成的。这引出了我们这个模板的第二个问题。更多内容意味着使用/需要更多处理能力来增强页面内容，jQuery Mobile是一个饥饿的大型野兽。
Final HTML structure can be 2-8 times larger then initial HTML and everything is done dynamically. This leads us to this templates second problem. More content means more processing power is used/need to enhance page content and jQuery Mobile is one large hungry beast.
第二个模板解决方案也称为多HTML模板。与多页面模板不同，此页面使用多个HTML页面作为应用程序框架。此解决方案应该让经验丰富的Web开发人员更加接近，并且可以轻松地与服务器端页面生成一起使用。
Second template solution is also called multi HTML template. Unlike multipage template this one uses several HTML pages for application skeleton. This solution should feel much closer to experienced web developers and it can be easily used with server side page generation.
此解决方案比多页模板具有很大的优势。只有初始HTML被加载到DOM中，这使得它成为一种内存友好的方法。页面仅在直接访问（或通过兑现系统加载）时加载到DOM中，并在页面不再活动时立即卸载。从实际角度来看，这是非常好的，页面很容易访问，更不用说更短。
This solution has a big advantage over multipage template. Only initial HTML is loaded into the DOM which makes it a memory friendly approach. Pages are loaded into the DOM only when directly accessed (or loaded through a cashing system) and unloaded as soon as page is not active any more. From practical side this is excellent, pages are easily accessible, not to mention shorter.
这可能看起来像是移动Web应用程序的***解决方案，但有一个大问题。页面转换可能会成为问题，因为在转换发生之前，需要先加载每个HTML文件。这在使用移动设备时更为突出，特别是在使用Android 2.X平台时。第二个问题来自页面卸载。由于每次使用页面时都会加载/卸载页面，因此每次页面处于活动状态时都会触发pageinit事件。
This may look like a best solution for a mobile web application but there’s one big problem. Page transitions can become problematic because every HTML file needs to be loaded first before transition can occur. This is more prominent when working with mobile devices, specially when using Android 2.X platform. Second problem comes from page unloading. Because pages are loaded/unloaded each time they are used pageinit event will trigger every single time page is active.
本部分仅讨论纯粹的vanilla jQuery Mobile方法。
This part will talk only about pure vanilla jQuery Mobile approach.
在创建应用程序之前考虑一下，您期望它能够起作用以及将是页面流。要创建***行为应用程序，我们需要组合两个模板。
Before creating an app think about it, what do you expect it to work and what would be the page flow. To create best behaving application we need to combine both templates.