初识MVC

没有**,说个图啊,果断上个图压压场子先

3.jpg

...载入中
......持续载入中
好吧,我放弃了,来点文字吧。

借用某度上的介绍

MVC开始是存在于桌面程序中的,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。比如一批统计数据可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步,一旦M改变,V应该同步更新。[1-2]
模型-视图-控制器(MVC)是Xerox PARC在二十世纪八十年代为编程语言Smalltalk-80发明的一种软件设计模式,已被广泛使用。后来被推荐为Oracle旗下Sun公司Java EE平台的设计模式,并且受到越来越多的使用ColdFusion和PHP的开发者的欢迎。模型-视图-控制器模式是一个有用的工具箱,它有很多好处,但也有一些缺点。[3]
(概述内容来源:[4] )

($@@$@#@%$@@!@$¥%%%...................
1.jpg

你就不能????👉

2.jpg

以下我就举一个很简单栗子,和大家谈谈到底神马是MVC(仅供参考)

  • 首先,这仨字要看懂,就是Model(模型)、View(视图)、Controller(视图控制器)的缩写
  • 随着学习的深入,自然而然会碰到这个问题,当时我得到的答案有两种,一是把这个说的天花乱坠,神乎其神,然后我就晕掉了:另一种是,你先挂着,学到以后自然会懂的。但是天秤座的我,怎么能容忍呢(貌似和星座没什么关系)?
  • 但是,现实很残酷。搞了好久,还是没能弄明白所以就丢一边了,果然随着学习的深入,这个概念慢慢地就出来了,但是比较模糊,我觉得治学必须得严谨,所以有必要直观地把它写出来。

开始

  • 我的好友单身旺说:我最近开通了个人业务,你能不能给我设计个名片?我说:no problem!
  • 于是我就打开storyboard往上面随便拖上去一些控件,啪啪啪,ok
1.png
谁知道,受到了汪界的一致好评!500个人冲到我家争先都要给自己来一只这样的名片。我说好好好,大家不要急,一个个来。
  • 然后我就想,这么多张我要是都一个个手动拖出界面,我的鼠标还不烂掉?每个人的信息不一样,我还要一个个输入,噢,我的天。
  • 自然而然,这里引入了设计模式的概念,我手动设计这个名片就是最传统的一个设计模式,简单粗暴,但是缺点多多。比如这里遇到的这种大量的工作,我明白了MVC设计模式的好处之一,此话怎讲?
  • 就是设置模型,把我的名片弄成一个视图模型,上面的个人信息也搞成数据模型
    然后就像流水线一样,生成一个视图👉再啪!把数据往上面一盖,ok一张名片就做好了。

示例

  • 打开xcode 新建一个Demo
5.png
  • 然后我们来大致看下项目哪些是MVC
    1.这里还没有出现M
    2.这里的看到的两个View(视图)是系统提供的最原始的View,上面没有可以给我们填字的地方。
    3.Controller 就是一个视图控制器,打个比方:大总管,他可以管理很多小弟小丫鬟(他上面可以放很多的View),左边的那个同名的类就是总管发号施令的地方,(比如你写上,"我需要再召个小弟(view)",然后你就能在右边看到又多了一个View 此处不做演示)


    6.png
  • 上面说到系统提供的View光秃秃的啥都没有,我们就自己做一个 (View)
    1.当然要在前任的基础上创新,新建一个类,继承系统的UIView


    7.png

    2.为了直观我把上面的label(标签)背景改了不同的颜色,label也是一个个视图。然后我们在NameCard这个类里发号施令,往原始的View上加上各种label


    8.png

    这里为代码
class NameCard: UIView {  //说明视图里都含有哪些元件
    var imageView:UIImageView?
    var nameLabel:UILabel?
    var sexLabel:UILabel?
    var heightLabel:UILabel?
    var bussinessLabel:UILabel?
    var telePhoneLabel:UILabel?
    var emailLabel:UILabel?

    override init(frame: CGRect) {
        super.init(frame: frame)
        
        // 初始化和描述这些元件的位置以及大小
        imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 60, height: 60))
        nameLabel = UILabel(frame: CGRect(x: 10, y: CGRectGetMaxY(imageView!.frame)+15, width: 100, height: 20))
        sexLabel = UILabel(frame: CGRect(x: 10, y: CGRectGetMaxY(nameLabel!.frame)+10, width: 140, height: 20))
        heightLabel = UILabel(frame: CGRect(x: 10, y: CGRectGetMaxY(sexLabel!.frame)+15, width: 100, height: 20))
        
        bussinessLabel = UILabel(frame: CGRect(x: 135, y: 10, width: 230, height: 90))
        bussinessLabel?.numberOfLines = 3
        
        emailLabel = UILabel(frame: CGRect(x: self.frame.width-160, y: self.frame.height-25, width: 150, height: 20))
        telePhoneLabel = UILabel(frame: CGRect(x: self.frame.width-120, y: CGRectGetMinY(emailLabel!.frame)-25, width: 110, height: 20))
        //加到视图上
        self.addSubview(imageView!)
        self.addSubview(nameLabel!)
        self.addSubview(sexLabel!)
        self.addSubview(heightLabel!)
        self.addSubview(bussinessLabel!)
        self.addSubview(emailLabel!)
        self.addSubview(telePhoneLabel!)
//改一下背景色为灰色
        self.backgroundColor = UIColor.groupTableViewBackgroundColor()
     
    }
    
    required init?(coder aDecoder: NSCoder) {   // 这句系统会提示你输入
        fatalError("init(coder:) has not been implemented")
    }
}
  • 卡片的模型有了,接下来是个人信息的模型 (Model)
    1.同样建个新文件,但这里是继承NSObject最原始的对象类型。
    2.代码就不放了,图中已现实完全,下面的init就是方便你给这个模型填入信息的初始化函数。
