MVVM架构 学习

MVVM架构是什么？

        Model-View-ViewModel，也就是MVVM架构是由MVP模式与WPF结合的应用方式发展演变过来的一种新型架构框架，立足于原有MVP框架并且糅合了WPF的新特性，MVVM 的核心是 ViewModel 层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。

模型示意图

模型还是根据主流的设计思路，使用分层设计的理念

分为View层，Model层以及ViewModel层

View层

视图层，也就是用户界面，主要由 HTML 和 CSS 来构建，而为了更方便地展现ViewModel层和Model层的数据，产生了很多前后端模板语言。许多的MVVM 框架如 KnockoutJS，Vue，Angular 等也都有自己用来构建用户界面的内置模板语言。

Model层

泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。

ViewModel层

ViewModel 层是由前端开发人员组织生成和维护的视图数据层。ViewModel 层所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，而实际上我们平时生活中能够见到的View层，所获得的的数据是来自于ViewModel层，并非是Model层的数据，因此ViewModel类似于是一个中间商的作用，购房者所想要买到合适的房源，依赖的是中间商提供的信息，和房屋主没有任何的直接联系。

MVVM框架的主要应用场景

  1）针对具有复杂交互逻辑的前端应用2）提供基础的架构抽象3）通过Ajax数据持久化，保证前端用户体验

简单介绍一下关于Ajax方面的内容，Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，也就意味着他能够提高搜索的效率，利用更少的资源获取到相同的可用信息。

这样MVVM的效益就体现出来了，能够很好地与Ajax进行结合，减少刷新整张页面，提高资源的利用率。

代码示例

Model

{"weatherinfo":{"city":"杭州","cityid":"101210101","temp1":"5℃","temp2":"20℃","weather":"晴转多云","img1":"n0.gif","img2":"d1.gif","ptime":"18:00"}}
 public class WeatherData {private WeatherInfo weatherinfo;public WeatherInfo getWeatherinfo() {return weatherinfo;}public void setWeatherinfo(WeatherInfo weatherinfo) {this.weatherinfo = weatherinfo;}
 }
 public class WeatherInfo {private String city;private String cityid;private String temp1;private String temp2;private String weather;private String img1;private String img2;private String ptime;public String getCity() {return city;}public void setCity(String city) {this.city = city;}public String getCityid() {return cityid;}public void setCityid(String cityid) {this.cityid = cityid;}public String getTemp1() {return temp1;}public void setTemp1(String temp1) {this.temp1 = temp1;}public String getTemp2() {return temp2;}public void setTemp2(String temp2) {this.temp2 = temp2;}public String getWeather() {return weather;}public void setWeather(String weather) {this.weather = weather;}public String getImg1() {return img1;}public void setImg1(String img1) {this.img1 = img1;}public String getImg2() {return img2;}public void setImg2(String img2) {this.img2 = img2;}public String getPtime() {return ptime;}public void setPtime(String ptime) {this.ptime = ptime;}
 

ModelView

public class QueryWeatherViewModel {private static final String TAG = "QueryWeatherViewModel";public final ObservableBoolean loading = new ObservableBoolean(false);public final ObservableBoolean loadingSuccess = new ObservableBoolean(false);public final ObservableBoolean loadingFailure = new ObservableBoolean(false);public final ObservableField city = new ObservableField<>();public final ObservableField cityId = new ObservableField<>();public final ObservableField temp1 = new ObservableField<>();public final ObservableField temp2 = new ObservableField<>();public final ObservableField weather = new ObservableField<>();public final ObservableField time = new ObservableField<>();private Call mCall;public QueryWeatherViewModel() {}public void queryWeather() {loading.set(true);loadingSuccess.set(false);loadingFailure.set(false);mCall = RetrofitManager.get().create(QueryWeatherRequest.class).queryWeather();mCall.enqueue(new Callback() {@Overridepublic void onResponse(Call call, Response response) {WeatherInfo weatherInfo = response.body().getWeatherinfo();city.set(weatherInfo.getCity());cityId.set(weatherInfo.getCityid());temp1.set(weatherInfo.getTemp1());temp2.set(weatherInfo.getTemp2());weather.set(weatherInfo.getWeather());time.set(weatherInfo.getPtime());loading.set(false);loadingSuccess.set(true);}@Overridepublic void onFailure(Call call, Throwable t) {if (call.isCanceled()) {Log.i(TAG, "call is canceled.");} else {loading.set(false);loadingFailure.set(true);}}});}public void cancelRequest() {if (mCall != null) {mCall.cancel();}}
 }

View

部分参考自https://www.2cto.com/kf/201805/745059.html 点击打开链接