初识MVC
2016-04-23 本文已影响282人
温州的柯
没有＊＊，说个图啊，果断上个图压压场子先
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
