Lessons VII : Javascript và lập trình MVC

Javascript và lập trình MVC

Thứ hai, 18 Tháng 8 2008 16:18 aspvn.net Hướng dẫn lập trình Ajax-JavaScript
Email In

Có lẽ những năm gần đây khi công nghệ ajax bắt đầu nổi trội thì dẫn đến hoàng loạt thư viện và framework của javascript được đua nhau phát triển. Sau đây là một framework dành cho việc lập trình MVC của javascript mà mình cảm thấy rất hiệu quả.

1) Những ưu diểm

  • Khiến cho hệ thống của bạn được tổ chức và di trì hiệu quả trong việc chỉnh sửa code
  • Khiến cho code của bạn nhẹ nhàng hơn
  • Còn nữa nhưng mình mới xài nên phải nghiên cứu tiếp😀
2) Cài đặt :
Bạn download bộ đóng gói javascript này về rồi copy chúng vào thư mục nào mà bạn muốn cất giữ nó
Trong bộ đóng gói này gồm một số thư mục được mô tả như sau :
thế là chúng ta đã cài đặt xong
3) Viết chương trình
Tạo một file html tùy ý nào đó rồi thêm dòng script này vào
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head></head>
<body>
<script type=''text/javascript'' src=''jmvc/include.js?helloworld,development''></script>
<div id="todos">
<form id="todo_form">
<input type="text" id="new_todo" value="new todo"/>
</form>
<div>
<img alt="close" src="/trung-tam-tin-hoc/../../images/close.png"/>
<input type="checkbox"/>
<label>Learn JavaScriptMVC</label>
<p/>
</div>
</div>
</body>
</html>
Development : thông báo cho hệ thống biết rằng bạn đang phát triển, thông số khác là test
helloworld : là một file helloworld nằm trong thư mục app. Nó dùng cho việc khai báo các thông số sau:
  • include.plugins(”controller”);
  • include.controllers(”main”); Main là tên file nằm trong thư mục controller
Tiếp đến bạn cần phải tiếp tục viết code trong controller thôi chứ biết sau được giờ😀
Tạo một file main_controller.js đặt trong thư mục controller để cho hệ thống biết sẽ đi vào đây và tìm ra file này và ….code thôi😀
Controller(''todos'',{
   mouseover: function(params){
      params.element.style.backgroundColor = ''#8FBA3C'';
   },
   mouseout: function(params){                       
      params.element.style.backgroundColor = '''';
   },
   ''label click'': function(params){
  var input_element_html = ''<input type="text" value="''+
     params.element.innerHTML+''"/>'';
  if(params.element.childNodes[0].nodeType != 1)
     params.element.innerHTML = input_element_html;
  var input_element = params.element.firstChild;
  // add focus to the input element
  params.element.firstChild.focus();
  params.element.className=''working'';
},
''label input blur'': function(params){
  // grab the label element
  var label = params.element.parentNode;
  // replace its text with the text from the input element
  label.innerHTML = params.element.value;
  label.className='''';
},
''label input keypress'': function(params){
  var keyCode = params.event.keyCode;
  if(typeof keyCode == ''undefined''){ //IE
     if(params.event.charCode == 13) this[''label input blur''](params);
  }else if(keyCode == 13)
     this[''label input blur''](params);
},
''img click'': function(params){
  var todo_element = params.class_element();
  var containing_todos_element = todo_element.parentNode;
  containing_todos_element.removeChild(todo_element);
},
''.check click'': function(params){
  if(params.element.checked)
     params.class_element().style.color = ''gray'';
  else
     params.class_element().style.color = '''';
},
''# .new input focus'': function(params){
  params.element.value = '''';
},
''# .new input blur'': function(params){
  // check the user has entered something
  if(params.element.value != '''' && params.element.value != ''new todo''){
     var new_todo_html = "<div class=''todo''>"+
        "<img src=''../../images/close.png'' alt=''close''/>";
     new_todo_html += "<input type=''checkbox'' class=''check''/><label>";
     new_todo_html += params.element.value+"</label><p class=''clear''> </p></div>";
     // insert the new todo in the list
     Element.insert(''todo_form'', {after: new_todo_html});
  }
  params.element.value = ''new todo'';
},
''# form submit'': function(params){
  params.element = $E(''new_todo'');
  // the blur handler saves the new todo
  this[''# .new input blur''](params);
  // stop the form submit event from propagating
  params.event.kill();
  params.element.value = '''';
}

});

Nguồn: aspvn.net

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: