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> < charset="UTF-8"> < >TodoList Jquery</ > < src = "./jquery.js"></ ></head><body> <div> <input id='input' type="text" > <button id="btn">提交</button> <ul id = 'list'></ul> </div> < > function Page() { } $.extend(Page.prototype,{ init:function(){ // 控制器 P this.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(); </ > </body></html> init:function(){ // 控制器 P this.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(); </ > </body></html>输出：
本段代码采用 MVP 的设计模式，并没有用 ajax 获取内容 ，故 M（模型层）被省略，通过控制器（P）来改变视图（V）
MVVM 设计模式
Model 层：模型层（存储数据）
View 层：视图层（显示数据）
ViemModel层：Vue 自带的，开发时无需关注具体如何实现
实例
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >TodoList</ > < src = "./vue.js"></ ></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> < > var app = new Vue({ M 层 el: '#app', data:{ list: [], inputValue:'' }, methods:{ handleBtnClick:function(){ this.list.push(this.inputValue) this.inputValue = '' } } }) </ > </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> < > var app = new Vue({ M 层 el: '#app', data:{ list: [], inputValue:'' }, methods:{ handleBtnClick:function(){ this.list.push(this.inputValue) this.inputValue = '' } } }) </ > </body></html>通过操纵 M（模型层） 层 ，然后 V（视图层） 层会自动跟着变化 ，是通过 VM 层（API: .define.protein 和 虚拟DOM机制来实现）来实现的。 M（模型层） 层 与 V（视图层）之间双向联系，好处是在开发过程中只需关注 M（模型层）即可，M（模型层）是核心（面向数据开发），极大减少DOM 开发，减少代码量。
继续阅读与本文标签相同的文章
上一篇 :
Java学习（17）--正则表达式
-
Java 学习（23）---（IO流之字节流)
2026-05-26栏目： 教程
-
初识 JSP---(Filter)
2026-05-26栏目： 教程
-
Java 学习（22）---（类的加载与反射）
2026-05-26栏目： 教程
-
初识 JSP---（JSTL）
2026-05-26栏目： 教程
-
初识 JSP---（EL表达式）
2026-05-26栏目： 教程