記錄一下 列表

一 抽象 列表的本質與使命

抽象出本質，就是組合篩選條件，展現相應條件下的數據，而後根據這些數據參數，確保點擊跳轉能跳到相應位置。

二 這一版列表解決什麼問題

1 拆開本來篩選條件大接口

這個 大大大接口 中，包含所有的品牌，以及每一個品牌的全部型號，加上每一個型號的容量和顏色信息。爲何說這個接口大，看右側滾動條的大小就知道了，而且在window7系統，在線json格式化工具，有可能會卡死瀏覽器。這已經很可怕了，更可怕的是，居然在代碼中，對這個大大的數據，進行反覆操做，有讀取也有有增長keyvalue，可怕+1。

修改後，一個大接口變爲3個靈活小接口

獲取品牌接口

獲取當前品牌的型號接口

獲取型號的參數接口

分別是返回全部品牌、當前品牌的型號、當前型號的容量和顏色，解決以前一個性能優化的瓶頸點。

2 融合三條業務線的獨立列表

如 1自營獨有成色、2已驗機獨有特點標籤、3鎖定品牌的列表，又不限制轉轉服務

3 代碼直觀易懂

1. 組件沒有過多的拆分
2. 摒棄mixin的使用（原使用方式，每一個組件都有引用mixin，甚至無用方法在被頻繁調用）
3. 代碼自己沒有過多騷氣操做，並加了不少註釋，再配合這個文檔食用，確定很容易懂的~

三 列表自己擁有的能力

1 即插即用

把我這個文件夾複製過去，就能夠用了。 其實還想後續弄成npm發佈的組件，甚至還想開源。

2 可以鎖定渠道 品牌

如上圖在官方自營的tab下面，轉轉服務是不容許取消勾選的

3 支持url配置 命中

如url後面加 filter=5462:2101002;5463:2101002635 ，則最開始會命中 華爲 p20，支持品牌，型號。

4 側滑篩選條件彈起時，在阻止掉後面內容滾動同時，記錄以前滾動位置，加強體驗

5 頂部tab切換，可緩存不一樣渠道的篩選條件，以及在此條件下的請求數據

四 頁面組成

五 vuex數據介紹 與 篩選核心思想

業務數據介紹，篩選的key們

實現篩選

六 邏輯點拆分

1 數據初始化

1 app.vue 中 註冊list組件的局部store

註冊後，列表自己的store就在全局的store的list下，以下圖

2 拿到前置條件，進行初始化

前置條件指的是渠道id 和 url連接中配置的filter，組件init方法，在兩種狀況下會調用

第一種 mounted 週期中，這時候init中參數 會有一個keyValue。

第二種 全局store 中的 chanelId改變的時候，這時候參數沒有那個keyValue。

這個keyValue做用是，命中url參數中的配置字符串。因此只有在第一次init，也就是mounted中才有用。

3 初始化方法

初始化作了如下幾件事

1. 根據渠道 獲取篩選信息，不一樣渠道的快篩條是配置不一樣的，並把篩選信息初始化
2. 根據渠道id 強制改變selectedFilterGraph，這裏的強制改變，和後文的勾選是有連帶協同做用的。爲了實現鎖定的效果，在勾選的時候，好比勾選‘官方自營’，是不容許被切換的，此時就根據 全局的chanelId來作判斷，若是全局的chanelID是5464，那麼會禁掉5464的篩選項的勾選，因此！！！初始化的時候，要根據chanelId來初始化selectedFilterGraph。
3. 配置的快篩條，由於不一樣渠道快篩信息不同，這個比較直線邏輯
4. 清空重置一些 如瀑布流數據 當前品牌的型號 當前型號的容量參數 ，這個也很容易理解
5. 把url配置的命中參數，匹配到selectedFilterGraph中

2 觸發篩選

1. 每個篩選項都是獨一無二的，擁有一份key value
2. 若是已經被認定是選中了，那就走取消選中的邏輯
3. 若是沒有選中，看這一組key，是否能夠多選，不是的話，替換選中的value，能夠多選的話，添加要選中的value
4. 選中的都會被維護在 selectedFilterGraph 中，見下圖

3 蒙層彈起後，禁止後面滾動，並能固定在，蒙層彈起前一刻的位置

如下兩個圖說明原理

4 緩存

1. sotre.list 存的是什麼？

2. 有全部的用來篩選的原始數據，有選中的那個graph對象，也有當前篩選狀態下的瀑布流數據。 3. 那麼，其實能夠理解，我提供了一個列表架子，內部的數據，在這個store.list中，只要換了這個list，這個架子就會展示不一樣的數據，而且功能無缺。 4. 配合全局的store，實現緩存