Tôi đã cố gắng hiểu tiện ích của backbone.js từ trang web của mình http://documentcloud.github.com/backbone , nhưng tôi vẫn không thể tìm ra nhiều.

Bất cứ ai có thể giúp tôi bằng cách giải thích cách nó hoạt động và làm thế nào nó có thể hữu ích trong việc viết JavaScript tốt hơn?

Backbone.js về cơ bản là một khung ánh sáng uber cho phép bạn cấu trúc mã Javascript của mình theo kiểu MVC (Model, View, Controller) trong đó ...

Mô hình là một phần của mã của bạn để lấy và điền dữ liệu,

Chế độ xem là đại diện HTML của mô hình này (chế độ xem thay đổi khi mô hình thay đổi, v.v.)

và Trình điều khiển tùy chọn trong trường hợp này cho phép bạn lưu trạng thái của ứng dụng Javascript thông qua URL hashbang, ví dụ: http://twitter.com/#search?q=backbone.js

Một số ưu điểm mà tôi đã khám phá với Backbone:

• Không còn Javascript Spaghetti: mã được sắp xếp và chia thành các tệp .js có ý nghĩa về mặt ngữ nghĩa, sau này được kết hợp bằng JAMMIT

• Không còn nữa jQuery.data(bla, bla): không cần lưu trữ dữ liệu trong DOM, thay vào đó lưu trữ dữ liệu trong các mô hình

• ràng buộc sự kiện chỉ hoạt động

• thư viện tiện ích Underscore cực kỳ hữu ích

• mã backbone.js được ghi lại tốt và đọc rất tốt. Mở mắt ra một số kỹ thuật mã JS.

Nhược điểm:

• Mất một lúc tôi mới quấn đầu và tìm ra cách áp dụng nó vào mã của mình, nhưng tôi là một người mới sử dụng Javascript.

Đây là một tập hợp các hướng dẫn tuyệt vời về việc sử dụng Backbone với Rails làm back-end:

CloudEdit: Hướng dẫn Backbone.js với Rails:

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

ps Ngoài ra còn có lớp Bộ sưu tập tuyệt vời này cho phép bạn xử lý các bộ sưu tập mô hình và mô hình lồng nhau, nhưng tôi không muốn làm bạn bối rối ngay từ đầu.

Nếu bạn định xây dựng các giao diện người dùng phức tạp trong trình duyệt thì có lẽ bạn sẽ thấy mình cuối cùng đã phát minh ra hầu hết các phần tạo nên các khung như Backbone.js và Sammy.js. Vì vậy, câu hỏi là, bạn có đang xây dựng một cái gì đó đủ phức tạp trong trình duyệt để sử dụng nó không (vì vậy cuối cùng bạn không tự mình phát minh ra thứ tương tự).

Nếu những gì bạn dự định xây dựng là thứ mà UI thường xuyên thay đổi cách hiển thị nhưng không đến máy chủ để lấy toàn bộ trang mới thì có lẽ bạn cần một cái gì đó như Backbone.js hoặc Sammy.js. Ví dụ điển hình của một cái gì đó tương tự là GMail của Google. Nếu bạn đã từng sử dụng, bạn sẽ nhận thấy rằng nó tải xuống một đoạn lớn HTML, CSS và JavaScript khi bạn đăng nhập lần đầu và sau đó mọi thứ xảy ra trong nền. Nó có thể di chuyển giữa việc đọc email và xử lý hộp thư đến và tìm kiếm và quay lại tất cả chúng mà không bao giờ yêu cầu một trang hoàn toàn mới được hiển thị.

Đó là loại ứng dụng mà các khung công tác này vượt trội để dễ dàng phát triển hơn. Nếu không có chúng, bạn sẽ kết hợp với nhau một tập hợp các thư viện riêng lẻ để có được các phần của chức năng (ví dụ: jQuery BBQ để quản lý lịch sử, Events.js cho các sự kiện, v.v.) hoặc bạn sẽ tự mình xây dựng mọi thứ và phải tự duy trì và kiểm tra mọi thứ. Trái ngược với thứ gì đó như Backbone.js có hàng ngàn người đang xem nó trên Github, hàng trăm nhánh mà mọi người có thể đang làm việc với nó, và hàng trăm câu hỏi đã được hỏi và trả lời ở đây trên Stack Overflow.

