微信小程序-组件复用机制behaviors

简介:

小程序的 behaviors方法是一种代码复用的方式,可以将一些通用的逻辑和方法提取出来,然后在多个组件中复用,从而减少代码冗余,提高代码的可维护性。

使用 behaviors 复用代码

如果需要复用代码,可以通过 Behavior() 方法定义一个行为,每个行为可以包含属性、数据、生命周期函数和方法。组件引用该行为时,其属性、数据和方法会被合并到组件中,生命周期函数也会在相应时机被调用。

组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。


具体示例:

一、定义 Behavior

将公共的属性、数据、生命周期函数、方法等,抽取到单独的文件夹 behavior.js中

  • 声明并暴露出去
javascript 复制代码
const Behavior = Behavior({
    // 属性
    properties: {
        label: {
            type: String,
            value: '我已同意该协议'
        }
    },
    // 数据
    data: {
        name: 'Tom',
        obj: {
            name: 'Tyke'
        }
    },
    // 方法
    methods: {
        updateName() {
            this.setData({
                name: 'Jerry'
            })
        }
    },
    // 生命周期
    lifetimes: {
        attached() {
            console.log('我是组件的生命周期函数')
        }
    }
});
module.exports = Behavior;

二、创建组件:

  • 在component/example/example.js中创建一个组件,引用注册之前定义的Behavior
javascript 复制代码
const behavior = require('../../behaviors/behavior.js');

Component({
    behaviors: [behavior], // 引用行为
    properties: {
        customLabel: String // 自定义属性
    },
    data: {
        message: 'Hello Behavior!'
    },
    methods: {
        onTap() {
            this.updateName(); // 调用行为中的方法
            console.log(this.data.name); // 输出: Jerry
        }
    }
});

注册behavior后,当前被注册组件拥有 behavior中的所有属性、数据、方法,也能触发生命周期

三、组件模版

  • 在component/example/example.wxml 文件中获取数据并渲染
html 复制代码
<view>
    <text>{{ label }}: {{ name }}</text> <!-- 使用行为的属性和数据 -->
    <text>{{ customLabel }}</text> <!-- 使用组件的自定义属性 -->
    <text>{{ message }}</text> <!-- 使用组件的数据 -->
    <button bindtap="onTap">更新姓名</button>
</view>

存在了相同项的情况处理

如果在behavior和 当前匿名组件中存储了相同的项,并且项中有相同的变量

此时遵循就近原则(在自定义组件内部定义的会覆盖 behavior.js文件中定义的)

具体情况如下:

  • 存在相同的 properties
    • 就近原则,使用组件内部的数据
  • 存在相同的方法
    • 就近原则,使用组件内部的数据
  • 存在相同的 data
    • 如果是对象类型,属性会进行合并
    • 如果不是对象类型的数据,就近原则,展示的以组件内部为准
  • 存在相同的生命周期函数和observers
    • 生命周期函数都会被触发(不会相互覆盖,会是在对应触发时机被逐个调用,也就是都会被执行)

如果有同名的属性或方法,采用"就近原则",组件会覆盖behavior中的同名属性或方法

如果有同名的数据字段且都是对象类型,会进行对象合并,其余情况会采用"就近原则"进行数据覆盖

相关推荐
云起SAAS1 天前
养成合成小游戏抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·养成合成小游戏
轩情吖1 天前
Qt常用控件之QLabel(一)
开发语言·数据库·c++·qt·小程序·qlabel·桌面开发
小小王app小程序开发1 天前
旧衣回收小程序:非技术视角下的价值重构与发展前景
小程序·重构
星梦清河1 天前
Day03:小程序的常用操作
小程序
2501_916013741 天前
苹果应用上架全流程指南 iOS 应用发布步骤、App Store 审核流程、ipa 文件上传与 uni-app 打包实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
weixin_lynhgworld1 天前
从闲置到珍宝:旧物回收二手交易小程序系统开启绿色生活新方式
小程序·生活
说私域1 天前
开源AI大模型、AI智能名片与S2B2C商城小程序在价值观型社群构建与运营中的价值与应用
人工智能·小程序·开源
2501_915921431 天前
HTTPS 映射如何做?(HTTPS 映射配置、SNI 映射、TLS 终止、内网映射与 iOS 真机验证实战)
android·网络协议·ios·小程序·https·uni-app·iphone
睡不着的可乐1 天前
uniapp 支付宝小程序 扩展组件 component 节点的class不生效
前端·微信小程序·支付宝
2501_915106321 天前
iOS 混淆与机器学习模型保护 在移动端保密权重与推理逻辑的实战指南(iOS 混淆、模型加密、ipa 加固)
android·人工智能·机器学习·ios·小程序·uni-app·iphone