PhoneGap и JQuery Mobile архитектурно проблемы

Question

PhoneGap и JQuery Mobile архитектурно проблемы

Я создаю свое первое мобильное приложение до сих пор и понятия не имею, является ли мое решение хорошим или нет.

Я использовал один шаблон (файл html) только с одной data-role="page". Каждый элемент контента - это просто div, который скрывается или отображается с помощью javascript. Пожалуйста, проверьте следующий код, чтобы было понятно. Это также точка входа в мое приложение.

 $(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 делений и показывается 10)
У вас есть полный пример приложения с хорошей архитектурой?

1

javascript jquery cordova jquery-mobile

Источник

user1693855 15 фев '13 в 08:57

1 ответ

Другие вопросы по тегам javascript jquery cordova jquery-mobile

user1772651 16 фев '13 в 05:55 2013-02-16 05:55 · Answer 1 · 2013-02-16 05:55

Ваше приложение работает медленно, потому что каждый раз загружается одна большая страница. Страница инициализации запускается несколько раз, вероятно, потому что вы перезагружаете одну большую страницу каждый раз, когда нажимаете на ссылку.

В JQM у вас есть много data-role="page", а не только одна. Ниже приведен стандартный шаблон, который производит Dreamweaver CS6. Он использует CDN JQ & JQM и отформатирован для четырех страниц. Это должно дать вам хорошее начало:

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