Nhưng không có gì quan trọng nếu những gì bạn dự định xây dựng không đủ phức tạp để xứng đáng với đường cong học tập liên quan đến một khung. Nếu bạn vẫn đang xây dựng PHP, Java hoặc các trang web khác mà máy chủ phía sau vẫn đang thực hiện tất cả các công việc xây dựng trang web theo yêu cầu của người dùng và JavaScript / jQuery chỉ đóng băng theo quy trình đó, bạn sẽ không sẽ không cần hoặc chưa sẵn sàng cho Backbone.js.

Xương sống là ...

... Một thư viện các thành phần rất nhỏ mà bạn có thể sử dụng để giúp tổ chức mã của mình. Nó được đóng gói dưới dạng một tệp JavaScript. Không bao gồm các nhận xét, nó có ít hơn 1000 dòng JavaScript thực tế. Nó được viết một cách hợp lý và bạn có thể đọc toàn bộ trong vài giờ.

Đó là một thư viện mặt trước, bạn đưa nó vào trang web của bạn với một thẻ script. Nó chỉ ảnh hưởng đến trình duyệt và nói rất ít về máy chủ của bạn, ngoại trừ việc nó lý tưởng nhất là phơi bày một API yên tĩnh.

Nếu bạn có API, Backbone có một vài tính năng hữu ích sẽ giúp bạn nói chuyện với nó, nhưng bạn có thể sử dụng Backbone để thêm tính tương tác vào bất kỳ trang HTML tĩnh nào.

Xương sống là dành cho ...

... thêm cấu trúc vào JavaScript.

Vì JavaScript không thực thi bất kỳ mẫu cụ thể nào, các ứng dụng JavaScript có thể trở nên rất lộn xộn rất nhanh. Bất cứ ai đã xây dựng một cái gì đó vượt quá tầm thường trong JavaScript đều có thể gặp phải các câu hỏi như:

1. Tôi sẽ lưu trữ dữ liệu của mình ở đâu?
2. Tôi sẽ đặt chức năng của mình ở đâu?
3. Làm thế nào tôi kết nối các chức năng của mình lại với nhau, để chúng được gọi theo cách hợp lý và không chuyển sang spaghetti?
4. Làm thế nào tôi có thể làm cho mã này được duy trì bởi các nhà phát triển khác nhau?

Xương sống tìm cách trả lời những câu hỏi này bằng cách cho bạn:

• Mô hình và Bộ sưu tập để giúp bạn trình bày dữ liệu và bộ sưu tập dữ liệu.
• Lượt xem, để giúp bạn cập nhật DOM khi dữ liệu của bạn thay đổi.
• Một hệ thống sự kiện để các thành phần có thể lắng nghe nhau. Điều này giữ cho các thành phần của bạn được ghép nối và ngăn ngừa spaghettization.
• Một tập hợp tối thiểu các quy ước hợp lý, để các nhà phát triển có thể làm việc cùng nhau trên cùng một cơ sở mã.

Chúng tôi gọi đây là mô hình MV *. Mô hình, Lượt xem và các tính năng bổ sung tùy chọn.

Xương sống là ánh sáng

Mặc dù xuất hiện ban đầu, Backbone rất nhẹ, nó hầu như không làm gì cả. Những gì nó làm là rất hữu ích.

Nó cung cấp cho bạn một tập hợp các đối tượng nhỏ mà bạn có thể tạo và có thể phát ra các sự kiện và lắng nghe nhau. Bạn có thể tạo một đối tượng nhỏ để thể hiện một nhận xét chẳng hạn, và sau đó một đối tượng bình luận nhỏ để thể hiện sự hiển thị của bình luận ở một vị trí cụ thể trong trình duyệt.

Bạn có thể nói với bình luận Xem lắng nghe bình luận và vẽ lại khi bình luận thay đổi. Ngay cả khi bạn có cùng một nhận xét được hiển thị ở một số nơi trên trang của bạn, tất cả các chế độ xem này có thể nghe cùng một mô hình nhận xét và giữ nguyên trạng thái đồng bộ.

