Mục đích của backbone.js là gì?

Related Articles

… Một thư viện rất nhỏ những thành phần mà bạn hoàn toàn có thể sử dụng để giúp tổ chức triển khai mã của mình. Nó được đóng gói dưới dạng một tệp JavaScript. Không gồm có những nhận xét, nó có ít hơn 1000 dòng JavaScript thực tiễn. Nó được viết một cách hài hòa và hợp lý và bạn hoàn toàn có thể đọc hàng loạt trong vài giờ .Đó là một thư viện mặt trước, bạn đưa nó vào website của bạn với một thẻ script. Nó chỉ tác động ảnh hưởng đến trình duyệt và nói rất ít về sever của bạn, ngoại trừ việc nó nên trình diện một API lý tưởng .Nếu bạn có API, Backbone có một vài tính năng hữu dụng sẽ giúp bạn trò chuyện với nó, nhưng bạn hoàn toà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 đơn cử nào, những ứng dụng JavaScript hoàn toàn có thể trở nên rất lộn xộn rất nhanh. Bất cứ ai đã kiến thiết xây dựng một cái gì đó vượt quá tầm thường trong JavaScript đều hoàn toàn có thể gặp phải những 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 vấn đáp 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ý, vì vậy 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à quy mô MV *. Mô hình, Lượt xem và những tính năng bổ trợ tùy chọn .

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

Mặc dù Open khởi đầu, Backbone rất nhẹ, phần nhiều không làm gì cả. Những gì nó làm là rất hữu dụng .Nó phân phối cho bạn một tập hợp những đối tượng người tiêu dùng nhỏ mà bạn hoàn toàn có thể tạo và hoàn toàn có thể phát ra những sự kiện và lắng nghe nhau. Ví dụ, bạn hoàn toàn có thể tạo một đối tượng người dùng nhỏ để biểu lộ nhận xét và sau đó một đối tượng người dùng phản hồi nhỏ để biểu lộ hiển thị phản hồi ở một vị trí đơn cử trong trình duyệt .Bạn hoàn toàn có thể nói với phản hồi Xem lắng nghe phản hồi và vẽ lại khi phản hồi đổi khác. Ngay cả khi bạn có cùng một nhận xét được hiển thị ở một số ít nơi trên trang của bạn, tổng thể những chính sách xem này hoàn toàn có thể nghe cùng một quy mô nhận xét và giữ đồng nhất .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 khởi đầu, việc tàng trữ tài liệu của bạn trong một biến toàn cục hoặc trong DOM dưới dạng những thuộc tính tài liệu là điều phổ cập. Cả hai đều có yếu tố. Các biến toàn thế giới hoàn toàn có thể xung đột với nhau và nói chung là dạng xấu. Các thuộc tính tài liệu được tàng trữ trong DOM chỉ hoàn toàn có thể là những chuỗi, bạn sẽ phải nghiên cứu và phân tích chúng ra và vào lại. Thật khó để tàng trữ những thứ như mảng, ngày tháng hoặc đối tượng người dùng và nghiên cứu và phân tích tài liệu của bạn ở dạng có cấu trúc .Các thuộc tính tài liệu trông như thế này :

>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 quy mô của bạn được update, nó sẽ khởi động một sự kiện. Bạn hoàn toàn có thể có một khung nhìn gắn liền với đối tượng người dùng đơn cử đó. Khung nhìn lắng nghe những sự kiện đổi khác quy mô và tái hiện chính nó .

Lượt xem

Xương sống cung ứng cho bạn những đối tượng người dùng View trò chuyện với DOM. Tất cả những tính năng thao túng DOM hoặc lắng nghe những 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ính sách xem được link với một phần đơn cử của DOM, do đó bạn hoàn toà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 thường được ràng buộc với những Mô hình hoặc Bộ sưu tập đơn cử. Khi Model update, nó sẽ kích hoạt một sự kiện mà khung nhìn lắng nghe. Khung nhìn hoàn toà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ính sách xem của bạn hoàn toàn có thể update một đối tượng người dùng quy mô. Mọi khung nhìn khác nghe quy mô đó sau đó sẽ gọi công dụng kết xuất của chính nó .Điều này cho tất cả chúng ta một sự tách biệt rõ ràng những mối chăm sóc giữ cho mã của tất cả chúng ta ngăn nắp và ngăn nắp .

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

Bạn hoàn toàn có thể thực thi công dụng kết xuất của mình theo bất kể cách nào bạn thấy tương thích. Bạn hoàn toàn có thể chỉ cần đặt 1 số ít jQuery vào đây để update DOM theo cách thủ công bằng tay .Bạn cũng hoàn toàn 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 những đ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 người dùng JSON và lấy lại một chuỗi đã biên dịch mà bạn hoàn toà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 vấn vào những bộ sưu tập tàng trữ list những quy mô, do đó, một todoCollection sẽ là một list những quy mô việc cần làm. Khi một bộ sưu tập được hoặc mất một quy mô, biến hóa thứ tự của nó hoặc một quy mô trong một bộ sưu tập update, hàng loạt bộ sưu tập sẽ kích hoạt một sự kiện .Một khung nhìn hoàn toàn có thể nghe một bộ sưu tập và tự update bất kỳ khi nào bộ sưu tập update .Bạn hoàn toàn có thể thêm những phương pháp 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 hóa sắp xếp nó ví dụ điển hình .

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, những thành phần ứng dụng được tách rời nhau. Họ tiếp xúc bằng những sự kiện, do đó, shoppingCartView hoàn toàn 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, những đối tượng người tiêu dùng khác cũng hoàn toàn có thể đang nghe shoppingCart và hoàn toàn có thể triển khai những việc khác như update 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 những đối tượng người dùng của bạn như thế này và liên lạc bằng những sự kiện có nghĩa là bạn sẽ không khi nào bị vướng vào những nút thắt, và việc thêm những thành phần và hành vi mới là thuận tiện. Các thành phần mới của bạn chỉ cần lắng nghe những đối tượng người tiêu dùng khác đã có trong mạng lưới hệ thống .

Công ước

Mã được viết cho Backbone tuân theo một bộ 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 những sự kiện để bạn không gặp rắc rối. Bạn hoàn toàn có thể lan rộng ra cơ sở mã của mình một cách thuận tiện, chỉ bằng cách tạo một đối tượng người dùng mới và để nó lắng nghe những đối tượng người tiêu dù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 dưỡng 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 ra mắt nhỏ về nó. Bạn hoàn toà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 hoàn toàn có thể tìm thấy ở đây : http://www.forwardadvance.com/cference/backbone. Bạn hoàn toàn có thể triển khai xong khóa học trong khoảng chừng một ngày .

More on this topic

Comments

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Advertismentspot_img

Popular stories