将一个简单的脚本解构为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();
        });