MVVM

MVVM是Model-View-ViewModel的简写。,MVVM就是MVC的扩展,把数据处理全放到ViewModel里进行处理


一个模块文件中,分别有ViewController,View,Model,ViewModel四个文件  其中控制器VC在ViewController里,重写的view放到View文件夹里,数据模型放到Model里

数据请求等一系列操作放到ViewModel里



首先在ViewModel里写一个MovieModel类


#import <Foundation/Foundation.h>

#import "MovieModel.h"

#import <UIKit/UIKit.h>


typedef void (^ReturnValueBlock) (id returnValue);

typedef void (^ErrorCodeBlock) (id errorCode);


@interface MovieViewModel : NSObject


@property (nonatomic,copy)ReturnValueBlock returnBlock;

@property (nonatomic,copy)ErrorCodeBlock errorBlock;


//获取电影数据

- (void)getMovieData;


//跳转到电影详情页

- (void)movieDetailWithPublicModel: (MovieModel *)movieModel WithViewController: (UIViewController *)superController;

@end



#import "MovieViewModel.h"

#import "NetworkService.h"

#import "MovieModel.h"

#import "MovieViewController.h"


@implementation MovieViewModel


- (void)getMovieData{

    [NetworkServicerequestWithURL:@"/v2/movie/coming_soon"params:nilsuccess:^(id result) {

        NSLog(@"%@",result);

        

        NSArray *subjects = result[@"subjects"];

        NSMutableArray *modelArr = [NSMutableArrayarrayWithCapacity:subjects.count];

        for (NSDictionary *subjectin subjects) {

            MovieModel *model = [[MovieModelalloc]init];

            model.movieName = subject[@"title"];

            model.year = subject[@"year"];

            NSString *urlStr = subject[@"images"][@"medium"];

            model.imageUrl = [NSURLURLWithString:urlStr];

            model.detailUrl = subject[@"alt"];

            [modelArr addObject:model];

        }

        _returnBlock(modelArr);

        

    } failure:^(NSError *error) {

         NSLog(@"%@",error);

        _errorBlock(error);

    }];

}




然后在VC调用的时候(可以写成类方法)

  MovieViewModel *viewModel = [[MovieViewModelalloc]init];

    viewModel.returnBlock = ^(id returnValue){

        

        tableView.dataSource = returnValue;

        [tableView reloadData];

    };

    viewModel.errorBlock = ^(id errorCode){

      

        NSLog(@"%@",errorCode);

    };

    

    [viewModel getMovieData];

    

也可以重写tableView,把一系列的tableView的代理方法写到本身里


一下是我自己写的一个collectionView 在VIewModel请求数据,在VC回调block,可以在block里直接把数据赋值,直接给collectionView.dataSource,然后reload

//

//  MeiziCollectionView.m

//  meizi

//

//  Created by 俊洋洋 on 16/7/8.

//  Copyright © 2016俊洋洋. All rights reserved.

//


#import "MeiziCollectionView.h"

#import "meiziCollectionViewCell.h"

@interface MeiziCollectionView()<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>


@end



@implementation MeiziCollectionView


- (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout

{

    self = [superinitWithFrame:frame collectionViewLayout:layout];

    self.backgroundColor =[UIColorwhiteColor];

    self.dataSource =self;

    self.delegate =self;

    [selfregisterClass:[meiziCollectionViewCellclass] forCellWithReuseIdentifier:@"cellID"];

    return self;

}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

    returnself.dataSourcea.count;

}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    meiziCollectionViewCell *cell = [meiziCollectionViewCellcellWithCollectionView:collectionViewAtIndexPath:indexPath];

    [cell setupUI];

    cell.backgroundColor = [UIColorcyanColor];

    cell.model = self.dataSourcea[indexPath.row];

    return cell;

}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

{

    returnCGSizeMake(SCREENWIDTH/2.0f-10,SCREENWIDTH/2.0f-10);

}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section

{

    returnUIEdgeInsetsMake(15,5, 0,5);

//    UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>)

}

/*

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

    // Drawing code

}

*/


@end