Cách soạn mã này giúp bạn không bị rối ngay cả khi cơ sở mã của bạn trở nên rất lớn với nhiều tương tác.

Mô hình

Khi bắt đầu, việc lưu trữ dữ liệu của bạn trong một biến toàn cục hoặc trong DOM dưới dạng các thuộc tính dữ liệu là điều phổ biến . Cả hai đều có vấn đề. Các biến toàn cầu có thể xung đột với nhau và nói chung là dạng xấu. Các thuộc tính dữ liệu được lưu trữ trong DOM chỉ có thể là các chuỗi, bạn sẽ phải phân tích chúng ra và vào lại. Thật khó để lưu trữ những thứ như mảng, ngày tháng hoặc đối tượng và phân tích dữ liệu của bạn ở dạng có cấu trúc.

Các thuộc tính dữ liệu trông như thế này:

<p data-username="derek" data-age="42"></p>

Xương sống giải quyết điều này bằng cách cung cấp một đối tượng Mô hình để thể hiện dữ liệu của bạn và các phương thức liên quan . Giả sử bạn có một danh sách việc cần làm, bạn sẽ có một mô hình đại diện cho từng mục trong danh sách đó.

Khi mô hình của bạn được cập nhật, nó sẽ khởi động một sự kiện. Bạn có thể có một khung nhìn gắn liền với đối tượng cụ thể đó. Khung nhìn lắng nghe các sự kiện thay đổi mô hình và tái hiện chính nó.

Lượt xem

Xương sống cung cấp cho bạn các đối tượng View nói chuyện với DOM. Tất cả các chức năng thao túng DOM hoặc lắng nghe các sự kiện DOM tại đây.

Chế độ xem thường thực hiện chức năng kết xuất để vẽ lại toàn bộ chế độ xem hoặc có thể là một phần của chế độ xem. Không có nghĩa vụ phải thực hiện chức năng kết xuất, nhưng đó là một quy ước chung.

Mỗi chế độ xem được liên kết với một phần cụ thể của DOM, do đó bạn có thể có searchFormView, chỉ nghe biểu mẫu tìm kiếm và shoppingCartView, chỉ hiển thị giỏ hàng.

Lượt xem cũng thường bị ràng buộc với các Mô hình hoặc Bộ sưu tập cụ thể. Khi Model cập nhật, nó sẽ kích hoạt một sự kiện mà khung nhìn lắng nghe. Khung nhìn có thể họ gọi render để vẽ lại chính nó.

Tương tự, khi bạn nhập vào một biểu mẫu, chế độ xem của bạn có thể cập nhật một đối tượng mô hình. Mọi chế độ xem khác khi nghe mô hình đó sẽ gọi chức năng kết xuất của chính nó.

Điều này cho chúng ta một sự tách biệt rõ ràng các mối quan tâm giữ cho mã của chúng ta gọn gàng và ngăn nắp.

Chức năng kết xuất

Bạn có thể thực hiện chức năng kết xuất của mình theo bất kỳ cách nào bạn thấy phù hợp. Bạn có thể chỉ cần đặt một số jQuery vào đây để cập nhật DOM theo cách thủ công.

Bạn cũng có thể biên dịch một mẫu và sử dụng nó. Một mẫu chỉ là một chuỗi với các điểm chèn. Bạn chuyển nó đến một hàm biên dịch cùng với một đối tượng JSON và lấy lại một chuỗi đã biên dịch mà bạn có thể chèn vào DOM của mình.

Bộ sưu tập

Bạn cũng có quyền truy cập vào các bộ sưu tập lưu trữ danh sách các mô hình, do đó, một todoCollection sẽ là một danh sách các mô hình việc cần làm. Khi một bộ sưu tập tăng hoặc giảm một mô hình, thay đổi thứ tự của nó hoặc một mô hình trong một bộ sưu tập cập nhật, toàn bộ bộ sưu tập sẽ kích hoạt một sự kiện.

Một khung nhìn có thể nghe một bộ sưu tập và tự cập nhật bất cứ khi nào bộ sưu tập cập nhật.

Bạn có thể thêm các phương thức sắp xếp và lọc vào bộ sưu tập của mình và làm cho nó tự động sắp xếp nó chẳng hạn.

