Tiểu luận môn Phương pháp nghiên cứu Khoa học KIẾN TRÚC MVC TRONG BACKBONE.JS

Checkbox có thành phần Model quản lý trạng thái của nó là check hay uncheck, thành phần View thể hiện Checkbox với trạng thái tương ứng lên trên màn hình, và thành phần Controller để xử

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Tiểu luận môn Phương pháp nghiên cứu Khoa học

Đề tài:

KIẾN TRÚC MVC TRONG BACKBONE.JS

GVHD: GS TSKH Hoàng Kiếm HVTH: Văn Phú Hội

MSHV: CH1201105

TP HCM, Tháng 04 năm 2013

[Type text] [Type text] [Type text]

Nhận xét của GVHD

[Type text] [Type text] [Type text]

LỜI MỞ ĐẦU

Mục đích của việc xây dựng một kiến trúc là để làm cho cái gì đó tốt hơn và tạo điều kiện thuân lợi cho việc phát triển các phần mềm ứng dụng Kiến trúc này được xem như một thư viện hay frameworks (bộ khung) Do đó người lập trình viên chỉ cần tìm hiểu khai thác rồi thực hiện (tức là lập trình) để gắn kết chúng lại với nhau, tạo ra sản phẩm Tùy theo cách sáng tạo của lập trình viên mà sản phẩm tạo ra thể hiện những tính chất khác nhau, nhưng vẫn nhất quán trong cách xây dựng

Khi bạn bắt đầu viết ứng dụng web thì bạn cảm thấy dễ dàng thao tác với DOM bởi thư viện JavaScrip (chẳng hạn như JQuery) và các plugin khác Thách thức với phương pháp này là khi ứng dụng của bạn về lâu dài càng mở rộng ra thêm thì việc quản lý code trở nên khó khăn hơn Như việc viết các sự kiện các phần tử DOM, AJAX và các hàm callback của Jquery trở nên khó khăn với một đống code rời rạc không có cấu trúc cụ thể Khó khăn nữa là việc nâng cấp và sữa chữa gây tốn nhiều thời gian

May mắn thay, có nhiều cách để tránh vấn đề này Trong những cách đó, tôi chọn Backbone.js để giải quyết, nhằm rút ngắn chi phí về thời gian và tiền bạc để hoàn thành

dự án Backbone.js là frameworks của JavaScript và các thư viện có thể mang lại cơ cấu

và tổ chức cho các dự án của bạn

Em xin cảm ơn thầy GS TSKH Hoàng Văn Kiếm đã hướng dẫn, đặc biệt những câu chuyện thầy kể về tính sáng tạo trong khoa học đã tạo cho em nguồn cảm hứng để suy nghĩ tìm ra vấn đề, và giải quyết vấn đề trong tin học

Trong quá trình nghiên cứu không tránh khỏi những thiếu sót, mong nhận được sự đóng góp ý kiến của thầy để bài thu hoạch của em được hoàn chỉnh hơn

Trang 1

PHẦN 1: Kiến trúc MVC trong Backbone.js

1 Backbone.js là gì?

Backbone.js là một thư viện của JavaScript với giao diện RESRful JSON và được tạo bởi Jeremy Ashkenas Thế giới của Backbone.js bao gồm ba “chủng tộc” đó chính là Model, View và Controller viết tắt là MVC Công nghệ của Backbone.js là sự kết hợp hài hòa giữa các yếu tố của model, view và controller tạo ra khả năng phát triển ứng dụng phức tạp mà không mất quá nhiều công sức Backbone.js đạt được điều này bằng cách cho phép các nhà phát triển web và điện thoại di động để tổ chức code JavaScript và HTML theo khuôn mẫu Backbone cũng cung cấp nhiều tính năng đơn giản và tăng tốc độ quy trình sử lý kỹ thuật Nếu bạn đang sở hữu những dịch vụ theo phong cách RESTful hoặc dựa trên JSON và mong muốn xây dựng một ứng dụng đầu cuối theo signle-page model thì Backbone.js là sự lựa chọn số một

Khi bạn làm một website nhỏ không dùng nhiều JavaScript thì việc xây dựng một mô hình MVC cho JavaScript là không cần thiết Nhưng khi làm một website lớn đòi hỏi

sử dụng nhiều JavaScript thì bạn nên sử dụng mô hình MVC Mô hình này giúp cho bạn dễ quản lý code và bảo trì sửa chữa

2 Mô hình MVC?

a. MVC là gì?

Mô hình MVC (Model-View-Controller) là một kiến trúc phần mềm hay mô hình thiết kế được sử dụng trong kỹ thuật phần mềm nó giúp cho các lập trình viên HVTH: Văn Phú Hội – CH1201105 Trang 5

Môn học: Phương pháp nghiên cứu khoa học

GVHD: GS TSKH Hoàn Kiếm

tách ứng dụng của họ ra nhiều thành phần Model, View và Controller Mỗi thành phần có một nhiệm vụ riêng biệc và độc lập với thành phần khác

Khi người sử dụng hoặc những đối tượng khác cần thay đổi trạng thái của đối tượng đồ họa, nó sẽ tương tác thông qua Controller của đối tượng đồ họa Controller sẽ thực hiện việc thay đổi trên Model Khi có bất kỳ sự thay đổi nào xảy ra ở Model, nó sẽ phát ra thông điệp (broadcast messega) thông báo cho View

và Controller biết Nhận được thông điệp từ Model, View sẽ cập nhật lại thể hiện của mình, đảm bảo rằng nó luôn là thể hiện trực quan chính xác của Model Còn Controller khi nhận được từ thông điệp từ Model, sẽ có những tương tác cần thiết phản hồi lại người sử dụng hoặc các đối tượng khác

Hình bên dưới cho thấy vòng đời hoạt động của mô hình MVC

Ví dụ:

Lấy ví dụ một GUI Component (thành phần đồ họa người dùng) đơn giản là Checkbox Checkbox có thành phần Model quản lý trạng thái của nó là check hay uncheck, thành phần View thể hiện Checkbox với trạng thái tương ứng lên trên màn hình, và thành phần Controller để xử lý những sự kiện khi có sự tương tác của người sử dụng hoặc các đối tượng khác lên Checkbox Khi người sử dụng nhấn chuột lên Checkbox, thành phần controller của Checkbox sẽ xử lý sự kiện này, yêu cầu thành phần Model thay đổi dữ liệu trạng thái Sau khi thay đổi trạng thái, thành phần Model phát thông điệp tới thành phần View và thành phần

HVTH: Văn Phú Hội – CH1201105 Trang 6

Controller Thành phần View của Checkbox nhận được thông điệp sẽ cập nhật lại thể hiện của Checkbox, phản ánh chính xác tình trạng Checkbox do Model lưu trữ Thành phần Controller nhận được thông điệp do Model gởi tới sẽ có những tương tác phản hồi với người sử dụng nếu cần thiết

b. Model là gì?

Đây là thành phần chứa tất cả các nghiệp vụ logic, phương thức xử lý, truy xuất database, đối tượng mô tả dữ liệu như các class, hàm xử lý…nhiệm vụ của Model:

- Nhận các yêu cầu từ View

- Thực hiện các yêu cầu đó (tính toán, kết nối cơ sở dữ liệu)

- Trả về các giá trị tính toán cho View

c. View là gì?

Đảm nhận việc hiển thị thông tin, tương tác với người dùng, nơi chứa tất cả các đối tượng GUI như textbox, images…Hiểu một cách đơn giản nó là tập hợp các form hoặc các tập tin HTML

d. Controller là gì?

Giữ nhiệm vụ đồng bộ hóa dữ liệu giữa Model và View, điều hướng các yêu cầu

từ người dùng và gọi đúng những phương thức xỷ lý chúng… Chẳng hạn thành phần này sẽ nhận request từ url và form để thao tác trực tiếp tới Model

