20200305-体会

回顾开发,很多基础与技术却以淡忘,一个方法很多解决方案,我们通常选择最稳最简单的,尝试其他技术方案却很少,原因毕竟很现实,技术理解至关重要,从会用到可以写给别人用。

对于那些经典面试题,你是否还理解,并能轻松解答,对于那些你现在所在环境不用的知识和技术,你是否还能轻松捡起,是否还跟的上时代的步伐,前端的步伐

今日忙里偷闲,对自己看见的感兴趣的知识再次重温(日后也需多回顾,并持续更新技术栈)

(你会想到什么,你又会联想到什么,进行多角度思考)

问题一:input中如何监听值的变化

因为目前所使用技术栈为vue,数据驱动,第一反应,v-model(v-on与v-bind的结合体),然后对model的data对象进行一个watch(watch之前可以对监听的值进行computed为一个方法,并暴露出来)监听,一旦监听对象改变,该watch方法就会执行,并且支持深度监听,来看一种vue方式监听
第一个方法typeObj,来监听input数字长度变化
第二个方法spaceObj,来监听输入是否纯在空格
如果监听相同-可以写在一个函数里面

computed: {
        typeObj () {
            const { phone, code } = this
            return {
                phone, code
            }
        },
        spaceObj () {
            const { phone, code } = this
            return {
                phone, code
            }
        }
    },
    watch: {
        typeObj: {
            handler: function () {
                if (this.phone.length === 11 && this.code.length >= 6) {
                    this.btnCss = 'real-btn-active'
                } else {
                    this.btnCss = 'real-btn'
                }
            },
            deep: true,
            immediate: true
        },
        spaceObj: {
            handler: function () {
                if (this.$reg.isSpace(this.phone) || this.$reg.isSpace(this.code)) {
                    this.phone = this.phone.replace(/\s+/g, '')
                    this.code = this.code.replace(/\s+/g, '')
                } else {
                    return false
                }
            },
            deep: true,
            immediate: true
        }
    },

vue特点之一,数据驱动,vue自身的数据双向绑定,来自原生

Object.defineProperty(obj, prop, descriptor)
扩展一波

该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

三个参数
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。

其中第三个参数是我们配置的地方
定义:
该对象的值是否可赋值,是否枚举,是否可删除
还有两个可选键
get
一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。
默认为 undefined。
set
一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。
默认为 undefined。
有点类似设计模式(模式可能每个人的理解会有一定差异)中的发布订阅,观察者模式
(感兴趣的可以看看vue对defineProperty是怎么重写定义的,以及他的缺点问题与如何解决)

接下来,想起最近也在写原生老项目,那些绑定在标签上的监听事件
,倒是忘记这最简单,也容易忘记的方案,

keydown
keyup
keypress
input.addEventListener('input', updateValue);
事件后对value继续操作

到了这里,回想
那react对input数据是怎么监听的呢

原理还是onChange方法
然后使用react方式对value进行set
import React, { Component } from 'react'
class App extends Component {
  constructor(props) {
    super(props)
    //this.state = {}  定义数据
    this.state = {
      inputValue: ""
    }
  }
  render() {
    return (
      <div>
        {/* react里使用表达式,需要用大括号 */}
        {/* react里绑定事件用驼峰命名,如,onChange */}
        {/* react里需要改变this的指向,用bind(this) 把this指向到这个标签里 */}
        <input type="text" value={this.state.inputValue} onChange={this.change.bind(this)} />
      </div>
    )
  }

  change(e) {
    console.log(e.target.value);
    //设置数据的值,用this.setState({})
    this.setState({
      inputValue: e.target.value
    })
  }
}
export default App;

今天的学习就到这里咯-只会笑的提莫

Last modification:March 5th, 2020 at 05:15 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment