Kiến trúc của một ứng dụng web JavaScript đơn trang?

Question

Làm cách nào để một ứng dụng web JS phức tạp một trang đơn lẻ được cấu trúc ở phía máy khách? Cụ thể là tôi tò mò về cách cấu trúc ứng dụng một cách sạch sẽ về các đối tượng mô hình của nó, các thành phần giao diện người dùng, bất kỳ bộ điều khiển nào và các đối tượng xử lý sự kiên trì của máy chủ.

MVC có vẻ như phù hợp lúc đầu. Nhưng với các thành phần giao diện người dùng lồng nhau ở các độ sâu khác nhau (mỗi cách riêng của chúng hoạt động trên/phản ứng với dữ liệu mô hình và mỗi sự kiện tạo ra sự kiện mà chúng có thể hoặc không thể xử lý trực tiếp), dường như MVC có thể được áp dụng một cách rõ ràng. (Nhưng hãy sửa lại cho tôi nếu đó không phải là trường hợp.)

-

(This question dẫn đến hai đề xuất của việc sử dụng ajax, mà rõ ràng là cần thiết cho bất cứ điều gì khác hơn so với ứng dụng một trang tầm thường nhất.)

Answer 1

Kiến trúc MVC của PureMVC/JS là IMO thanh lịch nhất. Tôi học được rất nhiều từ nó. Tôi cũng tìm thấy Scalable JavaScript Application Architecture bởi Nicholas Zakas hữu ích trong việc nghiên cứu các tùy chọn kiến ​​trúc phía khách hàng.

Hai mẹo khác

1. tôi đã tìm thấy quan điểm, tập trung, và quản lý đầu vào là những lĩnh vực cần được quan tâm đặc biệt trong trang duy nhất ứng dụng web
2. Tôi cũng thấy nó hữu ích để tóm tắt đi thư viện JS, để cửa mở để thay đổi ý định về những gì bạn sử dụng, hoặc trộn & nếu cần.

Answer 2

tôi sẽ đi với jQuery MVC

Answer 3

Check-out http://bennadel.com/projects/cormvc-jquery-framework.htm Ben là khá sắc nét và nếu bạn đào xung quanh trên blog của mình, ông có một số bài viết tốt đẹp về cách CorMVC được đặt lại với nhau và tại sao.

Answer 4

Bạn có thể sử dụng javascript framework MVC http://javascriptmvc.com/

Answer 5

Con đường tôi xây dựng ứng dụng:

• ExtJS framework, ứng dụng trang duy nhất, mỗi thành phần được định nghĩa trong một file JS riêng biệt, nạp theo yêu cầu
• Mỗi thành phần liên lạc với dịch vụ web chuyên dụng của riêng mình (đôi khi nhiều hơn một), tìm nạp dữ liệu vào các cửa hàng ExtJS hoặc các cấu trúc dữ liệu chuyên dụng. lưới, biểu mẫu tải từ hồ sơ, ...

Chỉ cần chọn khung javascript và thực hiện theo các phương pháp hay nhất của nó. Mục yêu thích của tôi là ExtJS và GWT, nhưng YMMV.

KHÔNG được giải pháp của riêng bạn cho việc này. Nỗ lực cần thiết để nhân bản những khung javascript hiện đại nào là quá lớn. Nó luôn luôn là nhanh hơn để thích ứng với một cái gì đó hiện có hơn để xây dựng tất cả từ đầu.

Answer 6

Ứng dụng web mà tôi hiện đang làm việc trên sử dụng JQuery và tôi sẽ không khuyên bạn nên sử dụng nó cho bất kỳ ứng dụng web đơn nào lớn. Hầu hết các khuôn khổ, ví dụ như Dojo, yahoo, google và những người khác sử dụng không gian tên trong thư viện của họ nhưng JQuery không và đây là một nhược điểm đáng kể.

Nếu trang web của bạn được dự định là nhỏ thì JQuery sẽ ổn nhưng nếu bạn dự định xây dựng một trang web lớn thì tôi khuyên bạn nên xem xét tất cả các khung Javascript sẵn có và quyết định xem trang web nào phù hợp nhất với nhu cầu của bạn. Và tôi khuyên bạn nên áp dụng mô hình MVC cho javascript/html của bạn và có lẽ hầu hết mô hình đối tượng của bạn cho javascript có thể được thực hiện như là json mà bạn thực sự quay trở lại từ máy chủ thông qua ajax và javascirpt sử dụng json để hiển thị html.

Tôi khuyên bạn nên đọc sách Ajax đang hoạt động vì nó bao gồm hầu hết nội dung bạn cần biết.

Answer 7

Alternative: hãy xem để ItsNat

suy nghĩ trong JavaScript nhưng mã giống nhau trong Java trong máy chủ với các API DOM cùng, trong máy chủ là cách dễ dàng hơn để quản lý ứng dụng của bạn mà không cần khách hàng tùy chỉnh/cầu vì giao diện người dùng và dữ liệu cùng nhau.

Answer 8

Hoặc có một cái nhìn tại https://github.com/flosse/scaleApp

Answer 9

Tôi đang sử dụng Samm.js trong nhiều ứng dụng một trang với thành công rực rỡ

Answer 10

trình bày Nicholas Zakas như chia sẻ bởi Dean là một nơi rất tốt để bắt đầu. Tôi cũng đang đấu tranh để trả lời cùng một câu hỏi trong một thời gian. Sau khi thực hiện một vài sản phẩm Javascript quy mô lớn, hãy nghĩ đến việc chia sẻ các bài học như một kiến ​​trúc tham chiếu trong trường hợp ai đó cần nó. Có một cái nhìn tại địa chỉ:

