Filter 过滤器

  • Filter 文件命名方式为：模块名 .filter.js ；
  • Filter 通过 export default 方式对外暴露其内部的私有函数；
  • Filter 只能导出 function 函数；
  • Filter 函数不能作为组件的事件回调；
  • Filter 可以创建独立得模块，也可以通过内联的形式；
  • Filter 不支持全局变量；

Filter 模块

filter 代码有两种编写方式：

  • 可以编写在 swan 文件中的<filter></filter>标签内，直接在该 swan 文件中通过module.fn的形式进行方法调用，例如；
  • 可以编写在以 .filter.js 为后缀名的文件内，在其它 swan 文件中通过filter标签的 src 进行引入，例如代码示例 2。
    每一个 .filter.js 文件和<filter></filter>标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

标签可以是双闭合 <filter></filter> 或者单闭合 <filter/>，带有 src 属性的标签，过滤器代码要写到相应的文件里，不带有 src 属性的标签，过滤器代码写在标签内。

filter 逻辑代码

filter 逻辑代码使用export default的形式导出封装的一系列方法。
代码示例

  • JS
  • SWAN
  1. <!-- swan -->
  2. <view> {{swan.message()}} </view>
  4.     export default {
  5.         message: function() {
  6.             return 'Hello world';
  7.         }
  8.     }
  9. </filter>

页面输出：

数据处理示例

代码示例 2

在 WEB IDE 中打开

  • JS
  • SWAN
  1. // index.js
  2.     data: {
  3.         array: [1, 3, 6, 8, 2, 0]
  4.     }
  5. });
  7. export default {
  8.     maxin: arr => {
  9.         var max = undefined;
  10.         for (var i = 0; i < arr.length; ++i) {
  11.             max = max === undefined ?
  12.             arr[i] :
  13.             (max >= arr[i] ? max : arr[i]);
  14.         }
  15.         return max;
  16.     }
  17. };

页面输出：

    Filter 的注释与 swan 模板文件的注释方式相同。
    代码示例

    • SWAN

    运算符 & 语句 & 数据类型 & 基础类库

    Q：filter 是否支持三目运算？

    A：不支持。