設計和編寫一個異步通用Picker選擇器，用於時間日期、城市、商品分類的選擇

時間 2019-11-07

標籤設計編寫一個異步通用 picker 選擇器用於時間日期城市商品分類選擇简体版

原文原文鏈接

回到本初，看到多年前寫的一段移動端App內嵌入的H5兼容處理代碼，有段專門兼容處理輸入框類型的代碼：javascript

針對Android 5.0.1,5.0.2 time類型的輸入框通通改爲text類型（當年的記憶猶新：這兩個版本有些手機上的彈框竟然只有重置和取消兩個按鈕，被客戶叼了一頓）;

不論是IOS仍是Android，datetime,datetime-local通通使用text類型，手輸比默認的彈框選擇器高效多了。

而後前些天在Android 9.0爪機上試了一下webview默認的時間日期選擇，仍是當年的 傻大黑粗 不曾改變，故事就這樣開始了......html

[TOC]java

在Android App裏面嵌入了webview作不可描述的事情，由於網頁裏面的默認原生時間選擇器長的太醜，而且兼容的不肯定性太多，正好分類性質（商品分類、省市區這種存在上下級關係）的彈出組件太醜想要升級一下，因而就開始着手寫設計和編寫一個通用的選擇器。git

功能圖：github

最後花了3天多時間打磨，終於大功告成，手機上使用一下，被驚豔到了٩(๑❛ᴗ❛๑)۶web

最終實現效果：後端

本文主要起到記錄和參考做用，不論是用在H5移動端的設計、仍是Android、IOS的界面設計，包括裏面交互的設計，都是有意義的；但並無開源的打算(和本身的庫結合得太緊，剝不出來，本身的庫又依賴了swiper4)，點此體驗>> 緩存

1、功能規劃

事先並無畫圖，只是腦子裏面過了一遍，上面的功能圖是過後畫的。bash

必須支持異步，由於異步能夠當同步使用，同步只能同步到死；比較大的分類數據用異步加載食用效果更好；時間日期這種，雖然是異步調用，但數據是當即返回的，因此本質上仍是同步的。
支持默認值的異步初始化，給個默認值，異步下無論幾級分類都能選中這個默認值。
彈框界面須要有個清空按鈕，至關於把輸入框的內容刪除，但當用戶進行了選擇動做時，這個按鈕改爲返回（觀摩了不少Android、H5的Picker，無一例外沒有帶這種功能，只有返回，但我以爲是很是重要的）；
點擊空白區域返回；
彈框界面每列需支持標頭（表頭？），每列都能定義本身的名字或便於識別的標誌；
美觀、用戶操做上符合主流的操做方式。

2、最底層基礎實現

（1）Picker界面和功能實現

這是最底層部分，只定義數據格式和展現風格，具體數據由使用者經過異步回調提供。服務器

只負責：

√ 定義接收數據的格式和接收數據;
√ 彈出界面和更新界面;
√ 用戶交互;

無論：

× 數據是什麼;
× 數據有多少;
× 數據分多少級，1 - ∞都是能夠的，只要顯示的下;
× 數據的有效性（包括是否容許子級缺失）;
× 更細的顯示外觀、控制。

所以能夠定義爲（摘錄的一部分註釋和僞代碼僅供參考，下同）：

Picker=func(set,onChange,onCancel){...}

其中最爲核心的設置參考：
set={
    value:any //初始值。注意：null爲特殊值，表明沒有任何選擇，其餘類型的空值應該轉換成這個標準空值，好比0須要轉換成null
    ,title:"標題" //固然能夠是手寫的html，自定義樣式
    
    ,columns:[ //定義選擇列，限定了選擇層級數量
        {
            name:"列名稱"
            ,weight:1 //列寬度權重
            ,... //更多列風格配置
        }
        ,...
    ]
    
    ,load:func //加載指定選項的子級列表數據
        /*load(vals,onLoad,onError) vals=[level0,level1,....levelx] 當數據成功加載時使用者須要回調onLoad(childs)，此處定義了數據的格式... 出錯回調onError(msg)，包括數據無效時也是此回調 */
    ,resolve:func //對初始值value進行反向解析出全部上級，若是初始值value=null空值時不會進行解析調用
        /*resolve(value,onLoad,onError) onLoad(vals) 反向解析出來的層級列表[level0,level1,...,value] onError(msg) */
}
複製代碼

