Skip to content

Time picker key suggestion

前陣子遇到 UI 上有要求做個 Time picker 有以下要求:

這個要求要處理很多特殊 cases,如:

  • 2 –> 可以是 23:50 或 2:59 –> 可按 0-5
  • 15 –> 可以是 1:39 或 13:59 –> 可按 0-9
  • 16 –> 可以是 16:59 –> 可按 0-5

如果再加可設定最大最小就更麻煩。

起初的想法是先用 regexp 先對好時間格式,然後才處理可按甚麼的問題。@angusdev 做的這個 sample 就用這個方法,不過就未有最大最小的限制。

我想不到很好的寫法,就讓 unit test 去 drive,寫 jasmine test case:

var testData = [
    {input:'', min:'', max:'', expect:[0,9]},
    //...
];
testData.forEach(function(d){
    it("should expect time input:"+d.input+
         " min:"+d.min+" max:"+d.max+
         " to have "+d.expect.toString()+"", 
    function(){
        expect($scope.expectTimeKeys(d.input, d.min, d.max))
            .toEqual(d.expect);
    });
});

(我在用 angular 所以見到 $scope, 不過沒差啦..)

在一路加入 test case 的情況下,我漸漸寫出了一些類似計算數字進位的東西,有點像樣了 (見這plunker)。可是到了後期,越加 test case 卻變得越難改動,程式有點彊化。

我想像到日後如果發現有 bug 我可能很難才找到問題所在,所以決定砍掉重練好了。新的想法是先用暴力發窮舉所有可能性,再在當中 filter 好了。因為已發展了一堆 test case 出來,就整個 test case 抄出來,重新寫過。結果是這個 plunker。用暴力法的好處是比較易明,但會有效能考慮,我自己測試下在當代 browser 強勁的 js 執行力下,其實也足夠快了。

當中教訓是:TDD 未必能給你摸到最好的答案,但它給你改變心意的機會。

2048 元素版

貪得意弄了個元素版的2048,稱之為《Fusion》,其實只是改了 tile 出甚麼字和變成 5×5,預設頭 20 個元素,可我也其實只是玩到 Mg。...

DIY two-way binding in AngularJs

AngularJs provides a convenient two way bindings to wire up your model and view. But somet...

我們需要《Robocop》嗎?

看新《Robocop》的時候,感覺還算不錯,至少我覺得電影有心想將這經典,重新地夾入這個時代背景,不過問題是能否夾得入,問題是:在這個近未來(設定為2028年),我們為什麼需要 R...

十年

又是看到棧主寫十週年才醒起這裏也就十年了。我自己是不會記著確寫那一天是首個發文的,大概是模糊記得一月至二月左右,所以發週年文也都通常會很遲。 其實上一年寫的文章數量算不錯,當年不及...

2013 個人電影記錄

一年一次整理: Jan: 一代宗師 Cloud Atlas (雲圖) 人再囧途之泰囧 Side By side (奇洛李維斯給電影的情書) Feb: Lincoln (林肯) Ap...

《傾城》對號入座的樂趣

最近才讀陳生的《傾城》,其實之前也有讀《大豐收》,不過沒有寫甚麼。自己不是推理迷,所以大概只能以一般讀者角度去看。我自己感覺讀《傾城》比《大豐收》更暢順,故事格局也較完整,人物也豐...

HKTVSAC

又抽水寫 Stand Alone Complex1,難道可以成為系列? HKTV 不獲發牌引起引發大家上街圍政總,然而當晚就有人反對「左膠」騎劫議題,呂煙這篇《零碎式共鳴社運的到來...

Old Archives