百度智能小程序 Filter過濾器

推薦使用功能更全的 SJS 功能。Filter 功能將不再更新，請勿在s-if、s-for、template、自定義組件等標簽中使用。Filter 是小程序的過濾器，結(jié)合 SWAN 模板，可以構(gòu)建出頁面的結(jié)構(gòu)。

說明

• Filter 文件命名方式為：模塊名 .filter.js ；
• Filter 通過 export default 方式對外暴露其內(nèi)部的私有函數(shù)；
• Filter 只能導(dǎo)出 function 函數(shù)；
• Filter 函數(shù)不能作為組件的事件回調(diào)；
• Filter 可以創(chuàng)建獨立得模塊，也可以通過內(nèi)聯(lián)的形式；
• Filter 不支持全局變量；
• 多個 filter 標簽不能出現(xiàn)相同的 src 屬性值， module 屬性的值也是標識模塊的唯一 id 。

Filter 模塊

filter 代碼有兩種編寫方式：

• 可以編寫在 swan 文件中的<filter></filter>標簽內(nèi)，直接在該 swan 文件中通過module.fn的形式進行方法調(diào)用，例如代碼示例 1；
• 可以編寫在以 .filter.js 為后綴名的文件內(nèi)，在其它 swan 文件中通過filter標簽的 src 進行引入，例如代碼示例 2。
  每一個 .filter.js 文件和<filter></filter>標簽都是一個單獨的模塊。每個模塊都有自己獨立的作用域。即在一個模塊里面定義的變量與函數(shù)，默認為私有的，對其他模塊不可見。

filter 標簽

標簽可以是雙閉合 <filter></filter> 或者單閉合 <filter/>，帶有 src 屬性的標簽，過濾器代碼要寫到相應(yīng)的文件里，不帶有 src 屬性的標簽，過濾器代碼寫在標簽內(nèi)。

filter 邏輯代碼

filter 邏輯代碼使用export default的形式導(dǎo)出封裝的一系列方法。代碼示例

export default {
    Foo: () => {
        return 'swan-foo-filter';
    },
    Bar: () => {
        return 'swan-bar-filter';
    }
}

filter 內(nèi)聯(lián)渲染

代碼示例 1

<!-- swan -->
<view> {{swan.message()}} </view>
<filter module="swan">
    export default {
        message: function() {
            return 'Hello world';
        }
    }
</filter>

頁面輸出：

Hello world

數(shù)據(jù)處理示例

代碼示例 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> -->

運算符 & 語句 & 數(shù)據(jù)類型 & 基礎(chǔ)類庫

Filter 支持 javascript 所有運算符、語句、數(shù)據(jù)類型和基礎(chǔ)類庫。

常見問題

Q：filter 是否支持三目運算

A：不支持。