平安夜閑談——IScroll的趣味

01-30

首先，祝福女友考研順利。
github地址：liril-net/iscroll-es6

簡介

今天平安夜，一個人過，寫篇文章給所有一個人過的前端同仁們（情侶狗們沒空看啊），如有誤，還望指正。

最近，做手機端的頁面，由於老闆不喜歡漏出微信底部的黑邊，因此選擇使用了 IScroll 這個庫，本著探(zuo)索(si)的精神，研究了一下這個庫，並用 ES6 改寫了一下加上了注釋，從中學到了許多有趣的知識，這裡列舉幾個，更多信息可以去源代碼里查看，只有1000多行，目前只完成了 lite 的部分。

獲取當前瀏覽器支持的樣式前綴

傳統的方法是先判斷瀏覽器的類別來獲取相應前綴，這裡採用了一個比較有趣的方法。

const _elementStyle = document.createElement(div).stylenconst _vendors = [t, webkitT, MozT, msT, OT]n .map(t => `${ t }ransform`)n .filter(t => t in _elementStyle)n .map(t => t.replace(/(t|T)ransform/g, ))n

先創建一個 div 元素，然後獲取其中的 style，查看其中支持的 transform 所攜帶的前綴，從而判斷當前瀏覽器支持的樣式前綴。

操作元素類

由於部分瀏覽器可能不支持 classList，因此進行了特殊的處理，混用了正則表達式和「函數式編程」（非常淺顯）。

/**n * 判斷元素是否有某個類n * @param {Dom Element} e 要查詢的元素n * @param {String} c 要查詢的類名n * @return {Boolean} 是否包含n */n_.hasClass = (e, c) =>n (_hasClassList ?n e.classList.contains(c) :n (new RegExp(`(^|s)${ c }($|s)`))n .test(e.className)n )nn/**n * 為某個元素增加類n * @param {Dom Element} e 要增加類的元素n * @param {...String} cs 要增加的類名n */n_.addClass = (e, ...cs) =>n (_hasClassList ?n e.classList.add(...cs) :n (e.className = csn .filter(c => !!c)n .reduce((prev, cur) => (n (new RegExp(`(^|s)${ cur }($|s)`)).test(prev) ?n prev :n `${ prev }${ prev.length ? : }${ cur }`n ), e.className)n )n )nn/**n * 為某個元素刪除類n * @param {Dom Element} e 要刪除類的元素n * @param {...String} c 要刪除的類名n */n_.removeClass = (e, ...cs) =>n (_hasClassList ?n e.classList.remove(...cs) :n (e.className = en .classNamen .split(/s+/)n .filter(a => cs.indexOf(a) === -1)n .join( )n )n )n

addEventListener的特殊用法

target.addEventListener(type, listener[, useCapture]);n

平時我們都會為事件監聽的 listener 傳遞迴調函數，但是 IScroll 裡面傳遞了 this 對象，經過查閱 MDN 發現如下信息：

listener當所監聽的事件類型觸發時，會接收到一個事件通知（實現了 Event 介面的對象）對象。listener 必須是一個實現了 EventListener 介面的對象，或者是一個函數。

而這個介面要實現一個方法定義如下：

void handleEvent(in Event event);

通過這種方式，可以在綁定事件時直接傳遞對象作為其回調，這樣使得代碼更加的簡潔。