回顾开发,很多基础与技术却以淡忘,一个方法很多解决方案,我们通常选择最稳最简单的,尝试其他技术方案却很少,原因毕竟很现实,技术理解至关重要,从会用到可以写给别人用。
对于那些经典面试题,你是否还理解,并能轻松解答,对于那些你现在所在环境不用的知识和技术,你是否还能轻松捡起,是否还跟的上时代的步伐,前端的步伐
今日忙里偷闲,对自己看见的感兴趣的知识再次重温(日后也需多回顾,并持续更新技术栈)
(你会想到什么,你又会联想到什么,进行多角度思考)
问题一: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;
今天的学习就到这里咯-只会笑的提莫