一、快手广告投放-抽象节点
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中，已达到计算属性的效果。此实现只是作为一个简单案例来展示，请勿直接在生产环境中使用。
文章均来自互联网如有不妥请联系作者删除QQ:314111741 地址：http://www.mqs.net/post/8894.html
![快手广告|能量告急？速来元气生活节补给一下 秋风渐起，天气转凉，秋乏也随之一起来报到。这时生活中的小确幸总能让人重获能量，或是漫步在桂花香气中，与美好不期而遇，或是和肌肤约个深度SPA，让快乐升腾冒泡，或是睡一场久违的好觉，把美梦还给枕边……充电完毕，又是元气加满的一天！[详情] 日期：2023-11-11 阅读量：8](http://www.mqs.net/thumb/thumb-52-320-224-0-20240108064155170466731561892.png)
添加新评论