致那些复杂的响应式框架4

2019-05-08  本文已影响0人  wangyongyue

来吧,当我们用Vue的api完成swift响应式的编写到底会是什么样子的的呢?
话不多说上代码示例:
放一起有点长一段一段放,顺便说一下(代码好简单)

   var reText = Response()
    var reIf = Response()
    var reBlind = Response()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Do any additional setup after loading the view.
        self.view.backgroundColor = UIColor.white
        
        let label = RLabel()
        label.backgroundColor = UIColor.blue
        label.textColor = UIColor.red
        label.frame = CGRect.init(x: 50, y: 80, width: 80, height: 30)
        self.view.addSubview(label)
        
        let label1 = RLabel()
        label1.backgroundColor = UIColor.blue
        label1.textColor = UIColor.red
        label1.frame = CGRect.init(x: 200, y: 80, width: 80, height: 30)
        self.view.addSubview(label1)
        
        let label3 = RLabel()
        label3.backgroundColor = UIColor.blue
        label3.textColor = UIColor.red
        label3.frame = CGRect.init(x: 200, y: 180, width: 80, height: 30)
        self.view.addSubview(label3)
        
        let label4 = RLabel()
        label4.backgroundColor = UIColor.blue
        label4.textColor = UIColor.red
        label4.frame = CGRect.init(x: 50, y: 180, width: 80, height: 30)
        self.view.addSubview(label4)
        
        
        let button = RButton()
        button.setTitle("button", for: .normal)
        button.setTitleColor(UIColor.black, for: .normal)
        self.view.addSubview(button)
        button.frame = CGRect.init(x: 50, y: 280, width: 80, height: 30)
        
        let field = RField()
        field.borderStyle  = .roundedRect
        self.view.addSubview(field)
        field.frame = CGRect.init(x: 50, y: 380, width: 80, height: 30)
        
        
        label.v_text(re: reText)
        label1.v_if(re: reIf)
        label1.v_text(re: reText)

        label3.v_bind(re: reBlind)
        label3.v_text(re: reText)

        label4.v_text(re: reText)


        button.v_on {
            
            self.reText.v_text = "wyy_click"
            self.reIf.v_if = true
            self.reBlind.v_blind = ["backgroundColor":UIColor.green]
            
        }
        field.v_model {
            
            self.reText.v_text = field.text
            
        }
        
        
        
    }

声明Response 实例reText,reIf,reBlind
v_on是点击事件,v_model 是field 的input变化
点击改变状态,监听field的输入文本变化,数据双向绑定(需要自己写一下,待会会优化)

class RLabel:UILabel{
   
    //{{ msg }}
    func v_text(re:Response){
        
        re.responseContent({[weak self] in
            
            self?.text = re.v_text
        })
        
    }
    //v-bind
    func v_bind(re:Response){
        re.responseContent({[weak self] in

            if let dic = re.v_blind{
                
                self?.setValuesForKeys(dic)
                
            }
            
        })
        
    }
    //v-if
    func v_if(re:Response){
        
        re.responseContent({[weak self] in
            
            if let v = re.v_if{
                
                self?.isHidden = v
                
            }
        })
        
    }
  
    
    
    
}
class RButton:UIButton{
    
    
    
    //{{ msg }}
    func v_text(re:Response){
        
        re.responseContent({[weak self] in
            
            self?.setTitle(re.v_text, for: .normal)
        })
        
    }
    //v-bind
    func v_bind(re:Response){
        re.responseContent({[weak self] in

            if let dic = re.v_blind{
                
                self?.setValuesForKeys(dic)
                
            }

        })
        
    }
    //v-if
    func v_if(re:Response){
        
        re.responseContent({[weak self] in
            
        
            if let v = re.v_if{
                
                self?.isHidden = v
                
            }
        })
        
    }
   
    //v-on
    var block:responseBlock?
    func v_on(re:@escaping responseBlock){
        
        self.addTarget(self, action: #selector(clickEvent), for: .touchUpInside)
        block = re

    }
    @objc func clickEvent(){
        
        block?()
    }
  
    
    
}
class RField:UITextField{
    

    //{{ msg }}
    func v_text(re:Response){
        
        re.responseContent({[weak self] in
            
            self?.text = re.v_text
        })
        
    }
    //v-bind
    func v_bind(re:Response){
        re.responseContent({[weak self] in
            
            if let dic = re.v_blind{
                
                self?.setValuesForKeys(dic)
                
            }
        })
        
    }
    //v-if
    func v_if(re:Response){
        
        re.responseContent({[weak self] in
            
            if let v = re.v_if{
                
                self?.isHidden = v

            }
        })
        
    }
    //v-model
    var block:responseBlock?
    func v_model(re:@escaping responseBlock){
    
        block = re
        self.addTarget(self, action: #selector(changeText), for: .editingChanged)
        
    }
    @objc func changeText(){
        
       block?()
    }
    
    
}

RLabel,RButton,RField 二次封装原生UI,实现接口v_text,v_blind,v_if,v_on,v_model

typealias responseBlock = () -> ()
class Response:NSObject{
    
    //响应者队列
    var array = Array<responseBlock>()
    private var _v_text:String?
    var v_text:String?{
        set{
            _v_text = newValue
            sendReponserMsg()
        }
        get{
            return _v_text
        }
    }
    private var _v_blind:[String:Any]?
    var v_blind:[String:Any]?{
        set{
            _v_blind = newValue
            sendReponserMsg()
        }
        get{
            return _v_blind
        }
    }
    private var _v_if:Bool?
    var v_if:Bool?{
        set{
            _v_if = newValue
            sendReponserMsg()
        }
        get{
            return _v_if
        }
    }
    
    
    
    func responseContent(_ callBack:@escaping responseBlock){
        array.append(callBack)
    }
    //触发响应
    func sendReponserMsg(){
        
        for value in array{
            
            value()
        }
    }
   
}

Response 实现响应类,声明属性 v_text,v_blind,v_if,v_on,v_model
写的很顺利,一气呵成。思路明了就不会有太大问题。
写的不多,可以写写demo用了。还有array,model之类的需要完善。
希望对大家有帮助,使用原生封装,不涉及底层也就不会有性能,或者其他问题。而且大家也可以自定自己喜欢的API,你也可以写出自己风格的轻量级框架了。
写到一个文件里面不太好看,让我们完善一下,让他成为一个真正可以为大家服务的框架吧。

上一篇下一篇

猜你喜欢

热点阅读