2013-01-22 30 views
6

Tất cả các ứng dụng của chúng tôi là mvc php và với một lớp hành vi js rất đơn giản trên đầu trang ở phía khách hàng. Chúng tôi muốn cấu trúc javascript nhiều hơn và ngừng yêu cầu "đoạn trích" để thực thi hành vi đơn giản (như tải các plugin jquery khác nhau lên khắp nơi). Chúng tôi không sử dụng các khung công tác MVC javascript và tìm kiếm giải pháp phù hợp nhất cho các ứng dụng mới của chúng tôi.Javascript khuôn khổ cho pushstate "hijax"

Một trong những giải pháp hấp dẫn nhất là tiếp tục hiển thị phía máy chủ cho chúng tôi, như Twitter does. Họ gọi nó là "Hijax + dựng hình phía máy chủ". Chúng tôi không muốn có một khuôn khổ mvc thổi đầy đủ trong javascript nhưng những trích dẫn từ blog này rất hấp dẫn đối với chúng tôi:

Theo hợp đồng, các thành phần của chúng tôi tự đính kèm vào một nút DOM duy nhất, lắng nghe sự kiện qua đoàn, lửa các sự kiện trên DOM và các sự kiện đó được phát tới các thành phần khác thông qua sự kiện tạo bọt DOM. [...] Thứ hai, tất cả các thành phần của chúng tôi được xác định bằng cách sử dụng AMD.

Chúng tôi đã cố gắng xây dựng thứ gì đó của riêng mình, nhưng không có chuyên môn về javascript cấp cao, chúng tôi không thể đạt được điều này. Một cái gì đó như jquery-pjax có vẻ là một giải pháp tốt cho các trường hợp rất đơn giản quá.

Chúng tôi đang tìm kiếm:

  1. Phân ly UI/dữ liệu để loosly vài XHR với DOM
  2. UI thúc đẩy tổ chức sự kiện, vì vậy các nhà phát triển có thể đính kèm các thính giả để tất cả các loại đối tượng DOM

Có cái gì đó giống như một khuôn khổ javascript cho điều này? Với pushState ngày càng nhận được nhiều sự chú ý, tôi hy vọng điều gì đó sẽ có sẵn. Ý tưởng nào?

+1

Cách tiếp cận của IMO Twitter khá khốn khổ. Trở lại tháng 6, tôi đã viết một [demo js bookmarklet] (http://dist.meekostuff.net/meeko-twitter/) và [article] (http://www.meekostuff.net/blog/Twitter-without-Hashbangs/) cho thấy cách họ có thể di chuyển sang 'pushState' bằng cách tăng dần mobile.twitter.com. Tôi đã sử dụng khung công tác js [HTMLDecor] (http://github.com/meekostuff/HTMLDecor/) và bản demo chỉ mất vài ngày. Twitter mất bao nhiêu tháng để di chuyển? –

+0

Bình luận thú vị Sean :-) Tuy nhiên, chúng tôi không chuyển sang js hijax vì muốn đạt được hiệu năng, đôi khi chúng ta cần scripting hành vi nơi html không thể thực hiện công việc và chúng tôi muốn giảm thiểu các ứng dụng phía máy chủ của chúng tôi. Đó là lý do tại sao chúng tôi nghĩ rằng hijax sẽ thực sự phù hợp với chúng tôi. Và khi javascript bị tắt, bạn sẽ nhận được dự phòng của ứng dụng được hiển thị toàn trang "cũ". Và tôi hoàn toàn đồng ý với "hashbangs đã chết": chúng không linh hoạt và nâng cao tiến bộ trở thành một không-đi –

+0

Đó là một vấn đề khác với twitter.com mới - không có cách nào để tweet nếu js bị vô hiệu hóa. Tăng cường tiến bộ như một suy nghĩ sau. –

Trả lời

0

Tôi sẽ cố gắng trả lời câu hỏi của bạn để hết khả năng của tôi. Với điều đó đang được nói, tôi sẽ nói rằng câu hỏi của bạn là rất rộng và khá mơ hồ. Bạn đã không truyền đạt thành công chính xác những gì bạn đang tìm kiếm trong thư viện JavaScript. Bạn đã đề cập rất nhiều chủ đề khác nhau, tất cả đều phức tạp và từng tồn tại cho máy chủ một mục đích cụ thể trong phát triển phía máy khách. Mặc dù có thể có các triển khai của tất cả các khái niệm này trong tự nhiên, không có một câu trả lời rõ ràng để giải quyết tất cả các vấn đề của bạn.

Tôi sẽ bắt đầu với điểm "phân tách UI/dữ liệu" đầu tiên của bạn. Khái niệm này thực sự là về sự tách biệt các mối quan tâm. Bạn muốn giao diện người dùng của mình tồn tại riêng biệt với dữ liệu của mình. Những gì bạn đang thực sự tìm kiếm ở đây là để HTML của bạn phản ánh trạng thái hiện tại của mô hình dữ liệu của bạn. Bạn cũng muốn điều này xảy ra tự động cho bạn. Đây là một quy trình làm việc rất phổ biến với một mẫu thiết kế MVC. JavaScript có một số tùy chọn có sẵn cho bạn: Backbone.js, AngularJS, EmberJS, và danh sách đi về ...

Theo kinh nghiệm cá nhân của tôi sử dụng khá một vài trong số những khuôn khổ khác nhau, tôi sẽ đề nghị Backbonejs cho nó là bản chất linh hoạt và nhẹ . Trong Backbone, chúng tôi có khái niệm về "Chế độ xem" mà có thể được gắn trực tiếp với mô hình dữ liệu. Nó cũng hỗ trợ khái niệm mong muốn của bạn về "pushSate" thông qua cơ chế Routes của nó.

Phần "Giao diện người dùng điều khiển sự kiện" có thể được xử lý bởi bất kỳ số lượng thư viện JavaScript nào khác nhau. jQuery có lẽ là thư viện phổ biến nhất để đính kèm các sự kiện vào "tất cả các loại phần tử dom". Backbone.js cũng cho phép dễ dàng thiết lập ủy quyền sự kiện (thông qua sự kiện bubbling) với đối tượng View của nó.

Tóm lại, nếu bạn đang tìm cách thêm cấu trúc vào JavaScript của mình ... nó thực sự phụ thuộc chính xác bạn muốn gì. Đối với những điều đơn giản, một chút jQuery thủ công sẽ làm. Nếu bạn thực sự muốn có một ứng dụng phong cách MVC hơn, có tiềm năng phát triển, các framework MVC như Backbone là con đường để đi.