欲谈mvvm 必谈mvp,欲谈mvp 必谈mvc
mvc模式:view监听model,controller监听view并改变model,model被改变触发view的改变
mvc的两个问题:
1:view与model高度耦合
2:controller太重
mvp模式:MVP的目的在于隔离model和view,view复杂界面的展示逻辑,model负责数据的处理逻辑,Presenter复杂整合view层和model层
//model层 function userModel(data){ this.name = data.name; this.avatar = data.avatar; } function getUserData(){ return fetch("http://test.com/getUSer") .then(function(response){ var userData = response.data; return new userModel(userData) }) } //Presenter层 function userPresenter(){ var userData = getUserData();//网络请求获取用户数据 userData.then(function(userData){ new userView().showUserMes(user); }) } //view层 function userView(){ } userView.prototype.showUserMes = function(userData){ document.getElementByID("username").value = userData.name; document.getElementByID("useravatar").value = userData.avatar; }
如图在view层编写基本的视图逻辑,而数据层编写基本的数据请求,在presenter层复杂将两者整合起来,这样达到了view与model分离的目的,同时将业务逻辑中视图方面的逻辑放入到view层
mvvm模式:mvvm模式主要是在于v-vm和v-p的改变,mvvm的双向数据绑定优化了v-p模式下关于view层与presenter层的交互。其他地方则与mvp无异,