扯兩句 MVC 的設計模式

阿新 • • 發佈：2019-01-13

一個app開發的主要流程可以簡單概括為:
搭建UI介面—> 請求伺服器資料 —> 把資料展示在UI介面上 –> 處理UI介面的業務邏輯 —> 測試及優化

在程式設計世界裡面大家都知道一句話: 高內聚,低耦合

高內聚,就是指儘量讓一個類或者一個方法它專門去處理一個事情,對外只提供一個介面,內部具體如何實現不需要告訴外界.
低耦合,就是減少類與類之間相互的依賴性,降低程式碼的入侵性,當改變一個類中的一個東西時候,不需要另一個類中也大批量改.

我們在請求網路資料的時候,通常伺服器給我們返回都是json或者xml資料,我們利用第三方框架將它解析之後會得到一個字典陣列.
這時候如果我們面向字典來開發:
1.這樣不太符合我們面向物件

開發的偉大思想覺悟
2.由於xcode的原因,在敲字典的key時候系統是不會給我們提示(也就是自動聯想功能)的,這樣容易造成我們有時候不小心敲錯了一個key導致載入不出資料,但是系統又不會報錯,程式碼一多很可能就要花很多時間去找八哥(bug),專業點來講就是容錯率低.

所以為了順應社會主義發展的步伐,我們需要將字典陣列轉換為模型陣列,也就是將字典轉為模型, 這就要扯到MVC這個設計模式了.

MVC是三個單詞的首字母縮寫, 他們分別是 , 他們分別是, 分別是Model, View, Controller, 也就是模型, 檢視, 控制器.

Model : 繼承NSObject, 負責儲存資料.

View : 檢視控制元件, 通常用xib來描述它裡面的子控制元件,負責將資料展示在UI介面上
Controller : 控制器,負責請求及處理網路資料, 處理使用者互動

他們三兄弟的關係如下:

這樣子,他們三個各司其職, 符合我們高內聚,低耦合的思想.

下面用簡單的table view例項來闡述一下MVC的使用,如下圖的效果

誰能教教我用markdown放入圖片怎麼設定圖片大小?

1.在Model(也叫Item)裡面定義屬性,用來儲存網路資料

#import 

@interface tagItem : NSObject

@property(nonatomic,strong)NSString *image_list;
@property(nonatomic,strong)NSString *sub_number;
@property(nonatomic,strong)NSString *theme_name;

@end

123456789

#import @interfacetagItem:NSObject@property(nonatomic,strong)NSString *image_list;@property(nonatomic,strong)NSString *sub_number;@property(nonatomic,strong)NSString *theme_name;@end

2.在Controller裡面,請求資料,用第三方框架把資料轉化成模型存進Model這個類中, 然後給cell的item屬性賦值,這樣子就可以把item(資料)傳進View裡面——簡單的說,就是在Controller裡面把資料傳進View裡面

//傳送網路請求
-(void)loadData
{

    AFHTTPSessionManager *mgr = [AFHTTPSessionManager ljw_manager];

    NSMutableDictionary *parameters = [NSMutableDictionary dictionary];
    parameters[@"a"] = @"tag_recommend";
    parameters[@"action"] = @"sub";
    parameters[@"c"] = @"topic";
    self.mgr = mgr;

    [mgr GET:@"http://api.budejie.com/api/api_open.php" parameters:parameters progress:nil success:^(NSURLSessionDataTask * _Nonnull task, NSDictionary *  _Nullable responseObject) {
        //字典陣列轉模型陣列
        _tags = [tagItem mj_objectArrayWithKeyValuesArray:responseObject];

        [self.tableView reloadData];
        [SVProgressHUD dismiss];

    } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
        NSLog(@"%@",error);
        [SVProgressHUD dismiss];

    }];

}

1234567891011121314151617181920212223242526

//傳送網路請求-(void)loadData{AFHTTPSessionManager *mgr=[AFHTTPSessionManager ljw_manager];NSMutableDictionary *parameters=[NSMutableDictionary dictionary];parameters[@"a"]=@"tag_recommend";parameters[@"action"]=@"sub";parameters[@"c"]=@"topic";self.mgr=mgr;[mgr GET:@"http://api.budejie.com/api/api_open.php"parameters:parameters progress:nil success:^(NSURLSessionDataTask *_Nonnull task,NSDictionary *_Nullable responseObject){//字典陣列轉模型陣列_tags=[tagItem mj_objectArrayWithKeyValuesArray:responseObject];[self.tableView reloadData];[SVProgressHUD dismiss];}failure:^(NSURLSessionDataTask *_Nullable task,NSError *_Nonnull error){NSLog(@"%@",error);[SVProgressHUD dismiss];}];}

#pragma mark - Table view data source
//設定cell的高度
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{

    return 60 + 10;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    return _tags.count;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    LJWAllTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    tagItem *item = _tags[indexPath.row];

    //把資料傳給cell
    cell.item = item;

    return  cell;
}

1234567891011121314151617181920212223

