MVVM學(xué)習(xí)心得

由于之前項(xiàng)目使用的一直是MVC模式秧廉,所以一直也沒有過多的去了解MVVM模式荧库。換了一家新公司后膛壹,接手的項(xiàng)目中完全使用MVVM結(jié)構(gòu)驾中。所以就老老實(shí)實(shí)的學(xué)習(xí)了MVVM設(shè)計(jì)模式。下面談?wù)勈菍?duì)MVVM的見解模聋。
首先看一下MVVM在項(xiàng)目中的目錄結(jié)構(gòu)(如下圖)


屏幕快照 2017-08-11 下午4.46.13.png

其實(shí)MVVM是MVC模式的一種衍生肩民,MVVM設(shè)計(jì)模式巧用了viewModel將原本在控制器(viewController)中和model的復(fù)雜邏輯抽取出來,將這些邏輯放到viewModel中链方,使得控制器變得更加輕巧持痰,層次結(jié)構(gòu)更加清晰。對(duì)比下MVVM和MVC在實(shí)際項(xiàng)目中的區(qū)別祟蚀。(如下圖)

MVC在控制器中的代碼
MVVM模式下控制器中的代碼

簡(jiǎn)單的對(duì)比下是不是發(fā)現(xiàn)MVVM設(shè)計(jì)模式下控制器中的代碼更加的簡(jiǎn)潔清爽工窍。

MVVM分別指什么
Model-數(shù)據(jù)層
ViewController/View-展示層
ViewModel- 數(shù)據(jù)模型 :ViewModel層,就是View和Model層的粘合劑前酿,他是一個(gè)放置用戶輸入驗(yàn)證邏輯患雏,視圖顯示邏輯,發(fā)起網(wǎng)絡(luò)請(qǐng)求和其他各種各樣的代碼的極好的地方罢维。說白了淹仑,就是把原來ViewController層的業(yè)務(wù)邏輯和頁面邏輯等剝離出來放到ViewModel層:他的任務(wù)就是從ViewModel層獲取數(shù)據(jù),然后顯示。

具體實(shí)現(xiàn)如下:
Model類:

@interface FDDCellModel : NSObject

@property (nonatomic, copy) NSString *image;
@property (nonatomic, copy) NSString *title;
- (id)initWithDictionary:(NSDictionary *)dict;
+ (id)FDDInfoWithDictionary:(NSDictionary *)dict;

@end
#import "FDDCellModel.h"

@implementation FDDCellModel

- (id)initWithDictionary:(NSDictionary *)dict{

    self = [super init];
    if (self) {
        [self setValuesForKeysWithDictionary:dict];
    }

    return self;
}
+ (id)FDDInfoWithDictionary:(NSDictionary *)dict{
    return [[self alloc] initWithDictionary:dict];
}
@end

View類(tableViewCell)

@class FDDCellModel;
@interface FDDTableViewCell : UITableViewCell
@property(nonatomic,strong)FDDCellModel *model;
+ (instancetype)cellWIthTableView:(UITableView *)tableView;
@end

#import "FDDCellModel.h"
@interface FDDTableViewCell()

@property (weak, nonatomic) IBOutlet UIImageView *leftImage;
@property (weak, nonatomic) IBOutlet UILabel *title;
@end

@implementation FDDTableViewCell
+ (instancetype)cellWIthTableView:(UITableView *)tableview {
    static NSString *cellID = @"FDDTableViewCell";
    FDDTableViewCell *cell = [tableview dequeueReusableCellWithIdentifier:cellID];
    if (!cell) {
        cell = (FDDTableViewCell *)[[[NSBundle mainBundle] loadNibNamed:@"FDDTableViewCell" owner:self options:nil] lastObject];
    }
    if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
        [cell setLayoutMargins:UIEdgeInsetsZero];
    }
    return cell;
}

- (void)setModel:(FDDCellModel *)model{//通過model給控件賦值
    _model = model;
    _leftImage.image = [UIImage imageNamed:_model.image];
    _title.text = _model.title;
}

viewModel類:

@class FDDTableViewCell, UITableView;
@interface FDDCellViewModel : NSObject