<think>首先,用户的问题是关于MVVM架构模式的介绍、实现和使用。系统级指令要求我使用中文回答,并且要结构化清晰。我需要参考用户提供的站内引用,这些引用来自不同的来源:[1]关于Android的MVVM架构,[2]关于Vue的MVVM架构,[3]关于MVVM模式的基本概念,[4]关于MVVM的使用和实现。引用内容摘要:-[^1]:MVVM是一种架构模式,DataBinding是实现数据和UI绑定的框架,LifeCycle和LiveData是桥梁。-[^2]:Vue的MVVM模式:VM通过双向数据绑定实现模型和视图的自动同步,包括DOMListener和DataBinding。-[^3]:View包括Activity/Fragment和ViewDataBinding。-[^4]:MVVM在Android中使用布局文件(如XML),定义数据绑定。用户上一次的问题似乎是要我生成相关问题,但当前用户的问题是明确问关于MVVM的介绍、实现和使用。所以我应该专注于回答这个。我的回答结构:1.**介绍MVVM架构模式**:简要解释什么是MVVM,核心组成部分(Model,View,ViewModel),优缺点。2.**实现细节**:根据引用,讨论Android和Vue中的MVVM实现。3.**使用场景和示例**:展示如何使用,包括代码片段(如果有),如Android中使用DataBinding或Vue中的实现。4.**生成相关问题**:如示例所示,在末尾添加相关问题。系统指令要求:-行内数学表达式用$...$,但在这个上下文中可能不涉及数学,所以不必要。-独立公式用$$...$$,但这里没有。-LaTeX语法正确:在代码块中使用。-中文回答。-生成相关问题:在末尾添加。-引用段落末尾添加引用标识,如[^1]。回答大纲:-**开头**:简要介绍MVVM。-**核心概念**:-Model:数据层。-View:UI层。-ViewModel:业务逻辑层,连接Model和View。-双向数据绑定:核心机制。-**实现**:-Android实现(引用[1]、[3]、[4]):使用DataBinding,LifeCycle,LiveData。-Vue实现(引用[2]):数据挟持和发布订阅模式。-**使用**:给出示例代码,如Android布局文件或Vue组件。-**优点与缺点**。-**生成相关问题**。确保回答真实可靠:基于已知知识,参考给定引用。生成相关问题:如:1.MVVM与MVC的区别是什么?2.在实际项目中如何解决MVVM中的数据绑定问题?3.Vue.js和Android中MVVM实现的差异?引用时,在相关内容末尾添加[^1],[^2]等。</think> ### MVVM架构模式介绍、实现与使用 MVVM(Model-View-ViewModel)是一种广泛应用于现代软件开发的架构模式,旨在将用户界面(UI)与业务逻辑解耦,提升代码的可维护性和可测试性。它源于MVC(Model-View-Controller)模式,但引入了ViewModel作为中间层,并通过双向数据绑定自动同步View和Model的变化。以下我将逐步介绍MVVM的核心概念、具体实现和使用方法。 --- #### 1. **MVVM核心介绍** - **核心组成部分**: - **Model(模型)**:代表应用程序的数据和业务逻辑层。负责处理数据获取、存储和业务规则。例如,数据库操作、API调用等。 - **View(视图)**:用户界面的呈现层。在Android中是Activity/Fragment,在Web开发中是HTML DOM元素[^3]。View不包含逻辑,只负责显示数据和处理用户输入。 - **ViewModel(视图模型)**:连接Model和View的桥梁。ViewModel暴露数据和方法给View,并响应View的交互事件。它处理UI逻辑但不直接操作View,使用LiveData(在Android)或响应式数据(在Vue)实现数据更新自动化[^1][^2]。 - **双向数据绑定**:MVVM的核心机制。当Model数据变化时,View自动更新;当用户操作View时,Model数据自动同步。这减少了冗余代码,提升开发效率[^2][^4]。 - **优缺点**: - **优点**:解耦UI和逻辑,易于测试(ViewModel可独立测试);提高代码复用性;支持响应式UI更新。 - **缺点**:双向绑定可能导致调试复杂(需注意数据流循环);在大型应用中,ViewModel可能过于庞大。 引用[^1]中提到,MVVM的核心在于使用工具如DataBinding和LifeCycle实现数据绑定,LiveData通过感知生命周期来安全传递数据,确保UI仅在可见状态下更新,避免内存泄漏[^1]。 --- #### 2. **MVVM的实现细节** MVVM的实现依赖于框架和平台,下面以Android(使用Jetpack组件)和Vue.js为例。 - **Android中的实现(参考引用[1][3][4])**: - **工具链**:使用Jetpack库(如LifeCycle、LiveData和DataBinding)。ViewModel处理业务逻辑,LiveData确保数据在UI控制器(如Activity)的生命周期内安全更新[^1][^3]。 - **DataBinding使用**:在XML布局文件中定义数据和绑定关系,DataBinding自动将ViewModel数据映射到UI元素[^4]。示例代码: ```xml <!-- 引用[4]的布局示例 --> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <variable name="user" type="com.example.User" /> <!-- 定义数据类型 --> </data> <TextView android:text="@{user.name}" /> <!-- 绑定表达式 --> </layout> ``` 这里,`@{user.name}` 是绑定表达式,当User对象name属性变化时,TextView自动刷新[^4]。 - **ViewModel和LiveData**:ViewModel保持数据状态,LiveData观察数据变化。在Activity中: ```kotlin class MyViewModel : ViewModel() { val userName = MutableLiveData<String>() // LiveData用于数据观察 fun loadData() { userName.value = "加载的数据" // 更新数据自动通知View } } class MyActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main) val viewModel = ViewModelProvider(this).get(MyViewModel::class.java) viewModel.userName.observe(this) { name -> // 观察数据变化 binding.textView.text = name // UI更新 } } } ``` 此代码中,当ViewModel数据变化时,View通过LiveData自动更新[^1]。 - **Vue.js中的实现(参考引用[2])**: - **核心机制**:Vue通过数据挟持(使用Object.defineProperty或Proxy)和发布者-订阅者模式实现双向绑定[^2]。 - **ViewModel组成部分**: - **DOMListener**:监听用户交互事件(如点击),触发Model更新。 - **DataBinding**:将Model数据绑定到View元素,实现数据自动同步。 - 示例代码(Vue组件): ```vue <template> <div> <p>{{ userName }}</p> <!-- 绑定表达式,自动更新 --> <input v-model="userName"> <!-- 双向绑定:输入变化自动更新Model --> </div> </template> <script> export default { data() { return { userName: '默认值' // ViewModel数据 } } } </script> ``` 这里,`v-model`实现输入框的双向绑定:输入变化更新数据,数据变化更新视图[^2]。 **关键区别**:Android MVVM强调生命周期感知(通过LifeCycle),而Vue.js更侧重于纯前端绑定[^1][^2]。 --- #### 3. **MVVM的使用场景和最佳实践** - **使用场景**: - **移动App开发**:如Android项目,MVVM适合处理UI复杂性和数据异步更新(如API响应)。 - **Web前端开发**:Vue、React等框架广泛应用MVVM模式,适合动态单页应用(SPA)。 - **企业应用**:在需要高代码复用性和测试性的场景中,MVVM减少维护成本。 - **最佳实践**: - **保持ViewModel轻量**:将复杂逻辑移至Model层,避免ViewModel成为"God Object"。 - **合理使用数据绑定**:避免过度绑定以减少性能开销,如在Android中使用`@BindingAdapter`处理自定义绑定[^4]。 - **测试策略**:单元测试ViewModel逻辑(使用JUnit/Mockito),UI测试聚焦用户交互。 - **常见问题解决**: - **内存泄漏**:在Android中,使用LifeCycleScope确保资源释放。 - **数据流循环**:在Vue中,避免在数据更新方法中直接修改源数据。 引用[^3]强调,View中的ViewDataBinding(如Android的binding实例)是执行数据绑定的关键,但开发者只需关注数据定义和响应逻辑[^3]。 --- #### 4. **MVVM的优缺点总结** - **优势**:提升开发效率(通过自动UI更新),支持模块化开发;缺点在调试复杂数据流。 - **趋势**:在现代框架如Jetpack Compose或Vue 3中,MVVM通过更精简的API优化了实现[^2][^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值