http://boilerplatejs.org/

Nó đề cập đến chung mối quan tâm phát triển javascript như:

• Giải pháp cơ cấu
• Tạo hệ thống phân cấp mô-đun phức tạp
• Tự chứa thành phần UI
• dựa tổ chức sự kiện liên lạc giữa các mô-đun
• Rou ting, Lịch sử, Bookmarking
• đơn vị kiểm tra
• Localization
• Document hệ

, vv

Answer 11

Điều tốt nhất để làm là nhìn vào ví dụ sử dụng các khung khác:

TodoMVC giới thiệu nhiều khung SPA.

Answer 12

NikaFramework cho phép bạn tạo ứng dụng một trang. Đồng thời cho phép bạn viết HTML, CSS (SASS), JavaScript vào các tệp riêng biệt và chỉ gộp chúng vào một tệp đầu ra cuối cùng.

Answer 13

Question - What makes an application complex ? 

Trả lời - Việc sử dụng từ 'phức tạp' trong chính câu hỏi.Do đó, xu hướng chung sẽ là tìm ra giải pháp phức tạp ngay từ đầu.

Question - What does the word complex means ? 

Trả lời - Mọi thứ chưa được biết hoặc hiểu một phần. Ví dụ: Lý thuyết về trọng lực thậm chí ngày nay là COMPLEX đối với tôi nhưng không phải với Sir Isaac Newton, người đã phát hiện ra nó vào năm 1655.

Question - What tools can I use to deal with complexity ? 

Trả lời - Hiểu và đơn giản.

Question - But I understand my application . Its still complex ? 

Trả lời - Hãy suy nghĩ kỹ vì sự hiểu biết và phức tạp không tồn tại. Nếu bạn hiểu một ứng dụng rất lớn, tôi chắc chắn bạn sẽ đồng ý rằng nó không là gì ngoài việc tích hợp các đơn vị nhỏ và đơn giản.

Question - Why all of the above philosophical discussion for a question on 
      Single Page Application (SAP)? 

trả lời - Bởi vì,

-> SPA không phải là một loại công nghệ cốt lõi mà mới được phát minh mà chúng ta cần phải phát minh lại bánh xe cho rất nhiều điều mà chúng ta đang làm trong phát triển ứng dụng.

-> Một khái niệm của nó được thúc đẩy bởi sự cần thiết cho hiệu suất tốt hơn, tính khả dụng, khả năng mở rộng và khả năng bảo trì của các ứng dụng web.

-> Mẫu thiết kế khá mới được xác định của nó, do đó, sự hiểu biết về SPA như là một mẫu thiết kế đi rất xa trong việc đưa ra các quyết định sáng suốt về kiến ​​trúc SPA.

-> Ở cấp độ gốc không có SPA phức tạp, bởi vì sau khi hiểu được nhu cầu của ứng dụng và mẫu SPA, bạn sẽ nhận ra rằng bạn vẫn đang tạo một ứng dụng, khá giống với cách bạn đã làm trước đây với một số sửa đổi và sắp xếp lại trong cách tiếp cận phát triển.

Question - What about the use of Frameworks ? 

trả lời - Khung là nồi hơi mã tấm/giải pháp cho một số mô hình thường được xác định và chung chung, vì thế họ có thể cất cánh x% (biến, dựa trên các ứng dụng) tải từ phát triển ứng dụng nhưng sau đó không nhiều nên dự kiến ​​trong số họ đặc biệt cho các ứng dụng nặng và đang phát triển. Nó luôn luôn là một trường hợp tốt để được hoàn toàn kiểm soát cấu trúc ứng dụng của bạn và dòng chảy nhưng quan trọng nhất là mã cho nó. Không nên có vùng màu xám hoặc đen trong mã ứng dụng.

Question - Can you suggest one of the many approaches to SPA architecture ? 

Trả lời - Hãy suy nghĩ về khung của riêng bạn dựa trên bản chất của ứng dụng của bạn. Phân loại các thành phần ứng dụng. Hãy tìm một khung công tác hiện có gần với khung dẫn xuất của bạn, nếu bạn tìm thấy nó, sau đó sử dụng nó, nếu bạn không tìm thấy nó thì tôi đề nghị đi trước với chính bạn. Tạo khung công tác là một nỗ lực khá cao nhưng lại tạo ra kết quả tốt hơn trong thời gian dài.Một số thành phần cơ bản trong khuôn khổ SPA của tôi sẽ là:

• Data Source: Mô hình/Bộ sưu tập mô hình

• Đánh dấu Up để trình bày dữ liệu: Templates

• Tương tác với các ứng dụng: Sự kiện

• Chụp và điều hướng của tiểu bang: Định tuyến

• Utilities, widget và plug-ins: thư viện

Hãy cho tôi biết nếu điều này giúp trong bất kỳ cách nào và may mắn với kiến ​​trúc SPA của bạn !!

Answer 14

Tôi khuyên bạn nên khám phá Yeoman. Nó cho phép bạn sử dụng "thực hành tốt nhất" hiện có cho dự án mới của bạn.

Ví dụ:

nếu bạn quyết định sử dụng Angular.js, có một Yeoman generator, mà cung cấp cho bạn một cấu trúc cho việc định tuyến, điểm, dịch vụ, vv Ngoài ra cho phép bạn kiểm tra, rút ​​gọn mã của bạn, vv

Nếu bạn quyết định sử dụng Backbone, kiểm tra. this generator