3 Đặc điểm mô hình MVC

Lợi ích quan trọng nhất của mô hình MVC là nó giúp cho ứng dụng dễ bảo trì, module hóa các chức năng, và được xây dựng nhanh chóng MVC tách các tác vụ của ứng dụng thành các thành phần riêng lẻ như View, Model và Controller giúp cho việc xây dựng ứng dụng nhẹ nhàng hơn Dễ dàng thêm các tính năng mới, và các tính năng

cũ có thể dễ dàng thay đổi MVC cho phép các nhà thiết kế và các nhà phát triển có thể làm việc đồng thời với nhau MVC cho phép thay đổi một phần ứng dụng mà không ảnh hưởng tới các thành phần khác

Sở dĩ như vậy vì kiến trúc MVC đã tách biệt (decoupling) sự phụ thuộc giữa các thành phần trong một đối tượng đồ họa, làm tăng tính linh động (flexibility), và tính tái sử dụng (reusebility) của đối tượng đồ họa đó Một đối tượng đồ họa bây giờ có thể dễ dàng thay đổi giao diện bằng cách thay đổi thành phần View của nó trong khi

HVTH: Văn Phú Hội – CH1201105 Trang 7

Môn học: Phương pháp nghiên cứu khoa học

GVHD: GS TSKH Hoàn Kiếm

cách thức lưu trữ (Model) cũng như xử lý (Controller) không hề thay đổi tương tự, ta cũng có thể thay đổi cách thức lưu trữ cũng như xử lý của đối tượng đồ họa mà những thành phần còn lại vẫn giữ nguyên không thay đổi

4 Khi nào cần JavaScript MVC ?

Việc xây dựng các web apps signle-page và các user interface phức tạp sẽ khó hơn khi chỉ dùng JQuery Vấn đề là khi dùng JQuery để xây dựng một ứng dụng web, sẽ viết các code JavaScript lồng vào nhau của các JavaScript callback và không có một cấu trúc cụ thể Backbone.js sẽ hỗ trợ chúng ta xây dựng một cấu trúc application rõ ràng hơn theo mô hình MVC (Model-View-Controller)

Backbone.js tạo một cấu trúc cho web application bằng cách cung cấp các Model với các ràng buộc key-value và custom event, Collection với nhiều API, View với khai báo sử lý các sự kiện và kết nối nó với tất cả các API qua RESTful JSON Interface

5 Ưu điểm và nhược điểm mô hình MVC.

a. Ư đ ể u i m:

Phát triển phần mềm: có tính chuyên nghiệp hóa, có thể chia cho nhiều nhóm được đào tạo nhiều kỹ năng khác nhau, từ thiết kế mỹ thuật cho đến lập trình và cho đến tổ chức cơ sở dữ liệu giúp phát triển ứng dụng nhanh, đơn giản, dễ nâng cấp…

Bảo trì: với các lớp được phân chia như trên, thì các thành phần của một hệ thống

dễ được thay đổi, nhưng sự thay đổi có thể bị cô lập trong từng trường hợp, hoặc chỉ ảnh hưởng đến lớp ngay gần kề nó, chứ không phát tán náo loạn trong cả chương trình

Mở rộng: với các lớp được chia theo mô hình MVC, thì việc thêm chức năng cho từng lớp sẽ dễ dàng hơn là phân chia theo cách khác

b. Nh ượ đ ể c i m:

Đối với dự án nhỏ thì việc áp dụng mô hình MVC cồng kềnh, tốn thời gian cho quá trình phát triển Tốn thời gian trung chuyển dữ liệu giữa các tầng

HVTH: Văn Phú Hội – CH1201105 Trang 8

PHẦN 2: Các nguyên tắc sáng tạo về kiến trúc MVC trong Backbonejs

1 Nguyên tắc phân nhỏ.

a. Nội dung:

- Chia đối tượng thành các thành phần độc lập

