通过一张图,大致可以看出什么是传统的mvp模式了。
那么下面还有一段代码,我们可以看一下jQuery是怎么实现之前的todoList功能的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div> <input type="text" id="input"> <button id="btn">提交</button> <ul id="list"></ul> </div> <script> function Page () {}; $.extend(Page.prototype, { init: function() { this.bindEvents() }, bindEvents: function() { var btn = $('#btn'); btn.on('click', $.proxy(this.handleBtnClick, this)) }, handleBtnClick: function() { var inputElem = $('#input'); var inputValue = inputElem.val(); var ulElem = $('#list'); ulElem.append('<li>'+ inputValue +'</list>'); inputElem.val(''); } }) var page = new Page(); page.init(); </script> </body> </html>