Đối với view, ta cần quan tâm tới 2 vấn đề: Chia tách View khỏi tính logic và Chia tách logic khỏi View. Từ vị trí của ứng dụng JavaScript đ−ợc chuyển tới trình duyệt khi ứng dụng đ−ợc khởi động, View là trang nhìn thấy đ−ợc, bao gồm các thành phần DOM mà đ−ợc viết bởi HTML. Theo MVC, View có 2 chức năng chính. Nó phải cung cấp một giao diện có thể nhìn thấy đ−ợc cho ng−ời sử dụng để thực hiện các sự kiện từ đó Nó cũng cần phải tự cập nhật t−ơng ứng với những thay đổi trong Model, th−ờng đ−ợc thông báo thông qua Controller.
Nếu nh− ứng dụng sẽ đ−ợc phát triển bởi một nhóm nào đó, View sẽ có thể là đối t−ợng của hầu hết các nội dung, bao gồm cả các nhà thiết kế, các nhà đồ hoạ cũng nh− các nhà lập trình. Nếu nh− yêu cầu các nhà thiết kế viết ch−ơng trình hoặc yêu cầu các nhà lập trình làm đồ hoạ cho một ứn dụng sẽ là một ý t−ởng tồi. Thậm chí nếu nh− ta đang thực hiện cả 2 vai trò này, tốt nhất ta nên tách biệt ra.
Trong những phần tr−ớc, ta đã mô tả cách thức xây dựng các trang web của ta sao cho CSS, HTML và JavaScript đ−ợc định nghĩa thành các file riêng rẽ. Bản thân trang đ−ợc phân thành MVC, với stylesheet là View và HTML/DOM là mô hình ( Một mô hình đối t−ợng tài liệu) . Khi đó HTML và CSS đ−ợc xử lý giống nh− View. Việc tách biệt các nhà thiết kế và các nhà lập trình ra thành các thành phần với nhau vẫn là một ý t−ởng tốt. Với Ajax, công việc đó thực sự là dễ dàng, đơn giản ta chỉ việc chuyển JavaScript ra thành một file riêng.
2.1 Chia tách logic khỏi View
Để chia tác view, ta cần viết các kịch bản thành các file riêng rẽ. Chúng ta viết các điều khiển sự kiện JavaScript nh− sau:
onclick=’importData(“datafeed3.xml”,mytextbox.value);’/>
Khi đó ta đ−a logic công việc vào View. Với đoạn mã trên, datafeed3 là gì? và giá trị của mytextbox phải làm gì? Tại sao hàm importData có 2 hạng và chúng có ý nghĩa nh− thế nào? Ng−ời thiết kế không cần phải biết những thứ nh− vậy.
ImportData là một hàm logic. View và Model không cần thiết phải nói chuyện trực tiếp với nhau. Vì vậy, ta có thể xử lý việc chia tách bằng cách sử dụng một lớp gián tiếp. Khi đó ta viết lại đoạn mã trên nh− sau:
<div class=’importButton’ onclick=’importFeedData()’/>
và định nghĩa một điều khiển sự kiện nh− sau:
Function importFeedData(event) {
importData(“datafeed3.xml”,mytextboxt.value); }
khi đó các hạng phù hợp với hàm importFeedData hơn là một điều khiển sự kiện dị bộ. Nh− vậy ta có thể sử dụng lại hàm này tại bất cứ vị trí nào.
Để duy trì trạng thái tách biệt giữa Controller và View,ta có thể truy cập sự kiện tự động. Thay vì khai báo một điều khiển sự kiện, ta chỉ định một marker của một vài phần mà sẽ đ−ợc thực hiện bởi đoạn mã. Ta có một vài chức năng cho marker này. Ta thêm vào một ID thống nhất cho một thành phần và chỉ định các điều khiển sự kiện trên một cơ sở nào đó (thành tố). Khi đó HTML sẽ đ−ợc viết lại nh− sau:
<div class=’importButton’ id=dataFeedBtn’>
và đoạn mã phía sau hoạt động nh− là một phần của hàm gọi ng−ợc window.onload. Ví dụ :
var dfBtn=document.getElementById(‘dataFeedBtn’); dfBtn.onclick=importFeedData;
Nếu nh− chúng ta muốn thực hiện cùng một hoạt động trên nhiều điều khiển sự kiện, chúng ta cần cung cấp một marker không đồng nhất. Cách đơn giản nhất là định nghĩa thêm một lớp CSS.
2.2 Chia tách View khỏi logic.
ở phần trên ta đã thực hiện công việc sao cho các nhà thiết kế có thể phát triển trang web mà không phải quan tâm đến mã ch−ơng trình. Tuy vậy vẫn còn một số hàm của ứng dụng vẫn đ−ợc nhúng vào trong HTML, ta th−ờng gọi là các khoá. Các khoá này đ−ợc định nghĩa là các tag DIV, và các nhà thiết kế có thể xoá một vài khoá nếu nh− không chú ý.
Điều quan trọng ở đây là ta có thể thay đổi các khoá này thông qua việc tạo ra một vài DOM cho chúng, thay vì khai báo chúng trong HTML. Hơn nữa do ta có thể có nhiều bản sao của cùng một loại trên một trang web, nếu ta không muốn các nhà thiết kế thay đổi trình tự của các khoá, ta có thể khai báo mỗi Div tag thành một lớp, khi đó ta có thể quản lý chúng một cách dễ dàng.