2018-08-24 • 于 Vue 阅读

一些常用的设计模式

总结一些写轱辘的时候使用的设计模式（套路）

1.发布订阅模式

1
2
3

vm.$emit('update:selected',this.name) //发布
vm.$on('update:selected',(name)=>{this.name = name}) //订阅
vm.$off('update:selected') //取消订阅

2.单项数据流

使用eventBus

//父亲
let vm = new Vue({
  data(){return { selected: 1 }}
})
vm.eventBus.$emit('update:selected', this.selected)  //给儿子说，我给你传个现在最新的selected
vm.eventBus.$on('update:selected',(selected)=>{ this.selected = selected }) 
//监听儿子有没有让我修改selected

//儿子
let vm = new Vue({
  data(){return { selected: 2 }}
})
vm.eventBus.$emit('update:selected',this.selected) //给爸爸说一声，我想修改一下 selected的值
vm.eventBus.$on('update:selected',(selected)=>{this.selected = selected}) 
//监听爸爸有没有 同意 或者 让 我改selected

流程: 爸爸修改儿子数据 —–> 直接告诉儿子

儿子想修改自己的数据 —–> 告诉爸爸想要修改 ——> 爸爸修改数据 —–> 告诉儿子

让爸爸始终掌控大局。

3.正交原则

props 不要违反正交原则

例如,我们设计一个button组件

1	props:['rightIcon','leftIcon']

这两个属性就是不正交的，他们都可以改变icon的位置

修改

1	props:['iconPosition'] // right \|\| left

Storm

一些常用的设计模式

总结一些写轱辘的时候使用的设计模式（套路）

1.发布订阅模式

2.单项数据流

3.正交原则

4.写可测试的代码

移动页面开发

LESS