Và các sự kiện để gắn kết tất cả lại với nhau

Càng nhiều càng tốt, các thành phần ứng dụng được tách rời nhau. Họ giao tiếp bằng các sự kiện, do đó, shoppingCartView có thể lắng nghe bộ sưu tập shoppingCart và tự vẽ lại khi giỏ hàng được thêm vào.

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

Tất nhiên, các đối tượng khác cũng có thể đang lắng nghe shoppingCart và có thể thực hiện những việc khác như cập nhật tổng số hoặc lưu trạng thái trong bộ nhớ cục bộ.

• Lượt xem lắng nghe Mô hình và kết xuất khi mô hình thay đổi.
• Lượt xem lắng nghe các bộ sưu tập và hiển thị danh sách (hoặc lưới hoặc bản đồ, v.v.) khi một mục trong bộ sưu tập thay đổi.
• Các mô hình lắng nghe Chế độ xem để họ có thể thay đổi trạng thái, có thể khi một biểu mẫu được chỉnh sửa.

Việc tách các đối tượng của bạn như thế này và liên lạc bằng các sự kiện có nghĩa là bạn sẽ không bao giờ bị vướng vào các nút thắt, và việc thêm các thành phần và hành vi mới là dễ dàng. Các thành phần mới của bạn chỉ cần lắng nghe các đối tượng khác đã có trong hệ thống.

Công ước

Mã được viết cho Backbone tuân theo một tập hợp các quy ước lỏng lẻo. Mã DOM thuộc về Chế độ xem. Mã bộ sưu tập thuộc về Bộ sưu tập. Logic kinh doanh đi theo một mô hình. Một nhà phát triển khác chọn codebase của bạn sẽ có thể bắt đầu chạy.

Tóm lại

Xương sống là một thư viện nhẹ cho vay cấu trúc mã của bạn. Các thành phần được tách rời và liên lạc qua các sự kiện để bạn không gặp rắc rối. Bạn có thể mở rộng cơ sở mã của mình một cách dễ dàng, chỉ bằng cách tạo một đối tượng mới và để nó lắng nghe các đối tượng hiện có của bạn một cách thích hợp. Mã của bạn sẽ sạch hơn, đẹp hơn và dễ bảo trì hơn.

Cuốn sách nhỏ của tôi

Tôi thích Backbone đến nỗi tôi đã viết một cuốn sách giới thiệu nhỏ về nó. Bạn có thể đọc nó trực tuyến tại đây: http://nicholasjohnson.com/backbone-book/

Tôi cũng đã chia tài liệu thành một khóa học trực tuyến ngắn, bạn có thể tìm thấy ở đây: http://www.forwardadvance.com/cference/backbone . Bạn có thể hoàn thành khóa học trong khoảng một ngày.

Đây là một bài thuyết trình thú vị:

Giới thiệu về Backbone.js

Gợi ý (từ các slide):

• Rails trong trình duyệt? Không .
• Một khung MVC cho JavaScript? Sorta .
• Một máy trạng thái chất béo lớn? CÓ !

Backbone.js là một khung JavaScript giúp bạn tổ chức mã của mình. Nó thực sự là xương sống mà bạn xây dựng ứng dụng của mình. Nó không cung cấp các widget (như jQuery UI hoặc Dojo).

Nó cung cấp cho bạn một tập hợp các lớp cơ sở tuyệt vời mà bạn có thể mở rộng để tạo mã JavaScript sạch có giao diện với các điểm cuối RESTful trên máy chủ của bạn.

JQuery và Mootools chỉ là một hộp công cụ với rất nhiều công cụ của dự án của bạn. Xương sống hoạt động như một kiến ​​trúc hoặc xương sống cho dự án của bạn mà bạn có thể xây dựng một ứng dụng bằng JQuery hoặc Mootools.

Đây là một video giới thiệu khá hay: http://vimeo.com/22685608

Nếu bạn đang tìm kiếm nhiều hơn về Rails và Backbone, Th thinkbot có cuốn sách khá hay này (không miễn phí): https : // workairs. Dùtbot.com / backbone-js-on-rails