@property (nonatomic, strong) NSMutableArray *FDDInfoArray;
//返回tableView的分區(qū)數(shù)
- (NSInteger)numberOfSections;
//返回tableView的對(duì)應(yīng)分區(qū)的行數(shù)
- (NSInteger)numberOfItemsInSection:(NSInteger)section;
//返回自定義cell
- (FDDTableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
//tableView點(diǎn)擊方法
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;
//返回tableView的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
@end

#import "FDDCellViewModel.h"
#import "FDDCellModel.h"
#import "FDDTableViewCell.h"
@interface FDDCellViewModel()

@end

@implementation FDDCellViewModel

- (NSMutableArray *)FDDInfoArray{
    if (_FDDInfoArray == nil) {
        _FDDInfoArray = [NSMutableArray arrayWithCapacity:0];
    }
    return _FDDInfoArray;
}


- (instancetype)init{
    self = [super init];

    if (self) {
        [self loadData];
    }
    return self;
}

- (void)loadData{
    //實(shí)際開發(fā)數(shù)據(jù)是網(wǎng)絡(luò)獲取到的匀借,這里模擬給出一個(gè)數(shù)據(jù)
    NSArray *array = @[
                       @{@"image" : @"leon", @"title" : @"標(biāo)題1"},
                        @{@"image" : @"leon", @"title" : @"標(biāo)題2"},
                       @{@"image" : @"leon", @"title" : @"標(biāo)題3"},
                         @{@"image" : @"leon", @"title" : @"標(biāo)題4"},
                         @{@"image" : @"leon", @"title" : @"標(biāo)題5"},
                         @{@"image" : @"leon", @"title" : @"標(biāo)題6"},
                         @{@"image" : @"leon", @"title" : @"標(biāo)題7"}
                       ];
    for (NSDictionary *dict in array) {
        FDDCellModel *model = [FDDCellModel FDDInfoWithDictionary:dict];
        [self.FDDInfoArray addObject:model];

    }
}

- (NSInteger)numberOfSections{
    return 1;
}
- (NSInteger)numberOfItemsInSection:(NSInteger)section{

    return self.FDDInfoArray.count;
}
- (FDDTableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    FDDTableViewCell *cell = [FDDTableViewCell cellWIthTableView:tableView];
    cell.model = self.FDDInfoArray[indexPath.row];

    return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 60;
}
@end

controller類:

@interface FDDTableViewController ()

@property(nonatomic,strong)FDDCellViewModel *cellViewModel;

@end

@implementation FDDTableViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationItem.title = @"MVVM simpleOne";
    self.cellViewModel = [[FDDCellViewModel alloc] init];

}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
  //通過viewModel獲取自定義cell
  return   [self.cellViewModel tableView:tableView cellForRowAtIndexPath:indexPath];
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
  //通過viewModel獲取對(duì)應(yīng)分區(qū)的行數(shù)
    return [self.cellViewModel numberOfItemsInSection:section];
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{  //通過viewModel獲取對(duì)應(yīng)分區(qū)數(shù)
    return [self.cellViewModel numberOfSections];
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
   return  [self.cellViewModel tableView:tableView heightForRowAtIndexPath:indexPath];
}

@end

具體demo鏈接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末颜阐,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子吓肋,更是在濱河造成了極大的恐慌凳怨,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,734評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蓬坡,死亡現(xiàn)場(chǎng)離奇詭異猿棉,居然都是意外死亡磅叛,警方通過查閱死者的電腦和手機(jī)屑咳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來弊琴,“玉大人兆龙,你說我怎么就攤上這事∏枚” “怎么了紫皇?”我有些...
    開封第一講書人閱讀 164,133評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)腋寨。 經(jīng)常有香客問我聪铺,道長(zhǎng),這世上最難降的妖魔是什么萄窜? 我笑而不...
    開封第一講書人閱讀 58,532評(píng)論 1 293
  • 正文 為了忘掉前任铃剔,我火速辦了婚禮,結(jié)果婚禮上查刻,老公的妹妹穿的比我還像新娘键兜。我一直安慰自己,他們只是感情好穗泵,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評(píng)論 6 392
  • 文/花漫 我一把揭開白布普气。 她就那樣靜靜地躺著,像睡著了一般佃延。 火紅的嫁衣襯著肌膚如雪现诀。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,462評(píng)論 1 302
  • 那天履肃,我揣著相機(jī)與錄音仔沿,去河邊找鬼。 笑死榆浓,一個(gè)胖子當(dāng)著我的面吹牛于未,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,262評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼烘浦,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼抖坪!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起闷叉,我...
    開封第一講書人閱讀 39,153評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤擦俐,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后握侧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蚯瞧,經(jīng)...
    沈念sama閱讀 45,587評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評(píng)論 3 336
  • 正文 我和宋清朗相戀三年品擎,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了埋合。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,919評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡萄传,死狀恐怖甚颂,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情秀菱,我是刑警寧澤振诬,帶...
    沈念sama閱讀 35,635評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站衍菱,受9級(jí)特大地震影響赶么,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜脊串,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評(píng)論 3 329
  • 文/蒙蒙 一辫呻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧洪规,春花似錦印屁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至念赶,卻和暖如春础钠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背叉谜。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評(píng)論 1 269
  • 我被黑心中介騙來泰國打工旗吁, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人停局。 一個(gè)月前我還...
    沈念sama閱讀 48,048評(píng)論 3 370
  • 正文 我出身青樓很钓,卻偏偏與公主長(zhǎng)得像香府,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子码倦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 前言 看了下上篇博客的發(fā)表時(shí)間到這篇博客补疑,竟然過了11個(gè)月,罪過歹撒,罪過莲组。這一年時(shí)間也是夠折騰的,年初離職跳槽到鵝廠...
    西木柚子閱讀 21,238評(píng)論 12 184
  • 原文地址:iOS應(yīng)用架構(gòu)談 view層的組織和調(diào)用方案 當(dāng)我們開始設(shè)計(jì)View層的架構(gòu)時(shí)栈妆,往往是這個(gè)App還沒有開...
    Jabir_Zhang閱讀 874評(píng)論 0 1
  • 原文: iOS應(yīng)用架構(gòu)談 view層的組織和調(diào)用方案 iOS應(yīng)用架構(gòu)談 開篇 iOS應(yīng)用架構(gòu)談 網(wǎng)絡(luò)層設(shè)計(jì)方案 i...
    難卻卻閱讀 1,262評(píng)論 0 7
  • 小君感覺周圍沒有一個(gè)可以理解自己的人胁编,哪怕是回到家中也有一股深深的寂寞感。小君知道家里人對(duì)自己好鳞尔,可是多年的學(xué)校教...
    追風(fēng)的小行星閱讀 171評(píng)論 0 0
  • 到了25歲這個(gè)尷尬的年齡,請(qǐng)把對(duì)未來的惶恐早直,擔(dān)憂收起寥假。我們會(huì)為著高品質(zhì)生活獨(dú)自在異鄉(xiāng)努力著,拼搏著霞扬,為著房貸糕韧,車貸...
    野山菜閱讀 164評(píng)論 0 0