logo标签列表

构建一个基于PhoneGap和jQuery Mobile的应用程序架构

javascriptjquery-mobilecordova
13

我目前正在使用jQuery Mobile框架和phonegap构建一个游戏。但是，我最终得到的是一个HTML文件和几个JS类的混乱代码。

我想知道是否有任何好的指南可以创建遵循MVC模式的结构化jQuery Mobile应用程序。

我找到了一份关于使用Sencha Touch创建MVC应用程序的好指南。我正在寻找类似的适用于jQuery Mobile的指南。

2个回答
19

我有一个相当大的程序，这是我的结构：

css
    -- all css files
images
    -- all image files
js
    controller.js -- page events and element actions. Also contains PhoneGap specific methods
    core
        forms.js -- working with forms, saving info
        mobile.js -- basic definitions, AJAX communications
        encrypt.js -- encryption
        global.js   -- helper functions
        storage.js  -- database storage wrapper
    cw
        client.js -- a client object, > 400 lines of js code
        Objects.js -- all other needed objects with <50 lines of js code each
        question.js  -- a question object, > 500 lines of js code
        service.js    -- a service object, > 700 lines of js code
    jq
        jquery-ui.min.js
        jquery.min.js
        jquery.mobile.min.js
        phonegap-1.1.0.js

add_client.html
clients.html
client_list.html
index.html            -- the only file that is structured like a real full html file
manager.html
schedule.html
service.html

除了我的index.html文件之外，所有其他的.html文件都是存根文件。它们仅包含定义页面及其预期功能所需的<div data-role='page'></div>和其他必要的HTML元素。

我使用Chrome作为调试器，在VS2010上开发应用程序。当我对自己的进展感到满意时，我将所有内容复制到一个Eclipse项目中的文件夹（用于Android设备），该项目还是我的xCode项目（用于iOS设备）中的链接引用。

我已经在这个项目上工作了大约3-4个月，一旦我克服了jQM和PhoneGap的学习曲线，就可以非常好地使用这种结构进行进展。

另外，我要提到的是，我从未计划将这个应用程序构建为一个页面（即使我可以），因为我知道如果将其分解成较小的文件会更容易处理和跟踪。最初我为每个单独的对象（约18个对象）有一个单独的.js文件，但当我将这些文件合并时，在内存利用方面（至少在chrome中）发现了一定的收益。 - Sage
我使用几乎相同的结构，它真的非常好用。但是有一次我读到了一条评论：“每个页面都应该能够独立工作，因为总有一天它会被直接调用”。这就是为什么我所有的页面都是完整的HTML页面。 - JNM
你如何处理页面上的部分内容？你可能希望在每个页面上显示相同的页眉/页脚。是否可以只保留一个完整的HTML页面，并通过标准jQuery移动功能使用ajax动态包含所有其他内容？ - Mich Dart
这是个很好的问题，Mich，我还没有找到答案（虽然我相信可以找到一个解决方案）。到目前为止，我们所有页面的页眉都是基本不同的，因为这是我们放置特定页面工具和图标的位置。几乎所有页面的页脚都是静态的。值得注意的是，我们并不会在页脚上添加新的图标，所以页脚管理已经停滞了两年多了。 - Sage
3
是的，我已经阅读了它们两个，它们是入门jQuery Mobile的好指南。但是当应用程序非常复杂时，在单个HTML和JS中编写整个应用程序似乎不是一个好选择。我想知道如何编写更结构化的应用程序。即将JavaScript拆分为模型（带有数据）和视图（修改DOM）。 - Nithin
@Nithin：像Durandal这样的框架可以帮助你组织更大的网站。它通过允许您使用组合（视图逻辑位的组装等）来实现此目的。这意味着您可以在客户端拥有类似MVC的文件夹结构，并使事情变得可管理。 - James Fleming
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接