Javascript 将简单脚本解构为MVC？

这是Javascript，那么我该如何将其划分为MVC？我只是想了解Web应用程序的最佳方法

原稿

$("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);
            });

$（“button.bdsubmit”）。单击（函数（e）{
var bdinput=$（'#bd.bdinput'）.val（）；
var yourDate=bdinput；
//console.log（您的日期）
$.ajax({
键入：“GET”，
url:$（this.attr（'href'），
数据类型：“html”，
错误：函数（xhr）{
//对这个错误做些什么
},
成功：功能（响应）{
console.log（yourDate+“Success”）
}
});
e、 preventDefault（）；//返回值的更新为false
//将日期附加到页面
$（'body'）。追加（''+yourDate）；
});

HTML

提交日期

---

更新至：

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();

var m={}；
var v={}；
var c={}；
m、 数据=$（'#bd.bdinput'）.val（）；
v、 渲染=函数（m）{
$（'body'）。追加（''+m.data）；
console.log（'data='+m.data）
}
c、 handleEvent=函数（）{
$（“button.bdsubmit”）。单击（函数（e）{
//var bdinput=$（'#bd.bdinput'）.val（）；
//var yourDate=bdinput；
//console.log（您的日期）
$.ajax({
键入：“GET”，
url:$（this.attr（'href'），
数据类型：“html”，
错误：函数（xhr）{
//对这个错误做些什么
},
成功：功能（响应）{
//console.log（yourDate+“Success”）
}
});
e、 preventDefault（）；//返回值的更新为false
v、 渲染（m）；
});
};
c、 handleEvent（）；

---

但是现在我没有得到日期值？有什么想法吗？

这是我能想到的最好的了。如果您认为有更好的方法，请告知

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();

var m={}；
var v={}；
var c={}；
m、 data=$（'#bd.bdinput'）。on（'change'，function（）{
m、 数据=$（this.val（）；
});             
v、 渲染=函数（m）{
$（'body'）。追加（''+m.data）；
console.log（'data='+m.data）
}
c、 handleEvent=函数（）{
$（“button.bdsubmit”）。单击（函数（e）{
//var bdinput=$（'#bd.bdinput'）.val（）；
//var yourDate=bdinput；
//console.log（您的日期）
$.ajax({
键入：“GET”，
url:$（this.attr（'href'），
数据类型：“html”，
错误：函数（xhr）{
//对这个错误做些什么
},
成功：功能（响应）{
//console.log（yourDate+“Success”）
}
});
e、 preventDefault（）；//返回值的更新为false
v、 渲染（m）；
});
};
c、 handleEvent（）；

更新至

$（文档）.ready（函数（）{
//声明空对象
var m={}；
var v={}；
var c={}；
m、 data=$（'#bd.bdinput'）。on（'change'，function（）{
m、 数据=$（this.val（）；
});             
//视图处理交互并通过控制器获取数据
v、 render=函数（c）{
console.log（'c-data='+c.data）；
console.log（'m-data='+m.data）；
$（“button.bdsubmit”）。单击（函数（e）{
//var bdinput=$（'#bd.bdinput'）.val（）；
//var yourDate=bdinput；
//console.log（您的日期）
$.ajax({
键入：“GET”，
url:$（this.attr（'href'），
数据类型：“html”，
错误：函数（xhr）{
//对这个错误做些什么
},
成功：功能（响应）{
//console.log（yourDate+“Success”）
}
});
$（'body'）。追加（''+c.data）；
log（'c.data='+c.data）；
e、 preventDefault（）；//返回值的更新为false
});
};
c、 handleEvent=函数（）{
v、 渲染（m）；
};
c、 handleEvent（）；
});

您目前对MVC的理解如何？虽然我最近使用的实现具有视图和控制器以及处理模型的主干，但还不错。我已对其进行了更新，并将单击功能移到视图而不是控制器中。

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();
        });