微信小程序> 小程序学习行为构建器Behavior的编写(组件的公共js封装)

小程序学习行为构建器Behavior的编写(组件的公共js封装)

浏览量:6425 时间: 来源:张芝山

运用这个构建器的环境是:编写了三个组件,组件的js中的外部数据,也就是properties下的变量都是重复的,

在这种情况,是不是每次编写组件的js时候,都要复制同样的变量到对应的js中,所以我们采取行为构建器的方法,、

把相同的部分也提取出来,这样有便于维护和代码的复用性!

首先在创建一个js文件,classic-beh.js

// 构造器--构造行为//行为能够被其他组件一起使用const classicBeh = Behavior({  properties: {    img: String,    content: String,    hidden: Boolean  },  attached:function(){  },  data:{  },  methods:{  },})export {classicBeh}

从代码中可以看出,三个组件的外部数据都是img,content以及hidden,所以我们在行为构建器中提取出来,

记得export导出才能调用

接下来,我们去三个组件中的其中一个组件的js中,进行代码优化改写:

//导入行为构建器  classic-beh.jsimport { classicBeh} from '../classic-beh.js'Component({  /**   * 组件的属性列表   */  //继承行为  behaviors: [classicBeh],  properties: {            },  /**   * 组件的初始数据   */  data: {      },  /**   * 组件的方法列表   */  methods: {  }})

可以看到我们先是把行为构建器导入(import),然后继承这个行为,behaviors:[classicBeh],

可以看到这时候的properties里面的外部数据是空的,因为全部都被提取到行为构建器中了。


特殊情况下的处理:

如果这时候需要继承多个行为构建器:

那么在代码的上方导入之后,然后在数组中隔开,进行继承  behaviors: [classicBeh,B,C,D],

这时候properties里面还要在传一个名字相同但是数据类型不一样的变量时候,那么该如果取舍,

是拿行为构建器的值还是自身的值,根据规则,这时候的自身的值会覆盖掉行为构建器的值!子类会覆盖父类

再来,另外一个情况 数组中三个都有相同的变量,这时候,也还是文件自身的子类会覆盖,

最后一种情况:

如果properties里面都没有值,只有数组中三个行为构建器,那么这时候,这三个行为优先显示的是最后一个行为构建器。

另外在attached生命周期函数中,不会出现上述的覆盖现象,他会一次调用每个行为构建器中的attached生命周期函数!

喜欢的点个赞哦!欢迎进行交流!

 

小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