百度智能小程序 Filter过滤器
推荐使用功能更全的 SJS 功能。Filter 功能将不再更新，请勿在s-if、s-for、template、自定义组件等标签中使用。Filter 是小程序的过滤器，结合 SWAN 模板，可以构建出页面的结构。
说明
- Filter 文件命名方式为：模块名 .filter.js ；
- Filter 通过 export default 方式对外暴露其内部的私有函数；
- Filter 只能导出 function 函数；
- Filter 函数不能作为组件的事件回调；
- Filter 可以创建独立得模块，也可以通过内联的形式；
- Filter 不支持全局变量；
- 多个 filter 标签不能出现相同的 src 属性值， module 属性的值也是标识模块的唯一 id 。
Filter 模块
filter 代码有两种编写方式：
- 可以编写在 swan 文件中的<filter></filter>标签内，直接在该 swan 文件中通过module.fn的形式进行方法调用，例如代码示例 1；
- 可以编写在以 .filter.js 为后缀名的文件内，在其它 swan 文件中通过filter标签的 src 进行引入，例如代码示例 2。
每一个 .filter.js 文件和<filter></filter>标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
filter 标签
标签可以是双闭合 <filter></filter> 或者单闭合 <filter/>，带有 src 属性的标签，过滤器代码要写到相应的文件里，不带有 src 属性的标签，过滤器代码写在标签内。
| 属性名 | 类型 | 说明 |
|---|---|---|
| src | String | 引用 .filter.js 文件的相对路径 |
| module | String | 当前<filter></filter>标签的模块名，必填字段 |
filter 逻辑代码
filter 逻辑代码使用export default的形式导出封装的一系列方法。代码示例
export default {
Foo: () => {
return 'swan-foo-filter';
},
Bar: () => {
return 'swan-bar-filter';
}
}
filter 内联渲染
代码示例 1
<!-- swan -->
<view> {{swan.message()}} </view>
<filter module="swan">
export default {
message: function() {
return 'Hello world';
}
}
</filter>
页面输出：
Hello world
数据处理示例
代码示例 2
在开发者工具中打开// index.js
Page({
data: {
array: [1, 3, 6, 8, 2, 0]
}
});
// index.filter.js
export default {
maxin: arr => {
var max = undefined;
for (var i = 0; i < arr.length; ++i) {
max = max === undefined ?
arr[i] :
(max >= arr[i] ? max : arr[i]);
}
return max;
}
};
<!-- swan模板 -->
<view>{{swan.maxin(array)}}</view>
<filter src="./index.filter.js" module="swan"></filter>页面输出：
8
注释
Filter 的注释与 swan 模板文件的注释方式相同。
代码示例
<!-- <filter module="swan">
function Foo() {
return 'programer';
}
export default {
test: Foo
};
</filter> -->
运算符 & 语句 & 数据类型 & 基础类库
Filter 支持 javascript 所有运算符、语句、数据类型和基础类库。
常见问题
Q：filter 是否支持三目运算
A：不支持。