Backbone.js và jQuery

Người ta nói rằng Backbone xử lý tất cả các trừu tượng cấp cao hơn, trong khi jQuery hoặc các thư viện tương tự hoạt động với DOM, chuẩn hóa các sự kiện, v.v.

Ai đó có thể vui lòng giúp tôi hiểu câu nói này với bất kỳ ví dụ thực tế đơn giản nào.

Ngoài ra, một tính năng quan trọng của MVC framework như Backbone, Knockout là nó giữ cho mô hình (dữ liệu) và khung nhìn được đồng bộ. Nhưng điều này dường như cụ thể ở cấp độ trang chứ không phải trên toàn bộ ứng dụng. Vì vậy, chúng tôi có thể có mô hình / dữ liệu và chế độ xem được đồng bộ hóa trên nhiều trang .. (loại toàn cầu)

Backbone / Knockout thường được sử dụng cho các ứng dụng trang đơn. Vì vậy, trong khi jQuery là một hộp công cụ có thể được sử dụng với bất kỳ trang web nào, thì Backbone dành cho một loại ứng dụng cụ thể và giúp bạn tổ chức mã của mình cho nó. Ít nhất theo kinh nghiệm của tôi, một trong những thách thức lớn nhất trong việc xây dựng một ứng dụng trang là giữ cho mã sạch sẽ và có tính mô-đun, và xương sống sẽ giúp ích rất nhiều cho việc này.

Các đặc điểm của một ứng dụng xương sống điển hình là:

• Về cơ bản là trang html tĩnh, không có gì được tạo trên máy chủ
• Máy chủ hoạt động như một api json REST, cung cấp nội dung cho ứng dụng
• Các phần tử dom để hiển thị dữ liệu được tạo bằng javascript trong các khung nhìn xương sống, sử dụng jQuery và các thư viện tạo mẫu khác nhau để trợ giúp
• Giao tiếp với máy chủ cũng như giữa các phần khác nhau của ứng dụng được thực hiện thông qua các mô hình xương sống

Về câu hỏi của bạn về việc giữ dữ liệu được đồng bộ hóa trên nhiều trang, câu trả lời theo bản năng của tôi là bạn không cần nhiều trang: người dùng có thể nhận thấy rằng trang đang thay đổi, địa chỉ trong thanh url thay đổi nhờ chức năng pushState, nhưng về mặt kỹ thuật, toàn bộ ứng dụng là một trang.

Ưu điểm lớn nhất của cách tiếp cận này là trải nghiệm người dùng mượt mà (không phải tải lại trang), hỗ trợ bộ nhớ đệm tốt vì mọi thứ ngoại trừ dữ liệu json là nội dung tĩnh, đối với mục tiêu di động, khả năng biến ứng dụng web thành ứng dụng di động với phoneGap (bởi vì mọi thứ ngoại trừ json là tĩnh).

Câu mở đầu của bạn thực sự là một tuyên bố rất hay về sự khác biệt giữa Backbone.js và jQuery, vì vậy hãy giải nén nó một chút.

Thứ nhất, hai thư viện không hề cạnh tranh - chúng miễn phí.

Ví dụ, đây là một số điều tôi sẽ làm với jQuery:

• Trình chiếu hoạt hình
• Các cải tiến kiểm soát biểu mẫu, chẳng hạn như "spinner" số kiểu iOS
• Chuyển đổi khả năng hiển thị của các phần tử dựa trên tên lớp

Và một số điều tôi có thể làm trong Backbone.js:

• Tạo album ảnh, trong đó người dùng nhấp vào hình thu nhỏ và có thể xem phiên bản ảnh lớn hơn, cùng với một số dữ liệu như máy ảnh đã được sử dụng, vị trí và tên của nhiếp ảnh gia
• Xây dựng loại trang chính / chi tiết trình bày lưới dữ liệu và cho phép người dùng nhấp vào các phần tử riêng lẻ và cập nhật chúng trong một biểu mẫu.

jQuery vượt trội ở cấp độ vi mô - lựa chọn các phần tử trang, làm mượt các sự khác biệt trong cách trình duyệt xử lý các sự kiện.

Backbone.js là bức tranh lớn hơn. Nó giúp bạn quản lý dữ liệu và logic ứng dụng. Trong ví dụ về album ảnh ở trên, Backbone cung cấp một số cấu trúc hữu ích: bạn có thứ gì đó để chứa tất cả dữ liệu liên quan đến ảnh (mô hình), danh sách tất cả ảnh trong album (bộ sưu tập) và một nơi nào đó để đặt logic xác định điều gì sẽ xảy ra khi người dùng nhấp vào hình thu nhỏ (chế độ xem). Đó là những phần chính trong một ứng dụng hoặc điều khiển Backbone.

Tuy nhiên, Backbone.js được hưởng lợi từ jQuery, hoặc một cái gì đó tương tự, giúp hiển thị kết quả của dữ liệu và logic ứng dụng của bạn vào DOM. Chẳng hạn, việc sử dụng jQuery để chọn phần tử trên trang sẽ đóng vai trò là vùng chứa cho ứng dụng Backbone của bạn là điều phổ biến. Người ta cũng thường sử dụng jQuery $(function () {});để kích hoạt các phần của điều khiển Backbone của bạn. Bạn cũng có thể hiển thị thông báo lỗi xác thực trường biểu mẫu với jQuery.

