[Type text] [Type text] [Type text] ĐẠI HỌC QUỐC GIA TP.HCM 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] [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 Môn học: Phương pháp nghiên cứu khoa học GVHD: GS TSKH Hoàn Kiếm 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 Môn học: Phương pháp nghiên cứu khoa học GVHD: GS TSKH Hoàn Kiếm 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 Môn học: Phương pháp nghiên cứu khoa học GVHD: GS TSKH Hoàn Kiếm 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 [...]... nhau giữa mô hình MVC và mô hình ba lớp - Khác biệt rõ nhất là cách xử lý yêu cầu của 2 mô hình - Mô hình MVC, thành phần Model giữ chức năng Business layer và Data Access trong mô hình 3 lớp HVTH: Văn Phú Hội – CH1201105 Trang 17 Môn học: Phương pháp nghiên cứu khoa học GVHD: GS TSKH Hoàn Kiếm - Mô hình 3 lớp thường sử dụng trong lập trình ứng dụng, trong khi đó MVC được ưa chuộng trong lập trình website... định trên các thiêt bị di động 6 Nguyên tắc chứa trong a Nội dung: HVTH: Văn Phú Hội – CH1201105 Trang 13 Môn học: Phương pháp nghiên cứu khoa học GVHD: GS TSKH Hoàn Kiếm Một đối tượng được đặt bên trong một đối tượng khác và bản thân nó lại chứa đối tượng thứ ba - Một đối tượng chuyển động xuyên suốt bên trong một đối tượng khác b Phân tích: - Kiến trúc Backbone.js với thiết kế lập trình hướng đối tượng,... Trang 14 Môn học: Phương pháp nghiên cứu khoa học GVHD: GS TSKH Hoàn Kiếm b Phân tích: Trong kiến trúc Backbone.js sử dụng thêm ba thư viện trung gian Underscore, JSON và Jquery nhằm hỗ trợ xử lý dữ liệu và tương tác tới các ứng dụng web khác Mô hình giao thức truyền dữ liệu dạng JSON  Underscore: là thư viện của JavaScript cung cấp rất nhiều chức năng hỗ trợ trong việc lập trình, mà bạn mong đợi trong. .. tích: Mô hình MVC được áp dụng cho các ngôn ngữ như JavaScript, PHP, NET… và dần thay thế cho mô hình ba lớp Mô hình MVC trong Backbone.js đã được trình bày ở đầu bài Bây giờ tôi giới thiệu sơ lược về mô hình ba lớp và so sánh sự khác HVTH: Văn Phú Hội – CH1201105 Trang 16 Môn học: Phương pháp nghiên cứu khoa học GVHD: GS TSKH Hoàn Kiếm nhau và giống nhau với mô hình MVC Tương lai mô hình MVC sẽ thay... 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 Môn học: Phương pháp nghiên cứu khoa học GVHD: GS TSKH Hoàn Kiếm dụng chạy.. .Môn học: Phương pháp nghiên cứu khoa học GVHD: GS TSKH Hoàn Kiếm 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,... Kết luận Với mô hình MVC trong kiến trúc Backbone.js giúp chúng ta phát triển ứng dụng web hiệu quả với website chỉ có một trang Đồng thời mô hình MVC cũng được sử dụng một cách rộng rãi trong nhiều ngôn ngữ lập trình khác nhau Việc tiếp cận mô hình MVC này cũng không có gì quá khó đối với các lập trình viên Qua bài phân tích trên, hi vọng giúp cho các bạn phần nào hiểu rõ về mô hình MVC trong kiến trúc. .. Đó 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... thời gian và công sức rất nhiều so với việc ngồi viết JavaScript HVTH: Văn Phú Hội – CH1201105 Trang 15 Môn học: Phương pháp nghiên cứu khoa học GVHD: GS TSKH Hoàn Kiếm theo cách thông thường Đúng như khẩu hiệu “viết ít hơn, làm nhiều hơn” Dưới đây là các chức năng của Jquery: • Truy cập các phần tử trong nội dung trang web • Thay đổi hình thức giao diện của trang web • Thay đổi nội dung trang web •... phần, có khả năng dịch chuyển với nhau d Phân tích: Với kiến trúc MVC trong Backbone.js, mỗi đối tượng đảm nhận vai trò khác nhau nhưng liên quan nhau, tương tác lẫn nhau Do đó việc xây dựng ứng dụng web rất riện lợi, mỗi người đảm nhận một khâu, một công đoạn mà không ảnh hưởng gì tới tiến độ hay những rắc rối trong khi làm Mặt khác với kiến trúc MVC này xây dựng hoàn toàn bằng thư viện JavaScript và . [Type text] [Type text] ĐẠI HỌC QUỐC GIA TP.HCM 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:. ý kiến của thầy để bài thu hoạch của em được hoàn chỉnh hơn. Trang 1 Môn học: Phương pháp nghiên cứu khoa học GVHD: GS TSKH Hoàn Kiếm PHẦN 1: Kiến trúc MVC trong Backbone. js 1. Backbone. js. CH1201105 Trang 14 Môn học: Phương pháp nghiên cứu khoa học GVHD: GS TSKH Hoàn Kiếm b. Phân tích: Trong kiến trúc Backbone. js sử dụng thêm ba thư viện trung gian Underscore, JSON và Jquery nhằm