开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
开发 > 框架 > 自定义组件 > 自定义组件扩展
贡献者
收藏
订阅更新
我的文档
设置
为了更好定制自定义组件的功能,可以使用自定义组件扩展机制。
版本要求
基础库 版本开始支持。
扩展后的效果
为了更好地理解自定义组件扩展,可查看如下示例: 如果想修改或者消费定义段(自定义组件构造器参数),通常需要提供一个函数在组件注册前进行处理,并返回处理后的定义段。
typescript
复制代码
// 没有使用自定义组件扩展
const wrap4observers = function(deffields) {
if (my.caniuse('component.observers') === true) {
deffields.options = options.options || {};
deffields.options.observers = true;
} else {
// 当前基础库不支持observers,自己pollyfill
// pollyfill observers
}
return deffields;
}

// 使用 wrap4observers 函数 对 options 做加工
component(wrap4observers({
observers: {
'**': function(val) {
// ...
}
}
}))
通过自定义组件扩展,可以改为这样:
typescript
复制代码
const observersmixin = mixin({
definitionfilter(deffields) {
// 当前基础库支持observers
if (my.caniuse('component.observers') === true) {
deffields.options = options.options || {};
deffields.options.observers = true;
} else {
// 当前基础库不支持observers,自己pollyfill
// pollyfill observers
}
}
});

component({
mixins: [observersmixin],
observers: {
'**': function(val) {
// ...
}
},
})
通过示例可以发现,自定义组件的扩展其实就是提供在自定义组件注册阶段修改其定义段的能力,上述示例就是修改了自定义组件中的 options 定义段里的内容。
使用扩展
mixin() 构造器对比普通的 mixin js 对象提供了新的定义段 definitionfilter,用于支持自定义组件扩展。definitionfilter 是一个函数,在被调用时会注入两个参数,第一个参数是使用该 mixin 的 component/mixin 的定义对象(构造器参数),第二个参数是该 mixin 通过 mixins 定义段所使用的 mixin 的 definitionfilter 函数列表。
上述代码中注册了1个自定义组件和3个 mixin,每个 mixin 都使用了 definitionfilter 定义段。根据 componentmixin 中的 mixins 参数值(引用关系)会有以下事情发生:
1由于 mixin2 引用了 mixin3,当注册 mixin2 时会调用 mixin3 的 definitionfilter 函数,其中 deffields 参数是 mixin2 的定义段,definitionfilterarr 参数为 undefined,因为 mixin3 没有通过 mixins 参数使用其它的 mixin。
2由于 mixin1 引用了 mixin2,当注册 mixin1 时会调用 mixin2 的 definitionfilter 函数,其中 deffields 参数是 mixin1 的定义段,definitionfilterarr 参数为长度为 1 的数组,definitionfilterarr[0] 即 mixin3 的 definitionfilter,因为 mixin2 使用了mixin3。用户在此可以自行决定在注册 mixin1 时是否调用 mixin3 的 definitionfilter。如果需要调用,在此处补充代码 definitionfilterarr[0](deffields) 即可,definitionfilterarr 参数(若有)则会由基础库补充传入。
3同理,在注册 component 时,会调用 mixin1 的 definitionfilter 函数。
简单概括:
definitionfilter 函数可以理解为当 a 使用了 b 时,在注册 a 的时刻就会调用 b 的 definitionfilter 函数并传入 a 的定义对象让 b 进行处理。
此时,如果 b 还使用了 c 和 d,那么 b 可以自行决定要不要调用 c 和 d 的 definitionfilter 函数去处理 a 的定义对象。
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图