Bạn chắc chắn có thể xây dựng các giao diện người dùng lớn, phức tạp trong jQuery. Chúng tôi có một số trong ứng dụng mà tôi duy trì tại nơi làm việc. Nhưng chúng rất khó làm việc vì jQuery không được thiết kế để cung cấp cấu trúc cho một ứng dụng. Đặc biệt, API của jQuery, dựa trên việc chọn các nhóm mục và sau đó chuyển các hàm gọi lại để thao tác các mục đó, không phải là một mẫu hay để sử dụng trong một ứng dụng hoặc điều khiển lớn, phức tạp. Bạn kết thúc với rất nhiều hàm lồng vào nhau và rất khó để xem điều gì đang xảy ra.

Tôi hiện đang làm lại một trong những điều khiển đó trong Backbone.js. Ví dụ cuối cùng, đây là bản tóm tắt nhanh về quá trình suy nghĩ của tôi khác nhau như thế nào khi làm việc trên cùng một điều khiển trong cả hai thư viện khác nhau.

Trong jQuery, tôi lo lắng về:

• Tôi có đang sử dụng bộ chọn phù hợp để lấy nhóm liphần tử tôi muốn không?
• Tôi có cần tạo lại danh sách các giá trị đó khi lệnh gọi Ajax này hoàn tất không?
• Làm cách nào để đặt các giá trị mảng này trở lại các inputphần tử trên trang?

Trong Backbone, tôi tập trung hơn vào:

• Logic chính xác để xác thực tập hợp các thuộc tính này trên mục mô hình của tôi là gì?
• Khi người dùng nhấp vào nút Thêm, tôi nên thêm một mục mới vào bộ sưu tập ngay lập tức hay tôi nên đợi cho đến khi họ điền vào tất cả dữ liệu và nó "hợp lệ"?
• Một mục trong bộ sưu tập của tôi nên phản hồi như thế nào khi mục đó ngay trước hoặc sau khi bị xóa?

jQuery xử lý các chi tiết phức tạp và Backbone ở mức cao hơn.

Kết lại, hãy lưu ý rằng tôi đã sử dụng các từ "điều khiển" và "ứng dụng" khi thảo luận về các ví dụ của Backbone.js. Không đúng khi Backbone.js chỉ dành cho các ứng dụng trang đơn. Tuy nhiên, đúng là Backbone.js rất tốt để xây dựng các ứng dụng phức tạp thao tác dữ liệu và xử lý nhiều logic. Sẽ thật ngớ ngẩn nếu sử dụng nó cho các phần tử giao diện người dùng quy mô nhỏ - cấu trúc bổ sung mà nó áp đặt là không cần thiết.

Cập nhật: Về vấn đề nhiều trang, vâng, Backbone cung cấp một cơ chế mạnh mẽ để duy trì dữ liệu của bạn. Mỗi mô hình có một savephương thức sẽ thực hiện lệnh gọi AJAX để lưu trữ các thay đổi trên máy chủ. Vì vậy, miễn là bạn lưu dữ liệu của mình khi bạn di chuyển, bạn có thể có một ứng dụng nhiều trang. Đó là một mô hình rất linh hoạt và đó là cách chúng ta có thể kết thúc việc sử dụng Backbone tại nơi làm việc. Mặc dù tôi rất thích xây dựng ứng dụng một trang, nhưng chúng tôi đã có 10 năm làm việc trong ứng dụng nhiều trang hiện có của mình. Chúng tôi đang tìm cách xây dựng lại một số thành phần giao diện người dùng mạnh mẽ hơn trong Backbone, sau đó đồng bộ hóa các thay đổi với máy chủ trước khi người dùng chuyển sang một trang khác.

Tôi chưa bao giờ nghe nói về những người sử dụng backbone.js trên nhiều trang. Nó hầu như luôn luôn là một số loại ứng dụng trang đơn.

Một trang có thể có nhiều mô hình, chế độ xem và trạng thái khác nhau và có thể tạo ra một ứng dụng mạnh mẽ, đầy đủ.

Nếu bạn đã có kết xuất mẫu / chế độ xem phía máy chủ trong java thì backbone.js KHÔNG dành cho bạn. Để tận dụng tối đa backbone.js, bạn phải di chuyển hoặc sao chép một số mã đó trong javascript giao diện người dùng.

Nếu bạn không muốn thực hiện một ứng dụng trang đơn lẻ (điều này chỉ có nghĩa là một ứng dụng không có trang làm mới hoặc thay đổi, nhưng url vẫn có thể thay đổi và có thể trông giống như nhiều trang đối với người dùng) thì bạn có thể bật tất cả MVC của mình máy chủ và bạn không cần đường trục.

Biên tập:

Những gì xương sống làm là di chuyển một số nội dung MVC thường được xử lý trên máy chủ và chuyển chúng đến máy khách. Đối với nhiều người, điều này có nghĩa là quên máy chủ và chỉ viết ứng dụng của bạn dưới dạng một ứng dụng javascript trang duy nhất. Máy chủ chỉ trở thành một nguồn dữ liệu JSON / REST. Nếu bạn không chuẩn bị để làm điều đó, thì backbone.js không hữu ích.

Backbone là một khung công tác MV * trong khi jQuery là một bộ công cụ DOM.

Các tính năng chính của ứng dụng MV * là định tuyến, liên kết dữ liệu, mẫu / chế độ xem, mô hình và truy cập dữ liệu. Backbone có thể phụ thuộc một phần vào jQuery.

jQuery là một API vững chắc để truy vấn DOM với hỗ trợ trình duyệt rộng rãi và một cộng đồng sôi động. Nó đi kèm với xử lý sự kiện, đối tượng hoãn lại và hoạt ảnh.

Liên kết sự kiện đơn giản bằng jQuery

// When any <p> tag is clicked, we expect to see '<p> was clicked' in the   console.
$( "p" ).on( "click", function() {
console.log( "<p> was clicked" );
});