美文网首页
致那些复杂的响应式框架4

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

作者: wangyongyue | 来源:发表于2019-05-08 22:31 被阅读0次

    来吧,当我们用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,你也可以写出自己风格的轻量级框架了。
    写到一个文件里面不太好看,让我们完善一下,让他成为一个真正可以为大家服务的框架吧。

    相关文章

      网友评论

          本文标题:致那些复杂的响应式框架4

          本文链接:https://www.haomeiwen.com/subject/sodtmqtx.html