- Làm đối tượng trở nên tháo lắp được

- Tăng mức độ phân nhỏ đối tượng

b. Phân tích:

Nguyên tắc phân nhỏ được thấy rõ ràng khi ta nhìn vào mô hình MVC của Backbone.js Thay vì xây dựng website bằng JavaScript thông thường hay với những thư viện khác như JQuery, thì mỗi chức năng là một đoạn code rời rạc HTML và JavaScript viết lẫn lộn vào nhau tạo nên một mớ hỗn độn khó quản lý.Trong khi đó Backbone.js đã chia nhỏ web thành ba phần chính đó là Model, View và Controller Mỗi thành phần này ứng với mỗi chức năng riêng và chúng có thể tách ra riêng biệt, độc lập với nhau Mối quan hệ giữa ba thành phần này rành mạch rõ ràng, khiến việc kiểm tra ứng dụng trở nên dễ dàng hơn, đồng thời trách nhiệm của từng thành phần được định nghĩa rõ ràng và cả ba đều làm việc ăn ý với nhau

Code cho lớp Model:

var mTodo = new Backbone.Model({

//write code here });

Code cho lớp View:

var vTodo = new Backbone.View.Extend({

//write code here });

Code cho lớp Controller:

Var cTodo = new Backbone.Collection({

//write code here

HVTH: Văn Phú Hội – CH1201105 Trang 9

Môn học: Phương pháp nghiên cứu khoa học

GVHD: GS TSKH Hoàn Kiếm

});

2 Nguyên tắc tách khỏi

a. Nội dung:

Tách thành phần gây “phiền phức” (tính chất “phiền phức”) hay ngược lại tách thành phần duy nhất “cần thiết” (tính chất “cần thiết”) ra khỏi đối tượng

b. Phân tích:

Backbone.js chia thành ba thành phần chính Model, View và Controller, điều này giúp tách biệt các chức năng cho mỗi thành phần Khi xây dựng web chỉ sử dụng JavaScript, HTML và CSS thông thường với thư việc Jquery, thì việc code HTML nằm lẫn lộn trong JS điều này gây mất thời gian quản lý Bây giờ với mô hình MVC thì View đảm nhận công việc sử dụng template tách hẳn HTML rờm rà rồi đặt vào vị trí mong muốn trên giao diện

Kiến trúc MVC đã tách biệt sự phụ thuộc giữa các thành phần trong một đối tượng

đồ họa, làm tăng tính linh động và tính tái sử dụng của đối tượng đồ họa đó Một đối tượng đồ họa bây giờ có thể dễ dàng thay đổi giao diện bằng cách thay đổi thành phần View của nó, trong khi cách thức lưu trữ (Model) cũng như xử lý (Controller) không hề thay đổi Tương tự ta có thể thay đổi cách thức lưu trữ (Model) hoặc cách xử lý (Controller) của đối tượng đồ họa mà những thành phần còn lại vẫn giữ nguyên

3 Nguyên tắc phẩm chất cục bộ

a. Nội dung:

- Chuyển đối tượng (hay môi trường bên ngoài, tác động bên ngoài) có cấu trúc đồng nhất thành không đồng nhất

- Các thành phần khác nhau của đối tượng phải có các chức năng khác nhau

- Mỗi thành phần của đối tượng phải ở trong những điều kiện thích hợp nhất của công việc

b. Phân tích:

Nguyên tắc phẩm chất cục bộ được phản ánh rõ nét trong công nghệ Backbone.js

Mô hình MVC gồm ba thành phần Model, View và Controller độc lập nhau, nhưng chúng có mối quan hệ mật thiết với nhau Mỗi thành phần đảm nhiệm vai trò riêng trong ứng dụng

HVTH: Văn Phú Hội – CH1201105 Trang 10

Vai trò từng thành phần trong kiến trúc Backbone.js:

View (tầng giao diện): là phần giao diện với người dùng, bao gồm việc hiện dữ

liệu ra màn hình, cung cấp các menu, nút bấm, hộp đối thoại, lựa chọn …để người dùng có thể xem, xóa, sửa, tìm kiếm và làm các thao tác đối với dữ liệu trong hệ thống Thông thường, các thông tin cần hiển thị được lấy từ thành phần Model

Model (tầng dữ liệu): là một đối tượng hoặc một tập hợp các đối tượng biểu diễn

cho phần dữ liệu của chương trình Nó được giao nhiệm vụ cung cấp dữ liệu cho

cơ sở dữ liệu và lưu dữ liệu vào các kho chứa dữ liệu Tất cả các nghiệp vụ logic được thực thi ở Model Dữ liệu từ người dùng sẽ thông qua View đến Controller

và được kiểm tra ở Model trước khi lưu vào cơ sở dữ liệu Việc truy xuất, xác nhận và lưu dữ liệu là một phần của Model

Controller (tầng điều khiển): là phần điều khiển của ứng dụng, điều hướng các

nhiệm vụ đến đúng phương thức có chức xử lý nhiệm vụ đó Nó chịu trách nhiệm

xử lý các tác động về mặt giao diện, các thao tác đối với Model, cuối cùng là chọn một View thích hợp để hiện dữ liệu ra màn hình

4 Nguyên tắc kết hợp

a. Nội dung:

- Kết hợp các đối tượng đồng nhất hoặc các đối tượng dùng cho các hoạt động kế cận

- Kết hợp về mặt thời gian các hoạt động đồng nhất hoặc kế cận

b. Phân tích:

Với Backbone.js khi bạn trình bày dữ liệu như là Model, thì dữ liệu này có thể được tạo ra, xác nhận, hủy bỏ hay là lưu và server Bất cứ một hành động nào trên giao diện gây ra một sự thay đổi của Model, thì Model bắt sự kiện thay đổi đó; tất

cả View mà thể hiện trạng thái của Model có thể được thông báo về sự thay đổi này Vì vậy mà chúng có thể được đáp ứng phù hợp và tự vẽ lại (re-rendering) những thông tin mới Đó là sự kết hợp giữa Model và View giúp ứng dụng tự cập nhật một cách đơn giản và trình tự

HVTH: Văn Phú Hội – CH1201105 Trang 11

Môn học: Phương pháp nghiên cứu khoa học

GVHD: GS TSKH Hoàn Kiếm

Sự kết hợp giữa các thành phần trong MVC

Sự kết hợp quan trọng khác nữa trong Backbone.js là sử dụng công nghệ AJAX (Asynchronous JavaScript and XML)và JSON (JavaScript Object Notation) AJAX thì gọi ngầm một lệnh background để phía server thực hiện và nhận thông tin trả về, cập nhật thông tin của trang nhanh mà không cần phải load lại cả trang, rất mất thời gian load lại cho những cái không cần cập nhật JSON sử dụng cú pháp của của JavaScript để mô tả đối tượng dữ liệu, nhưng JSON là ngôn ngữ và nền tảng độc lập Trình phân tích cú pháp JSON và các thư viện JSON tồn tại cho nhiều ngôn ngữ lập trình khác nhau

Chính vì sự kết hợp giúp cho ứng dụng sử dụng công nghệ Backbone.js trở nên nhanh hơn và linh động hơn

5 Nguyên tắc vạn năng

a. Nội dung:

Đối tượng thực hiện một số chức năng, do đó không cần tham gia của đối tượng khác

b. Phân tích:

Với kiến trúc Backbone.js giúp cho bạn thiết kế, xây dựng nhiều loại ứng dụng khác nhau: web tin tức, game…

Nếu bạn xây dây dựng ứng dụng web với kiến trúc Backbone.js, bạn hoàn toàn có thể sử dụng phần mềm PhoneGap để biên dịch ứng dụng web của bạn thành ứng

HVTH: Văn Phú Hội – CH1201105 Trang 12