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

因

对于我来说,因有两个.

• 疑惑在不断的开发中,会发现工具库到做了不少.但对于组件和界面有没有类似于基类并可以多继承的东东呢?* 实践中的问题在落地到我们实践中,你会发现.在不断的优化代码.有很多相同特性或者_功能集_,在界面或者组件里重复的出现.此时,你就需要考虑把代码抽离.抽离方式很多,但总不能一直使用工具或者组件吧.虽然可以解决部分问题.但不优雅且笨重****果

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

`终于登场了.

• behaviors是谁?* 含义我理解是用于组件和界面代码共享的特性.类似有flutter、vue中mixins.通俗一点就是多继承或混入.最最最关键的一点.它是有自己的生命周期.<img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f80b5c1e4c7b43ce91e6cdf0332b6238~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?) 它是可以被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.如下所示 由于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被多个组件引用的时候,生命周期和监听函数不会被重复执行” style=“margin: auto” />

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享