《你不会还不知道“behavior”吧》之介绍

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第25天，点击查看活动详情

因

对于我来说,因有两个.

疑惑

在不断的开发中,会发现工具库到做了不少.但对于组件和界面有没有类似于基类并可以多继承的东东呢?
实践中的问题

在落地到我们实践中,你会发现.在不断的优化代码.有很多相同特性或者功能集,在界面或者组件里重复的出现.此时,你就需要考虑把代码抽离.抽离方式很多,但总不能一直使用工具或者组件吧.虽然可以解决部分问题.但不优雅且笨重

果

千呼万唤始出来.我们的主角behavior终于登场了.

behaviors是谁?

含义

我理解是用于组件和界面代码共享的特性.类似有flutter、vue中mixins.通俗一点就是多继承或混入.最最最关键的一点.它是有自己的生命周期.

它是可以被Page或自定组件引用的.

组成

它是由属性、数据、生命周期和函数四个大模块组成的.提高了代码的复用性.表现形式为js文件.具体参数如下所示

参数	类型	描述
`properties`	Object Map	组件的对外属性，是属性名到属性设置的映射表
`data`	Object	组件的内部数据
`observers`	Object	组件数据字段监听器，用于监听 properties 和 data 的变化(很有用)
`methods`	Object	组件的方法，包括事件响应函数和任意的自定义方法
`behaviors`	String Array	引入其它的 behavior
`created`	Function	实例刚刚被创建时执行.切记此时不能调用setData
`attached`	Function	实例进入页面节点树时执行
`ready`	Function	组件布局完成后执行
`moved`	Function	实例被移动到节点树另一个位置时执行
`detached`	Function	实例被从页面节点树移除时执行
`relations`	Object	组件间关系定义
`lifetimes`	Object	新的组件生命周期声明对象
`pageLifetimes`	Object	新的组件所在页面的生命周期声明对象
`definitionFilter`	Function	定义段过滤器，用于自定义组件扩展

创建

实践一下.可以在项目中创建一个behaviors目录,用于存放通用behavior.如下所示

截屏2022-12-18 22.22.51.png 由于behaviors本质就是js文件,只需要在behaviors文件夹下,创建对应的js文件就行,然后在js文件里,创建behavior方法.如下所示

module.exports = Behavior({

    properties: {
        name:"哈哈我是对外公开的"
    },
    data: {
        title:"我是测试数据哦"
    },
    // 私有方法集
    methods: {
       // 测试方法
       testApi() {
           console.log("我是testApi")
       }
    },

    // 旧的生命周期函数,可以保持对 <2.2.3 版本基础库的兼容
    created() {},
    // 组件生命周期声明对象
    lifetimes: {
        // 新的生命周期函数
        created() {},
    }
});
复制代码

引用

当page或自定义组件引用behaviors的时候.behaviors的属性、数据和方法都会合并到被引用者中.

简单来说.

如果你引用了behavior,那就相当于你继承了它,既然继承了,那必然父类有的你都有,你特有的父类必然没有哦.当然也是可以可以重写父类对外公开的方法哦.

我们已经创建的第一个behavior,下面一起看一下怎么引用吧
- 界面中引用
```
const test = require("../../behaviors/testbehaviors")
Page ({
   behaviors: [test],
})
复制代码
```
- 组件中引用
```
const test = require("../../behaviors/testbehaviors")
Component({
  behaviors: [test],
})
复制代码
```
调用和重写方法
- 调用方法
  
  从上面的实例中,我们是可以直接调用test中的方法的.就如调用自己的方法一样,如下所示
```
onLoad() {
   this.testApi();
},
复制代码
```
  输出结果
- 重写方法
  
  这里我们直接重写testApi方法,如下所示
```
testApi() {
   console.log("我是index")
},
复制代码
```
  运行结果
behavior虽然可以解决多继承的问题,但多个父类冲突时,那子类应该怎么抉择呢.
- 同名属性和方法
  
  1.如果当前组件存在同名属性或者方法,以当前组件为准
  
  2.如果当前组件没有同名属性或者方法.以behaviors字段中定义最后一个behavior中的属性或方法为准.
  
  3.在 2 的基础上，若存在嵌套引用 behavior 的情况，则规则为：引用者 behavior 覆盖 被引用的 behavior 中的同名属性或方法
- 同名数据字段
  
  1.如果同名数据字段都是对象,就合并
  
  2.其余情况,执行覆盖原则 引用者 behavior > 被引用的 behavior 、 靠后的 behavior > 靠前的 behavior。（优先级高的覆盖优先级低的，最大的为优先级最高）
- 生命周期和监听函数
  
  由于特殊性,他们不会被覆盖,只能向上逐个调用.
  
  调用规则如下所示:
```
   `behavior` 优先于组件执行；
   `被引用的 behavior` 优先于 `引用者 behavior` 执行；
   `靠前的 behavior` 优先于 `靠后的 behavior` 执行；
复制代码
```
  当然同一个behavior被多个组件引用的时候,生命周期和监听函数不会被重复执行.

《你不会还不知道“behavior”吧》之介绍

猜你喜欢