讀vue-0.6-filters.js源碼 - pssp－IT工程師數位筆記本

文章出處

'abc' => 'Abc'

function capitalize (value) {
    if (!value && value !== 0) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
}

一開始在想作者為什么不直接if(value)，后來發現如果這樣寫的話0就會被返回空字符串了，看到下面這么一句

'abc' => 'ABC'

uppercase: function (value) {
        return (value || value === 0)
            ? value.toString().toUpperCase()
            : ''
}

這個是用來將所有字母轉換成大寫的，很明顯這句比上面一句更加簡潔，那么作者為什么不用第二種寫法來實現第一種呢？我覺得主要還是因為第一種不太適合使用三元表達式。

function capitalize(value) {
    return value || value === 0 ? (value = value.toString()).charAt(0).toUpperCase() + value.slice(1) : '';
}

雖然說以上代碼確實簡潔了許多，但是不太直觀，尤其是代碼中的value.slice(1)這一句，而這個value此時已經變成了字符串，三元表達式對于需要賦值或代碼比較長的情況下就不太合適了，很快驗證了我的這種猜測是對的，再看下面這段代碼

12345 => $12,345.00

currency: function (value, args) {
        if (!value && value !== 0) return ''
        var sign = (args && args[0]) || '$',
            s = Math.floor(value).toString(),
            i = s.length % 3,
            h = i > 0 ? (s.slice(0, i) + (s.length > 3 ? ',' : '')) : '',
            f = '.' + value.toFixed(2).slice(-2)
        return sign + h + s.slice(i).replace(/(\d{3})(?=\d)/g, '$1,') + f
}

可以看到作者又用了第一種寫法，那么作者為什么用的是第一種寫法而不是第二種value || value === 0呢，原因就在于這段代碼中的邏輯判斷比較多，如果使用第二種那么代碼就會是類似下面這樣的

function currency (value, args) {
            if (value || value === 0){
                var sign = (args && args[0]) || '$',
                s = Math.floor(value).toString(),
                i = s.length % 3,
                h = i > 0 ? (s.slice(0, i) + (s.length > 3 ? ',' : '')) : '',
                f = '.' + value.toFixed(2).slice(-2)
            return sign + h + s.slice(i).replace(/(\d{3})(?=\d)/g, '$1,') + f
            }
            return "";
        }

而估計作者是希望將簡單的邏輯先搞定，再寫復雜的邏輯，菜鳥和大牛的差距往往也在這，什么時候該用什么，什么時候不該用什么，而不是死機硬背一些所謂的最佳實踐。

來看看這段代碼是做啥的吧

function currency(value, args) {
            if (!value && value !== 0) return ''
            var sign = (args && args[0]) || '$',
                s = Math.floor(value).toString(),
                i = s.length % 3,
                h = i > 0 ? (s.slice(0, i) + (s.length > 3 ? ',' : '')) : '',
                f = '.' + value.toFixed(2).slice(-2)
            return sign + h + s.slice(i).replace(/(\d{3})(?=\d)/g, '$1,') + f
        }

一開始想不明白作者為什么判斷了args還要判斷args[0]，還以為是個數組，但實驗了幾次發現這樣做是有原因的，如果第二個參數錯誤的傳了一個數字，如果不加args[0]，那么開始位置就是這個數字了，很顯然這是錯誤的，而取args[0]只有是字符串或者數組的情況下才有用，這樣說來如果我傳的是一個數組這個代碼也是有問題的，另外一點就是如果傳的是多個字符串只會取第1個。

作者的整體思路是將數字拆成3部分，先將小數點過濾,第一部分就是那個顯示符$，第二部分求余數%3，第三部分將不是余數的每3個值后面加,號，第4部分取通過toFixed轉換后的后兩位，最后把它們想加。

找復數

function pluralize(value, args) {
            return args.length > 1
            // 如果args的長度大于1，則查找value所對應的值，從1開始，如果找不到返回數組最后一個值，如果args的長度小于1并且找不到則返回數組第0個加上s。
                ? (args[value - 1] || args[args.length - 1])
                : (args[value - 1] || args[0] + 's')
}

如果只有一個參數，復數形式只是簡單地在末尾添加一個 “s”。如果有多個參數，參數被當作一個字符串數組，對應一個、兩個、三個…復數詞。如果值的個數多于參數的個數，多出的使用最后一個參數。

按鍵過濾器

var keyCodes = {
            enter    : 13,
            tab      : 9,
            'delete' : 46,
            up       : 38,
            left     : 37,
            right    : 39,
            down     : 40,
            esc      : 27
        };
        function key(handler, args) {
            if (!handler) return
            var code = keyCodes[args[0]]
            if (!code) {
                code = parseInt(args[0])
            }
            return function (e) {
                if (e.keyCode === code) {
                    handler.call(this, e)
                }
            }
        }

當args在keyCodes對象中，則獲取keyCodes中的code值，如果不在其中則將args值轉成10進制（用戶可能傳遞的是其他進制），賦給code，當code值與keyCode一樣時，再執行相應的函數。

文章列表