9.png
  • OK二事俱备,只欠大总管了(Controller)
    1.来到工程目录点到Viewcontroller那个类,就是上面提到的总管下命令的地方
    2.我们用cardInfo(Model)这个模型生成了一个叫cardInf的实例,看到了么后面括号里的就是刚才我们写的init函数,如果你不写init的话,你就只能一个个赋值比如
    • cardInf.name = "xxxx"
    • cardInf.sex = "xxxxx"
    • .......
      3.我们用NameCard(View)这个实例化出了一张空的名片上面有空的格子给我们填信息。
      4.你当然可以手动一个个填写信息。但是人很多的情况下呢?下面就看到了Model的好处,你可以把1000个个人信息写到数据库里,然后写个函数循环什么的,让电脑取出数据每个数据就是一个实例(第一个let操作)。然后从模型里取出相应的数据填到名片上。
      5.总管说:这小伙子(这张名片)机灵,把他召过来下了条命令(addsubview)。
10.png
  • 最后我们运行一下程序
11.png

MVC ,有点大概的理解了吗?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,245评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,749评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,960评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,575评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,668评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,670评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,664评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,422评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,864评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,178评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,340评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,015评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,646评论 3 323
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,265评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,494评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,261评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,206评论 2 352

推荐阅读更多精彩内容

  • *7月8日上午 N:Block :跟一个函数块差不多,会对里面所有的内容的引用计数+1,想要解决就用__block...
    炙冰阅读 2,483评论 1 14
  • iOS开发系列--网络开发 概览 大部分应用程序都或多或少会牵扯到网络开发,例如说新浪微博、微信等,这些应用本身可...
    lichengjin阅读 3,654评论 2 7
  • VLC的集成和使用 VLC介绍 VLC Media Player (VideoLAN) 为 Windows、Lin...
    Pocket阅读 19,574评论 75 66
  • 1、禁止手机睡眠[UIApplication sharedApplication].idleTimerDisabl...
    DingGa阅读 1,117评论 1 6
  • 这个暑假我过得十分有“意义”,完成了各种各样的大事——语文作业、数学作业、英语作业……我相信我完成的作业差不多能够...
    lrving10丶2阅读 2,009评论 2 1