將簡單的腳本解構成MVC？

Question

這是JavaScript，所以我怎樣才能把它分成MVC - 我只是想了解一個webapp的最佳方法？

原創劇本

$("button.bdsubmit").click(function(e) {      
       var bdinput = $('#bd .bdinput').val();     
       var yourDate = bdinput;     
       // console.log(yourDate)       

       $.ajax({ 
        type: 'GET', 
        url: $(this).attr('href'), 
        dataType: 'html', 
        error: function(xhr) { 
         //do something about the error 
        }, 
        success: function (response) { 
         console.log(yourDate+ " Success") 
        } 
       }); 
       e.preventDefault(); // Update of return false 

       //append date to page 

       $('body').append('<div class="YouBirthDay">' + yourDate); 
      }); 

HTML

<form id="bd" method="get">     
       <input name="BirthDate" class="bdinput" type="date" /> 
       <button class="bdsubmit" rel="no-refresh">Submit Date</button> 
      </form> 

---

更新爲：

var m = {}; 
var v = {}; 
var c = {}; 

      m.data = $('#bd .bdinput').val(); 



      v.render = function (m) { 

       $('body').append('<div class="YouBirthDay">' + m.data); 
       console.log('data =' + m.data) 

      } 

      c.handleEvent = function() { 

       $("button.bdsubmit").click(function(e) {      
       // var bdinput = $('#bd .bdinput').val();     
       // var yourDate = bdinput;     
       // console.log(yourDate)       

       $.ajax({ 
        type: 'GET', 
        url: $(this).attr('href'), 
        dataType: 'html', 
        error: function(xhr) { 
         //do something about the error 
        }, 
        success: function (response) { 
         // console.log(yourDate+ " Success") 
        } 
       }); 
       e.preventDefault(); // Update of return false 

       v.render(m);      
      }); 



      }; 

      c.handleEvent(); 

，但現在我沒有得到的日期值？有任何想法嗎？

Answer 1

這是我能想到的最好的。請告知，如果您認爲有更好的方法。

var m = {}; 
var v = {}; 
var c = {}; 

      m.data = $('#bd .bdinput').on('change', function() { 
         m.data = $(this).val(); 
      });    


      v.render = function (m) { 

       $('body').append('<div class="YouBirthDay">' + m.data); 
       console.log('data =' + m.data) 

      } 

      c.handleEvent = function() { 

       $("button.bdsubmit").click(function(e) {      
       // var bdinput = $('#bd .bdinput').val();     
       // var yourDate = bdinput;     
       // console.log(yourDate)       

       $.ajax({ 
        type: 'GET', 
        url: $(this).attr('href'), 
        dataType: 'html', 
        error: function(xhr) { 
         //do something about the error 
        }, 
        success: function (response) { 
         // console.log(yourDate+ " Success") 
        } 
       }); 
       e.preventDefault(); // Update of return false 

       v.render(m);      
      }); 



      }; 

      c.handleEvent(); 

更新爲

$(document).ready(function() { 

      //Declare Empty Objects 
      var m = {}; 
      var v = {}; 
      var c = {}; 

      m.data = $('#bd .bdinput').on('change', function() { 
         m.data = $(this).val(); 

      });    

      //View Handles Interactions and Gets Data Via Controller 

      v.render = function (c) { 

       console.log('c-data = ' + c.data); 
       console.log('m-data = ' + m.data);    

       $("button.bdsubmit").click(function(e) {      
       // var bdinput = $('#bd .bdinput').val();     
       // var yourDate = bdinput;     
       // console.log(yourDate)       

       $.ajax({ 
        type: 'GET', 
        url: $(this).attr('href'), 
        dataType: 'html', 
        error: function(xhr) { 
         //do something about the error 
        }, 
        success: function (response) { 
         // console.log(yourDate+ " Success") 
        } 
       }); 

       $('body').append('<div class="YouBirthDay">' + c.data); 
       console.log('c.data =' + c.data); 
       e.preventDefault(); // Update of return false       

       }); 
      }; 

      c.handleEvent = function() { 

       v.render(m); 
      }; 

      c.handleEvent(); 
     });