1.快手推广账户在组件中使用抽象节点，有时，自定义组件模板中的一些节点，其对应的自定义组件不是由自定义组件本身确定的，而是自定义组件的调用者确定的。这时可以把这个节点声明为“抽象节点”。
例如，我们现在来实现一个“选框组”（selectable-group）组件，它其中可以放置单选框（custom-radio）或者复选框（custom-checkbox）。这个组件的 ksml 可以这样编写：
代码示例
<!-- selectable-group.ksml -->
<view ks:for="{{labels}}">
<label>
<selectable disabled="{{false}}"></selectable>
{{item}}
</label>
</view>
其中，“selectable”不是任何在 json 文件的usingComponents 字段中声明的组件，而是一个抽象节点。它需要在 componentGenerics 字段中声明：
{
"componentGenerics": {
"selectable": true
}
}
2.快手短视频广告-使用包含抽象节点的组件
在使用selectable-group 组件时，必须指定“selectable”具体是哪个组件：
<selectable-group generic:selectable="custom-radio" />
这样，在生成这个 selectable-group组件的实例时，“selectable”节点会生成“custom-radio”组件实例。类似地，如果这样使用：
<selectable-group generic:selectable="custom-checkbox" />
“selectable”节点则会生成“custom-checkbox”组件实例。
注意：上述的 custom-radio 和 custom-checkbox 需要包含在这个ksml对应 json 文件的usingComponents 定义段中。
{
"usingComponents": {
"custom-radio": "path/to/custom/radio",
"custom-checkbox": "path/to/custom/checkbox"
}
}
3.快手信息流广告抽象节点的默认组件
抽象节点可以指定一个默认组件，当具体组件未被指定时，将创建默认组件的实例。默认组件可以在 componentGenerics 字段中指定：
{
"componentGenerics": {
"selectable": {
"default": "path/to/default/component"
}
}
}
4.快手推广费用自定义组件扩展-扩展后的效果
为了更好的理解扩展后的效果，先举一个例子：
// behavior.js
module.exports = Behavior({
definitionFilter(defFields) {
defFields.data.from = 'behavior'
},
})
// component.js
Component({
data: {
from: 'component'
},
behaviors: [require('behavior.js')],
ready() {
console.log(this.data.from) // 此处会发现输出 behavior 而不是 component
}
})
通过例子可以发现，自定义组件的扩展其实就是提供了修改自定义组件定义段的能力，上述例子就是修改了自定义组件中的 data 定义段里的内容。
5.快手广告账户使用扩展
Behavior() 构造器提供了新的定义段definitionFilter，用于支持自定义组件扩展。 definitionFilter 是一个函数，在被调用时会注入两个参数，*个参数是使用该 behavior 的 component/behavior 的定义对象，第二个参数是该behavior所使用的behavior 的definitionFilter 函数列表。以下举个例子来说明：
// behavior3.js
module.exports = Behavior({
definitionFilter(defFields, definitionFilterArr) {},
})
// behavior2.js
module.exports = Behavior({
behaviors: [require('behavior3.js')],
definitionFilter(defFields, definitionFilterArr) {
// definitionFilterArr[0](defFields)
},
})
// behavior1.js
module.exports = Behavior({
behaviors: [require('behavior2.js')],
definitionFilter(defFields, definitionFilterArr) {},
})
// component.js
Component({
behaviors: [require('behavior1.js')],
})
上述代码中声明了 1 个自定义组件和 3 个 behavior，每个 behavior 都使用了 definitionFilter定义段。那么按照声明的顺序会有如下事情发生：
当进行 behavior2的声明时就会调用 behavior3 的 definitionFilter 函数，其中 defFields 参数是 behavior2 的定义段， definitionFilterArr 参数即为空数组，因为 behavior3 没有使用其他的 behavior 。
当进行 behavior1 的声明时就会调用 behavior2 的 definitionFilter 函数，其中 defFields 参数是 behavior1 的定义段， definitionFilterArr 参数是一个长度为 1 的数组，definitionFilterArr[0] 即为 behavior3 的 definitionFilter 函数，因为 behavior2 使用了 behavior3。用户在此处可以自行决定在进行 behavior1 的声明时要不要调用 behavior3 的 definitionFilter 函数，如果需要调用，在此处补充代码 definitionFilterArr[0](defFields) 即可，definitionFilterArr 参数会由基础库补充传入。
同理，在进行 component 的声明时就会调用 behavior1 的 definitionFilter 函数。
简单概括，definitionFilter 函数可以理解为当 A 使用了 B 时，A 声明就会调用 B 的 definitionFilter 函数并传入 A 的定义对象让 B 去过滤。此时如果 B 还使用了 C 和 D ，那么 B 可以自行决定要不要调用 C 和 D 的 definitionFilter 函数去过滤 A 的定义对象。
6.快手推广案例代码示例-真实案例
下面利用扩展简单实现自定义组件的计算属性功能
// behavior.js
module.exports = Behavior({
lifetimes: {
created() {
this._originalSetData = this.setData // 原始 setData
this.setData = this._setData // 封装后的 setData
}
},
definitionFilter(defFields) {
const computed = defFields.computed || {}
const computedKeys = Object.keys(computed)
const computedCache = {}
// 计算 computed
const calcComputed = (scope, insertToData) => {
const needUpdate = {}
const data = defFields.data = defFields.data || {}
for (let key of computedKeys) {
const value = computed[key].call(scope) // 计算新值
if (computedCache[key] !== value) needUpdate[key] = computedCache[key] = value
if (insertToData) data[key] = needUpdate[key] // 直接插入到 data 中，初始化时才需要的操作
}
return needUpdate
}
// 重写 setData 方法
defFields.methods = defFields.methods || {}
defFields.methods._setData = function (data, callback) {
const originalSetData = this._originalSetData // 原始 setData
originalSetData.call(this, data, callback) // 做 data 的 setData
const needUpdate = calcComputed(this) // 计算 computed
originalSetData.call(this, needUpdate) // 做 computed 的 setData
}
// 初始化 computed
calcComputed(defFields, true) // 计算 computed
}
})
在组件中使用：
const beh = require('./behavior.js')
Component({
behaviors: [beh],
data: {
a: 0,
},
computed: {
b() {
return this.data.a + 100
},
},
methods: {
onTap() {
this.setData({
a: ++this.data.a,
})
}
}
})
<view>data: {{a}}</view>
<view>computed: {{b}}</view>
<button bindtap="onTap">click</button>
实现原理很简单，对已有的 setData 进行二次封装，在每次 setData 的时候计算出 computed 里各字段的值，然后设到 data中，已达到计算属性的效果。此实现只是作为一个简单案例来展示，请勿直接在生产环境中使用。
任何行业选择投放快手广告还是不错的，投放广告要趁早！如果您想做快手的广告投放，我们推荐您选一合适的平台来做。*近很火的一家快手广告代理，北京长春小象网络营销代运营广告有限代运营,从广告开户到投放全流程都有*人员来做，现在开户的费用只需要5000元，咨询电话：158-0194-4939
本文标题：快手广告投放-快手小程序（开发-框架）14
本文链接：https://www.eatui.cn/xinxiliu/17608.html