界面實現上參考大部分開源的選擇器樣式，挑個美觀的照着畫和配色就ok啦；最後總結出來一個比較好使用的界面：選擇器顯示7行候選項，每行45px，在觀看和操做上都是比較優良的；上面的gif由於要截圖因此設定了5行；還要留意一下滾動選項時若是滾動組件沒有回調，咱們能夠經過監控選中位置變化來強制刷新界面，swiper偶爾動快了會丟失回調，還好處理手段蠻多。

最大的挑戰仍是應對複雜多變的配置項和組合邏輯，如何應用到界面裏面，不過我有100行不到的過氣html模板解析引擎，反正隨意到沒朋友，再複雜的界面也應對自如，寫完這個選擇器還特意更新了一下文檔，前往GitHub BuildHTML圍觀。

（2）不一樣類型的選擇器基礎實現

Picker已經搞定啦，但針對不一樣的數據源，咱們仍是要封裝一下，否則每一個類型的選擇器直接調用Picker那會太複雜了，好比：時間、日期的操做能夠共享不少相同代碼，異步類型的load、和resolve數據請求部分能夠進行一次封裝。

所以就分紅了3部分：

時間日期類，這部分分爲Time、Date、DateTime，他們有部分邏輯可用共用，好比時間的計算，但界面上是不一樣的，此處不進行分解，放到後面的數據源部分進行分解;
同步類 Type Sync，此種類型數據是已所有提早準備好，不存在load、resolve複雜異步操做；雖然同種具體類型的界面和異步的徹底同樣，但仍是要單獨分開爲一類。
異步類 Type Async，封裝好load、resolve這些低級繁重操做給上層具體類型使用。

同步類、異步類兩個方法定義爲：

PickerType=func(set,onChange,onCancel)

其中最爲核心的設置參考：
set={
    value:123 //默認值
    ,title:"請選擇"
    ,data:{} //必填，完整的類型數據，具體數據格式在這裏統必定義，會自動轉成Picker須要的格式
    
    ,allowLose:false //是否容許有的選項沒有下一級，固然不容許啦，若是缺失了下級，`load`的時候會直接走錯誤回調
    
    ,columns:[] //必填，爲Picker.columns選項
    
    ,picker:{} //picker配置，columns、title不用在這裏寫
    
    ,itemFormat:func //對選項進行格式化，好比選項名稱特殊處理一下
    ,itemsSort:func //對選項列表進行排序
}
複製代碼

PickerTypeAsync=func(set,onChange,onCancel)

其中最爲核心的設置參考：
set={
    extend PickerType.set +* -data
    //和PickerType的基本相同，只是沒有data數據而已，增長下面兩個
    
    type:"load 要加載的數據類型" //load、resolve應該調用後端統一的一個接口，經過type參數控制加載具體類型的數據
    ,hotData:[] //可選熱啓動數據，好比前幾級的完整數據比較小能夠預先加載
}

另外此函數應該對load、resolve獲取到的數據進行緩存，避免每滑動一下就請求服務器
複製代碼

3、數據源層

（1）時間日期

Time、Date、DateTime選擇器除了界面不同外，數據基本類似：

均可以限定大小區間;
DateTime的計算就包括了Time、Date兩個的實現;

能夠抽象出兩個方法搞定這個3個具體類型的數據生成： （1）經過[年、月]提供0-2個上級，就能生成年、月、日3個級別的列表數據：