#pragma mark - Table view data source//設定cell的高度-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{return60+10;}-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{return_tags.count;}-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{LJWAllTableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];tagItem *item=_tags[indexPath.row];//把資料傳給cellcell.item=item;returncell;}

3.在View裡面描述好xib,
然後定義item這個屬性,並把各子控制元件拖好線,
重寫item這個屬性的getter方法(因為在控制器中給item屬性賦值時候就會呼叫這個方法), 在這個setter方法中用這個item的各個屬性來給View的子控制元件賦值, 達到把資料展示在UI介面上的目的—簡單來說就是在View裡面拿到Model資料,把資料展示在View上

#import "LJWAllTableViewCell.h"
#import "tagItem.h"

@interface LJWAllTableViewCell()

@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@property (weak, nonatomic) IBOutlet UILabel *numberLabel;
@property (weak, nonatomic) IBOutlet UIImageView *imageV;

@end

-(void)setItem:(tagItem *)item
{
    _item = item;

    //名字*********************
    _nameLabel.text = item.theme_name;


    //訂閱數******************
    NSString *numStr = [NSString stringWithFormat:@"%@人訂閱",_item.theme_name];
    CGFloat num = [_item.sub_number floatValue];
    if (num > 10000) {
        num = num / 10000;
        numStr = [NSString stringWithFormat:@"%.1f人訂閱",num];
    }
    _numberLabel.text = numStr;

    //圖片 ********************
    [_imageV sd_setImageWithURL:[NSURL URLWithString:_item.image_list] placeholderImage:[UIImage imageNamed:@"defaultUserIcon"] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
        //生成圓形圖片

        //開啟上下文
        UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);

        //描述裁剪路徑
        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];

        //設定裁剪區域
        [path addClip];

        //開始裁剪
        [image drawAtPoint:CGPointZero];

        //獲取裁剪後的圖片
        image = UIGraphicsGetImageFromCurrentImageContext();

        //關閉上下文
        UIGraphicsEndImageContext();

        _imageV.image = image;

    }];

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

#import "LJWAllTableViewCell.h"#import "tagItem.h"@interfaceLJWAllTableViewCell()@property(weak,nonatomic)IBOutlet UILabel *nameLabel;@property(weak,nonatomic)IBOutlet UILabel *numberLabel;@property(weak,nonatomic)IBOutlet UIImageView *imageV;@end-(void)setItem:(tagItem *)item{_item=item;//名字*********************_nameLabel.text=item.theme_name;//訂閱數******************NSString *numStr=[NSString stringWithFormat:@"%@人訂閱",_item.theme_name];CGFloat num=[_item.sub_number floatValue];if(num>10000){num=num/10000;numStr=[NSString stringWithFormat:@"%.1f人訂閱",num];}_numberLabel.text=numStr;//圖片 ********************[_imageV sd_setImageWithURL:[NSURL URLWithString:_item.image_list]placeholderImage:[UIImage imageNamed:@"defaultUserIcon"]completed:^(UIImage *_Nullable image,NSError *_Nullable error,SDImageCacheType cacheType,NSURL *_Nullable imageURL){//生成圓形圖片//開啟上下文UIGraphicsBeginImageContextWithOptions(image.size,NO,0);//描述裁剪路徑UIBezierPath *path=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,image.size.width,image.size.height)];//設定裁剪區域[path addClip];//開始裁剪[image drawAtPoint:CGPointZero];//獲取裁剪後的圖片image=UIGraphicsGetImageFromCurrentImageContext();//關閉上下文UIGraphicsEndImageContext();_imageV.image=image;}];

大致思路就是這樣, 還有一些細節的業務邏輯之類的根據實際需要處理好就行.

用MVC在日後可以方便地對程式碼進行維護, 可以達到”哪裡出問題,就去找對應的類修改”的效果.

下一篇將寫MVVM的設計模式.

扯兩句 MVC 的設計模式

扯兩句 MVC 的設計模式

MVC學習系列-WebForm與asp.net MVC兩種設計模式區別、MVC設計模式基礎瞭解

MVC設計模式在網站中的應用

[Java][Web]Request 實現轉發和 MVC 設計模式

Java-MVC設計模式

MVC設計模式

Qt MVC設計模式（五篇）

Android與MVC設計模式

MVC設計模式用於用戶註冊表單提交到數據庫的中文亂碼問題

MVC設計模式的優缺點

MVC設計模式-學習筆記

javaweb三大框架和MVC設計模式

MyEclipse下用struts框架實現MVC設計模式

2018-10-12 MVC設計模式

MVC設計模式和MVC架構的區別

javaweb之MVC設計模式

JavaWeb學習筆記及案例(二)MVC設計模式

談談JAVA工程獅面試中經常遇到的面試題目------什麼是MVC設計模式

MVC設計模式：票據案例

Java——Web開發之開源框架DBUtils的使用，JSP開發模式，三層架構與MVC設計模式的認識

扯兩句 MVC 的設計模式

相關推薦