簡介:

小程序的 behaviors方法是一種代碼復(fù)用的方式,可以將一些通用的邏輯和方法提取出來,然后在多個組件中復(fù)用,從而減少代碼冗余,提高代碼的可維護(hù)性。

使用 behaviors 復(fù)用代碼

如果需要復(fù)用代碼，可以通過 Behavior() 方法定義一個行為，每個行為可以包含屬性、數(shù)據(jù)、生命周期函數(shù)和方法。組件引用該行為時，其屬性、數(shù)據(jù)和方法會被合并到組件中，生命周期函數(shù)也會在相應(yīng)時機(jī)被調(diào)用。

組件引用它時，它的屬性、數(shù)據(jù)和方法會被合并到組件中,生命周期函數(shù)也會在對應(yīng)時機(jī)被調(diào)用。

具體示例:

一、定義 Behavior

將公共的屬性、數(shù)據(jù)、生命周期函數(shù)、方法等，抽取到單獨(dú)的文件夾 behavior.js中

聲明并暴露出去

const Behavior = Behavior({
    // 屬性
    properties: {
        label: {
            type: String,
            value: '我已同意該協(xié)議'
        }
    },
    // 數(shù)據(jù)
    data: {
        name: 'Tom',
        obj: {
            name: 'Tyke'
        }
    },
    // 方法
    methods: {
        updateName() {
            this.setData({
                name: 'Jerry'
            })
        }
    },
    // 生命周期
    lifetimes: {
        attached() {
            console.log('我是組件的生命周期函數(shù)')
        }
    }
});
module.exports = Behavior;

二、創(chuàng)建組件:

在component/example/example.js中創(chuàng)建一個組件,引用注冊之前定義的Behavior

const behavior = require('../../behaviors/behavior.js');
Component({
    behaviors: [behavior], // 引用行為
    properties: {
        customLabel: String // 自定義屬性
    },
    data: {
        message: 'Hello Behavior!'
    },
    methods: {
        onTap() {
            this.updateName(); // 調(diào)用行為中的方法
            console.log(this.data.name); // 輸出: Jerry
        }
    }
});

注冊behavior后,當(dāng)前被注冊組件擁有 behavior中的所有屬性、數(shù)據(jù)、方法，也能觸發(fā)生命周期

三、組件模版

在component/example/example.wxml 文件中獲取數(shù)據(jù)并渲染

<view>
    <text>{{ label }}: {{ name }}</text> <!-- 使用行為的屬性和數(shù)據(jù) -->
    <text>{{ customLabel }}</text> <!-- 使用組件的自定義屬性 -->
    <text>{{ message }}</text> <!-- 使用組件的數(shù)據(jù) -->
    <button bindtap="onTap">更新姓名</button>
</view>

存在了相同項(xiàng)的情況處理

如果在behavior和 當(dāng)前匿名組件中存儲了相同的項(xiàng),并且項(xiàng)中有相同的變量

此時遵循就近原則(在自定義組件內(nèi)部定義的會覆蓋 behavior.js文件中定義的)

具體情況如下:

• 存在相同的 properties
  • 就近原則，使用組件內(nèi)部的數(shù)據(jù)
• 存在相同的方法
  • 就近原則，使用組件內(nèi)部的數(shù)據(jù)
• 存在相同的 data
  • 如果是對象類型，屬性會進(jìn)行合并
  • 如果不是對象類型的數(shù)據(jù)，就近原則，展示的以組件內(nèi)部為準(zhǔn)
• 存在相同的生命周期函數(shù)和observers
  • 生命周期函數(shù)都會被觸發(fā)(不會相互覆蓋,會是在對應(yīng)觸發(fā)時機(jī)被逐個調(diào)用,也就是都會被執(zhí)行)

如果有同名的屬性或方法,采用"就近原則",組件會覆蓋behavior中的同名屬性或方法

如果有同名的數(shù)據(jù)字段且都是對象類型,會進(jìn)行對象合并,其余情況會采用“就近原則"進(jìn)行數(shù)據(jù)覆蓋

到此這篇關(guān)于微信小程序組件復(fù)用機(jī)制behaviors的文章就介紹到這了,更多相關(guān)微信小程序behaviors內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論