2011-11-08 26 views
13

Tôi hiện đang xây dựng một trò chơi bằng điện thoại di động bằng cách sử dụng khung công việc jQuery Mobile. Những gì tôi đã kết thúc với rất nhiều mã spaghetti với một html và một số lớp học js.Cấu trúc PhoneGap jQuery Mobile Application

Tôi đã quan tâm để biết nếu có bất kỳ hướng dẫn hay nào để tạo một ứng dụng jQuery Mobile có cấu trúc theo mẫu MVC.

Tôi đã tìm thấy good guide để tạo Ứng dụng MVC với Sencha Touch. Tôi đã tìm kiếm một cái gì đó tương tự với jQuery Mobile.

Trả lời

19

Tôi có một ứng dụng khá lớn và đây là làm thế nào tôi có nó có cấu trúc

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 

dành cho tệp index.html của tôi, tất cả tệp .html khác s là sơ khai. Chúng chỉ chứa <div data-role='page'></div> và các phần tử html cần thiết khác xác định trang và chức năng dự định của nó.

Tôi phát triển ứng dụng trên VS2010, sử dụng Chrome làm trình gỡ lỗi của tôi. Khi tôi cảm thấy tốt với sự tiến bộ của mình, tôi sao chép mọi thứ sang mac của tôi vào một thư mục trong một dự án Eclipse (cho thiết bị Android) cũng là tham chiếu được liên kết trong dự án xCode của tôi (dành cho thiết bị iOS).

Tôi đã làm việc trong dự án này trong khoảng 3-4 tháng và một khi tôi đã vượt qua đường cong học tập của jQM và PhoneGap, đã có tiến bộ rất tốt với cấu trúc này.

+0

Ngoài ra, tôi sẽ đề cập đến, rằng tôi chưa bao giờ lên kế hoạch xây dựng ứng dụng này thành một trang (mặc dù tôi có thể có) đơn giản vì tôi biết nó sẽ dễ dàng hơn trong việc theo dõi nếu nó được chia thành các tệp nhỏ hơn. Ban đầu tôi đã có một tệp .js riêng biệt cho từng đối tượng riêng lẻ (~ 18 đối tượng), nhưng tìm thấy mức sử dụng bộ nhớ (trong chrome anyway) khi tôi kết hợp các tệp. – Sage

+0

Tôi sử dụng gần như cùng một cấu trúc và nó thực sự hoạt động tuyệt vời. Nhưng một khi tôi đọc một bình luận: "Mỗi trang nên làm việc trên riêng của nó, bởi vì một ngày nào đó nó chắc chắn sẽ được gọi trực tiếp". Đó là lý do tại sao tất cả các trang của tôi là các trang html đầy đủ. – JNM

+0

Làm thế nào để bạn xử lý partials trên các trang của bạn? Bạn có thể có cùng đầu trang/chân trang mà bạn muốn hiển thị trên mọi trang. Có thể giữ chỉ một trang HTML đầy đủ và tự động bao gồm tất cả các nội dung khác thông qua ajax với các chức năng di động chuẩn của jQuery không? –

3

Bạn đã thấy mục nhập wiki chưa?

http://wiki.phonegap.com/w/page/36868306/UI%20Development%20using%20jQueryMobile#GettingstartedwithJQueryMobile

và để xem một số mã có một cái nhìn @ Application

mẫu sử dụng jQuery Mobile và PhoneGap http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/

+0

Vâng tôi đã đi qua cả hai người trong số họ và họ là hướng dẫn tốt để bắt đầu với jQuery Mobile. Nhưng khi ứng dụng rất phức tạp, việc viết toàn bộ ứng dụng trong một html và js không có vẻ là một lựa chọn tốt. Tôi đã quan tâm để biết cách viết một ứng dụng có cấu trúc hơn. tức là phân tách các Javascripts thành các mô hình (với dữ liệu) và các khung nhìn (thay đổi DOM). – Nithin

+0

@Nithin: một khuôn khổ như Durandal có thể giúp tổ chức trang web lớn hơn của bạn. Nó thực hiện điều này bằng cách cho phép bạn sử dụng bố cục (lắp ráp các bit logic của các khung nhìn, v.v.). Điều này có nghĩa là bạn có thể có một mvc như cấu trúc thư mục clientside và giữ cho mọi thứ quản lý được. –

Các vấn đề liên quan