怎样做打赏网站/关键字c语言
MVP 设计模式
Model 层：模型层
Presenter 层：呈现层(业务逻辑控制层)
View 层：视图层（DOM 展示）
过程：视图层（V）发出一个事件交给控制器（P 呈现层）,控制器调用 Ajax 去模型层（M）获取数据 ; 或者直接去视图层（V）进行DOM 操作。控制器（P 呈现层）是核心，是模型层（M）和 视图层（V） 的中转站，其中大部分代码在进行 DOM 操作
（面向 DOM 开发）。模型层（M）比较边缘。
实例：
用 jQuery 实现 todo-list 功能
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>TodoList Jquery</title><script src = './jquery.js'></script>
</head>
<body><div><input id='input' type="text" ><button id="btn">提交</button><ul id = 'list'></ul> </div><script>function Page() {}$.extend(Page.prototype,{init:function(){ // 控制器 Pthis.bindEvents()},bindEvents:function(){var btn = $('#btn'); },handleBtnClick:function(){var inptutValue = $("#input").val();var ulElem = $("#list");ulElem.append('<li>' + inputValue + '</li>')：inputElem.val('');}})var page = new Page();page.init(); </script>
</body>
</html>init:function(){ // 控制器 Pthis.bindEvents()},bindEvents:function(){var btn = $('#btn'); },handleBtnClick:function(){var inptutValue = $("#input").val();var ulElem = $("#list");ulElem.append('<li>' + inputValue + '</li>')：inputElem.val('');}})var page = new Page();page.init(); </script>
</body>
</html>
输出：
本段代码采用 MVP 的设计模式，并没有用 ajax 获取内容 ，故 M（模型层）被省略，通过控制器（P）来改变视图（V）
MVVM 设计模式
Model 层：模型层（存储数据）
View 层：视图层（显示数据）
ViemModel层：Vue 自带的，开发时无需关注具体如何实现
实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>TodoList</title><script src = './vue.js'></script>
</head>
<body><div id ='app'> V 层<input type="text" v-model="inputValue"/><button v-on:click="handleBtnClick">提交</button><ul><li v-for="item in list">{{item}}</li></ul> </div><script>var app = new Vue({ M 层el: '#app',data:{list: [],inputValue:''},methods:{handleBtnClick:function(){this.list.push(this.inputValue)this.inputValue = ''}}})</script>
</body>
</html><div id ='app'> V 层<input type="text" v-model="inputValue"/><button v-on:click="handleBtnClick">提交</button><ul><li v-for="item in list">{{item}}</li></ul> </div><script>var app = new Vue({ M 层el: '#app',data:{list: [],inputValue:''},methods:{handleBtnClick:function(){this.list.push(this.inputValue)this.inputValue = ''}}})</script>
</body>
</html>通过操纵 M（模型层） 层 ，然后 V（视图层） 层会自动跟着变化 ，是通过 VM 层（API:Object.define.protein 和 虚拟DOM机制来实现）来实现的。 M（模型层） 层 与 V（视图层）之间双向联系，好处是在开发过程中只需关注 M（模型层）即可，M（模型层）是核心（面向数据开发），极大减少DOM 开发，减少代码量。