Article:
MVC của V: tách V và C ra khỏi trang HTML
1637
 |
ngocdaothanh.myopenid.com  172Updated over 3 years ago |
Khi lập trình web theo cấu trúc MVC, hiển nhiên trang web HTML xuất ra là V. Tuy thế, bản thân cái V này lại còn có thể phân tách tiếp thành MVC. Điểm lợi của cấu trúc MVC thì nói chung ai cũng biết, do đó nếu làm được điều này thì quá lợi.
Bài viết này trình bày cách tách. Để hiểu bạn cần có kinh nghiệm HTML, CSS và Javascript. Tất cả những thứ này đều có thể học ở W3Schools.
Trang web HTML nào cũng đều có cấu trúc DOM. Như vậy các phần tử (như <p>, <input>) của trang HTML tạo thành M. Một cách trừu tượng, CSS và JavaScript là V và C. Ta cần tách V và C ra khỏi M, sao cho tập tin .html chỉ chứa mã HTML, mã CSS và JavaScript nằm trong tập tin .css và .js riêng.
Tách V
Đọc hướng dẫn ở W3Schools là đã có thể tách CSS ra khỏi HTML. Một cách dễ hiểu, khi tập tin .html không còn chứa những cái đại loại như style=xxx, width=yyy là bạn đã tách xong.
Tách C
Tách C khó hơn. Làm sao để tách JavaScript ra khỏi đoạn mã HTML sau?
hello.html
<html>
<body>
<input type="button" value="Hello" onclick="alert('Hello')" />
</body>
</html>Bước đầu tiên, ta tách tạm mã JavaScript thành khối <script> riêng nhưng vẫn nằm cùng tập tin với khối HTML:
hello.html
<html>
<body>
<input type="button" id="b1" value="Hello" />
<script>
var b1 = document.getElementById("b1");
b1.onclick = function() {
alert("Hello");
}
</script>
</body>
</html>Mấu chốt của bước này là lôi được đúng phần tử bạn cần ra khỏi mớ HTML rồi gán onclick cho nó. Có 2 cách để lôi: dùng id để lôi trực tiếp và lần tìm (duyệt) trên cây DOM. Dùng id dễ hơn, ví dụ trên gán id cho phần tử HTML, rồi dùng hàm getElementById để để lôi phần tử ra. Bí quyết để thành chuyên gia JavaScript, cần thông thạo cách dùng các hàm JavaScript có sẵn trên trình duyệt để thao tác trên cây DOM.
Thường chương trình viết một lần không xong ngay mà phải sửa đi sửa lại. Sau khi chỉnh sửa kha khá, ta làm bước tiếp theo là tách hẳn khối <script> thành tập tin riêng:
hello.html
<html>
<head>
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
<input type="button" id="b1" value="Hello" />
</body>
</html>hello.js
windows.onload = function() {
var b1 = document.getElementById("b1");
b1.onclick = function() {
alert("Hello");
}
}
Mấu chốt của bước này là phải dùng hàm onload để đợi cây DOM load xong thì mới chạy đoạn mã JavaScript. Nguyên nhân là tập tin HTML được thực thi từ trên xuống dưới, mà đoạn
<script type="text/javascript" src="hello.js"></script>lại được đặt phía trên đoạn khai báo nút Hello. Vấn đề trở nên phức tạp nếu có nhiều tập tin .js và tập tin nào cũng phải đợi cây DOM load xong. Trường hợp này nên dùng thư viện JavaScript cao cấp như jQuery, YUI, chúng đều có hàm tiện ích để giải quyết vấn đề này.
over 3 years ago
over 3 years ago