上一话中我们实现了对一个小人表情的绘制，但是我们需要修改代码才能实现表情的变换，而且我们也没有一个明确地模型，这很明显不符合MVC的要求，这一话中我们将要修改它已符合MVC的要求。

在上一话中我们已经完成了faceView的代码，但是HappinessViewController中完全是空的，我们要修复我们的Model，但是在那之前要介绍一些storyboard中很酷的功能。打开你工程中的storyboard，你会看到视图中是空白一片。

但实际你的小人脸已经被绘制好了，我想要在storyboard中就能看到这个小人脸，那么我该怎么办呢，返回到FaceView的代码中，在类的定义前面增加代码@IBDesignable：

import UIKit
@IBDesignable
class FaceView: UIView {

很神奇，当你再回到storyboard中的时候你会发现小人脸已经出现在场景中了，xcode会自动识别那是一个IBDesignable类。

现在我们可以更方便地看到FaceView发生了什么，因为它会被绘制到storyboard中，你修改代码中小人脸的情绪，它就会被重新绘制到storyboard中去。这样的操作仍然有些繁琐，因为你需要切换到代码中去做修改，实际上我们可以在storyboard中修改FaceView的参数。回到代码中，在一些可以编辑的数值前面增加一个xcode的组件代码：

 @IBInspectable
    var lineWidth:CGFloat = 3 {didSet{setNeedsDisplay()}}
    @IBInspectable
    var color:UIColor = UIColor.blueColor(){didSet{ setNeedsDisplay()}}
    @IBInspectable
    var scal:CGFloat  = 0.90{didSet{ setNeedsDisplay()}}

你会发现在storyboard中的属性编辑器最顶部出现了：

在storyboard中属性编辑器中修改这三个选项后可以看到：

这些参数不仅仅在你的storyboard中被修改了，实际上它们被设置为了默认值，当你运行的时候看到的也是相同的图案。现在万事俱备了我们该讨论一下我们的MVC了。

在Happiness中新建一个模型：

   var happiness：Int = 50 {//0代表伤心，100代表开心
    
    }

这个模型是个Int类型的，不要跟FaceView中的smilieness搞混，smiliness搞混，这个是模型而smiliness只是一个数值表示嘴角上扬的弧度而已，取值范围也不同。但是这没关系，因为控制器所做的其中一项工作就是向视图解释模型，所以我们需要增加一些代码去完成这个操作，使得模型的0和100可以分别被表现成一个哭脸和笑脸。我们需要控制一下Happiness的数值范围。

import UIKit

class HappinessViewController: UIViewController {
    var happiness:Int = 50 {//0代表伤心，100代表开心
        didSet{
            happiness = max(min(happiness, 100), 0)
            println("happiness = \(happiness)")
            updateUI()
        }
    }
    func updateUI(){
    
    }
}

这里的Happiness是一个最简单的模型，在模型改变的时候我们需要更新我们的视图，这里的updateUI方法还没有加入代码，而且我们的模型也并没有跟视图连接起来，无论你现在把Happiness的值修改为什么它都不会改变小人的表情，这些操作我会在之后讲到。这一话的重点是理解MVC。