Tôi phải thừa nhận rằng tất cả "lợi thế" của MVC chưa bao giờ làm cho công việc của tôi dễ dàng hơn, nhanh hơn hoặc tốt hơn. Nó chỉ làm cho toàn bộ trải nghiệm mã hóa trừu tượng hơn và tốn thời gian hơn. Bảo trì là một cơn ác mộng khi cố gắng gỡ lỗi một ai đó cho thấy ý nghĩa của sự tách biệt. Không biết có bao nhiêu người bạn đã từng cố cập nhật một trang web FLEX đã sử dụng Laungorm làm mô hình MVC nhưng phải mất 30 giây để cập nhật thường có thể mất hơn 2 giờ (săn / truy tìm / gỡ lỗi chỉ để tìm một sự kiện duy nhất ). MVC đã và vẫn là, đối với tôi, một "lợi thế" mà bạn có thể nhồi nhét.

Đây là một bài viết Bắt đầu nhanh chóng tôi đã viết trên BackboneJS. Hy vọng nó giúp! http://www.infragistic.com/community/bloss/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx

backbone.js là Model-View-Controller (MVC) với JavaScript nhưng Extjs tốt hơn xương sống cho Mô hình MVC bằng tập lệnh java

Với xương sống, bạn có thể tự do làm hầu hết mọi thứ bạn muốn. Thay vì cố gắng vượt qua api và tùy chỉnh, tôi sẽ sử dụng Backbonejs vì nó đơn giản và dễ thực hiện. Một lần nữa, thật khó để nói những gì bạn yêu cầu trong số hai là một thư viện một thành phần khác

Xương sống được tạo bởi Jeremy Ashkenas, người cũng đã viết CoffeeScript. Là một ứng dụng nặng về JavaScript, những gì chúng ta biết bây giờ là Backbone chịu trách nhiệm cấu trúc ứng dụng thành một cơ sở mã mạch lạc. Underscore.js, sự phụ thuộc duy nhất của xương sống, cũng là một phần của ứng dụng DocumentCloud.

Backbone giúp các nhà phát triển quản lý một mô hình dữ liệu trong ứng dụng web phía máy khách của họ với nhiều kỷ luật và cấu trúc như bạn có trong logic ứng dụng phía máy chủ truyền thống.

Lợi ích bổ sung của việc sử dụng Backbone.js

1. Xem Backbone như một thư viện, không phải là một khung
2. Javascript hiện đang được tổ chức theo cách có cấu trúc, Mô hình (MVVM)
3. Cộng đồng người dùng lớn

Nó cũng thêm định tuyến bằng bộ điều khiển và khung nhìn với KVO. Bạn sẽ có thể phát triển các ứng dụng "AJAXy" với nó.

Xem nó như một khung Sproutcore hoặc Cappuccino nhẹ.

Là một mẫu thiết kế MVC ở phía máy khách, tin tôi đi .. Nó sẽ giúp bạn tiết kiệm hàng tấn mã, chưa kể mã sạch và rõ ràng hơn, mã dễ bảo trì hơn. Có thể hơi khó khăn lúc đầu, nhưng tin tôi đi, đó là một thư viện tuyệt vời.

Rất nhiều câu trả lời hay rồi. Xương sống js giúp giữ mã được tổ chức. Việc thay đổi mô hình / bộ sưu tập sẽ đảm nhiệm việc hiển thị chế độ xem tự động giúp giảm nhiều chi phí phát triển.

Mặc dù nó cung cấp sự linh hoạt tối đa để phát triển, các nhà phát triển nên cẩn thận để phá hủy các mô hình và loại bỏ các khung nhìn đúng cách. Nếu không, có thể có rò rỉ bộ nhớ trong ứng dụng.

Một ứng dụng web liên quan đến nhiều tương tác của người dùng với nhiều yêu cầu AJAX, đôi khi cần phải thay đổi và chạy trong thời gian thực (như Facebook hoặc StackOverflow) nên sử dụng khung MVC như Backbone.js. Đó là cách tốt nhất để xây dựng mã tốt.

Nếu ứng dụng chỉ nhỏ, thì Backbone.js là quá mức cần thiết, đặc biệt là cho người dùng lần đầu.

Backbone cung cấp cho bạn MVC phía máy khách và tất cả các lợi thế ngụ ý này.