/*生成日期部分的js完整代碼 set提供大小範圍的Date實例 vals爲年、月取值 vals=[] 生成年份列表 vals=[2010] 生成2010年的月份列表 vals=[2010,2] 生成2010年2月的天數列表 如genDate({min:new Date("2012-01-01"),max:new Date("2012-02-06")},[2012,2]) 固然set是在初始化時就準備好的，不可能這樣寫 */
function genDate(set,vals){
    var min=set.min;
    var max=set.max;
    
    var a,b;
    var minY=min.getFullYear(),maxY=max.getFullYear();
    var minM=min.getMonth()+1,maxM=max.getMonth()+1;
    var y=vals[0],m=vals[1];
    var fixed=-2;
    if(vals.length==0){
        a=minY;
        b=maxY;
        fixed=-4;
    }else if(vals.length==1){
        a=y==minY?minM:1;
        b=y==maxY?maxM:12;
    }else{
        a=y==minY&&m==minM?min.getDate():1;
        if(y==maxY&&m==maxM){
            b=max.getDate();
        }else{
            if("|1|3|5|7|8|10|12|".indexOf("|"+m+"|")+1){
                b=31;
            }else if(m==2){
                if(y % 4 == 0 && y % 100 != 0 || y % 400 === 0){
                    b=29;
                }else{
                    b=28;
                };
            }else{
                b=30;
            };
        };
    };
    
    var rtv=[];
    for(var i=a;i<=b;i++){
        rtv.push({
            text:("0"+i).substr(fixed)
            ,value:i
        });
    };
    return rtv;
};
複製代碼

（2）經過[時]或[年、月、日、時]提供0-1個(Time) 或3-4個(DateTime)上級，就能生成時、分2個級別的列表數據：

/*生成時間部分的js完整代碼 set提供大小範圍的日期或時間數字 vals爲年、月、日、時取值，前3個在DateTime類型時纔有，否則就是Time類型 vals=[] 生成小時列表 vals=[22] 生成分鐘列表 如Time類：genTime({min:10*60+56,max:21*60+3},[21]) 如DateTime類：genTime({min:new Date("2012-01-01 10:56"),max:new Date("2012-02-06 21:03")},[2012,2,6,21]) */
function genTime(set,vals){
    var min=set.min;
    var max=set.max;
    var h=vals[0];
    if(vals.length>2){//DateTime
        var y=vals[0],m=vals[1],d=vals[2];
        if(y==min.getFullYear()&&m==min.getMonth()+1&&d==min.getDate()){
            min=min.getHours()*60+min.getMinutes();
        }else{
            min=0;
        };
        if(y==max.getFullYear()&&m==max.getMonth()+1&&d==max.getDate()){
            max=max.getHours()*60+max.getMinutes();
        }else{
            max=23*60+59;
        };
        h=vals[3];
    };
    
    var a,b;
    var minH=Math.floor(min/60),maxH=Math.floor(max/60);
    if(h==null){
        a=minH;
        b=maxH;
    }else{
        a=h==minH?min%60:0;
        b=h==maxH?max%60:59;
    };
    
    var rtv=[];
    for(var i=a;i<=b;i++){
        rtv.push({
            text:("0"+i).substr(-2)
            ,value:i
        });
    };
    return rtv;
};
複製代碼

有了這兩個方法，咱們就能夠寫着3個類型的具體實現啦：

PickerTime=func(set,onChange,onCancel)
PickerDate=func(set,onChange,onCancel)
PickerDateTime=func(set,onChange,onCancel)

3個最爲核心的設置都基本相似：
set={
    min:123 ||"00:00" //最小時間
    max:123 ||"23:59" //最大時間
    value:123 ||"10:01" //設定時間，若是爲null爲當前時間部分
    
    title:"選擇時間"
    picker:{} //Picker更多配置項
}


各種型內部調用Picker時load寫法
PickerTime
load:function(vals,onLoad,onError){
    onLoad(genTime(set,vals));
}

PickerDate
    onLoad(genDate(set,vals));
    
PickerDateTime
    onLoad(vals.length>2?genTime(set,vals):genDate(set,vals));
複製代碼