移動(dòng)前端滑動(dòng)插件——JRoll

        不知道是百度搜索的算法更新了還是什么原因，在百度上搜 jroll，搜索結(jié)果首頁看不到 JRoll 的官網(wǎng)

        也有可能是因?yàn)槲揖芙^了購買百度關(guān)鍵詞推廣，并且把百度聯(lián)盟的廣告都撤下了，什么原因不管了，

        這里提供一下官網(wǎng)地址：http://www.chjtx.com/JRoll/

—— 2018年12月05日更新

------------------------------------------- 我是分隔線，以下是原文 ----------------------------------------

        又過了一年，終于，第三篇博文要出爐了。

　　去年9月底，結(jié)束創(chuàng)業(yè)生涯后，我進(jìn)入了一家外包公司從事移動(dòng)前端工作，洽洽這年html5火到要爆，而具備html5技能的工程師卻千里難覓，雖然我一直從事PC端的工作，但憑借扎實(shí)的js基礎(chǔ)，也謀了個(gè)中級(jí)工程師的職位。多學(xué)點(diǎn)東西準(zhǔn)沒錯(cuò)的。

　　從事正規(guī)的前端工作后，我接觸到了underscore、ratchet、backbone、requirejs、seajs、cordova、angular等等一大堆前端框架工具，不禁感慨，原來我以前的圈子是那么的渺小。iscroll，相信大多數(shù)移動(dòng)前端開發(fā)者都用過，在我創(chuàng)業(yè)那段時(shí)間也接觸過，由于當(dāng)時(shí)不會(huì)用，擱置了。

　　進(jìn)入公司后，iscroll便成了不可離開的工具。html5移動(dòng)應(yīng)用為了滿足業(yè)務(wù)需求，滑動(dòng)操作也復(fù)雜起來，不再像純手機(jī)網(wǎng)站那樣一頁下來。而div的overflow:auto屬性，在移動(dòng)設(shè)備的表現(xiàn)不太理想，為了解決滑動(dòng)呆板問題，iscroll似乎成了救星。然而，iscroll并不是萬能的，當(dāng)滑動(dòng)的元素多起來時(shí)，卡頓、閃屏更為嚴(yán)重。為了控制頁面元素?cái)?shù)量，只好采用增減法，即一次只顯示三頁，顯示第四頁時(shí)，將第一頁刪除，始終在屏幕上保持三頁的數(shù)量，并將位移減去第一頁的高度，以保持第二、三頁相對屏幕的位置不變。這樣一來，iscroll性能方面的缺陷得到了一個(gè)比較有效的解決方案。同時(shí)，運(yùn)用空間換性能的方法，將加載過的頁面緩存下來，客戶體驗(yàn)也是扛扛的。但是，iscroll這就滿足了我的需求？如果真是這樣的話，就不會(huì)有這篇博文了。

　　為了尋找一個(gè)更好的滑動(dòng)插件，去年12月開始研究IScroll5，今年3月開始著手起草JRoll。我設(shè)計(jì)jroll的初衷是為解決iscroll的不足，如此一來，我必須先找出iscroll都有哪些缺陷。

　　以下是我感覺iscroll需要改進(jìn)的地方：

　　1、性能方面，300條數(shù)據(jù)就會(huì)出現(xiàn)卡頓

　　2、scrollFree參數(shù)失效。scrollFree為false時(shí)，當(dāng)左右滑動(dòng)過程中不能進(jìn)行上下滑動(dòng)，上下滑動(dòng)過程中不允許左右滑動(dòng)。IScroll5出現(xiàn)的bug是當(dāng)一開始就斜向滑動(dòng)的話，scrollFree鎖定就會(huì)失效。

　　3、文件太多，iscroll、iscroll-infinite、iscroll-lite、iscroll-probe、iscroll-zoom共五個(gè)文件。iscroll是普通版，含滾動(dòng)條。iscroll-infinite是無限循環(huán)版。iscroll-lite是精簡版，無滾動(dòng)條。iscroll-probe是加強(qiáng)版，可監(jiān)聽滑動(dòng)并添加滑動(dòng)事件。iscroll-zoom是縮放版。而且這幾個(gè)文件是不能同時(shí)使用的，否則會(huì)發(fā)生沖突。

　　4、文件太大，iscroll為了兼容pc，做了很多兼容處理，而且IScroll5里面有很多已經(jīng)被棄用的代碼并沒有刪除。

　　5、滑動(dòng)表單時(shí)光標(biāo)丟失

　　好，既然問題已經(jīng)找出來了，那么該如果解決？即便不能解決所有，也應(yīng)該做到更好。

　　一、突破性能瓶頸

　　在研究iscroll源碼的過程中，發(fā)現(xiàn)造成卡頓的主要原因是使用了css3的transition-duration實(shí)現(xiàn)慣性滑動(dòng)。眾所周之，css3動(dòng)畫對設(shè)備性能要求比較高，在大面積使用時(shí)，對GPU來說更是一項(xiàng)極艱巨的挑戰(zhàn)。iscroll做得比較好的是，對于不支持transition-duration的手機(jī)使用requestAnimationFrame來補(bǔ)救。目前安卓4.1以上都支持transition-duration，但4.1~4.3性能表現(xiàn)不佳。4.2以上支持requestAnimationFrame，對于不支持requestAnimationFrame的手機(jī)可以用setTimeout代替。安卓4.2、4.3雖然支持requestAnimationFrame，但其它性能表現(xiàn)與setTimeout無異。值得高興的是，現(xiàn)在國內(nèi)所有手機(jī)廠商基本上不再生產(chǎn)安卓4.4以下的手機(jī)。按現(xiàn)在的手機(jī)更替速度來看，一兩年后，html5開發(fā)者再也不用為兼容安卓低端機(jī)而頭疼。

　　經(jīng)過測試，使用requestAnimationFrame實(shí)現(xiàn)慣性滑動(dòng)，能滑起上萬條數(shù)據(jù)，雖然在安卓4.4以下效果會(huì)打點(diǎn)折扣，但數(shù)據(jù)多的時(shí)候比起transition-duration強(qiáng)多了，在IOS上表現(xiàn)溜溜的。還是蘋果牛逼。

　　權(quán)衡取舍，JRoll最終采用requestAnimationFrame來實(shí)現(xiàn)慣性滑動(dòng)。為了降低開發(fā)成本及個(gè)人精力有限等問題，JRoll只支持webkit和blink內(nèi)核的瀏覽器。至于其它內(nèi)核的瀏覽器，一來沒時(shí)間調(diào)試，二來窮屌絲沒錢買設(shè)備(T_T)。

　　滑動(dòng)頁面的實(shí)現(xiàn)原理是在touchmove時(shí)移動(dòng)元素的位置，那到底用absolute好還是用translate好？網(wǎng)上也有不少文章對這兩個(gè)實(shí)現(xiàn)方法的討論，當(dāng)然結(jié)論也會(huì)因系統(tǒng)環(huán)境、瀏覽器內(nèi)核等因素而異。使用absolute移動(dòng)位置，可以解決表單丟失光標(biāo)的問題，但滑動(dòng)流暢度總是那么的不盡人意。當(dāng)然在安卓4.1以下系統(tǒng)表現(xiàn)會(huì)比translate好些，那些將要被淘汰的系統(tǒng)，我們就不必深究了。使用translate可以開啟3D加速，流暢度有了質(zhì)的提升，只是在軟鍵盤彈出后滑動(dòng)頁面時(shí)，某些系統(tǒng)如ios，某些安卓瀏覽器會(huì)出現(xiàn)光標(biāo)不跟隨input輸入框的問題，但畢竟這并不影響業(yè)務(wù)流程的正常操作，況且也很少有人會(huì)在軟鍵盤彈出后去滑動(dòng)頁面，因此translate還是比absolute更勝一籌?；蛟S有些同學(xué)會(huì)問怎樣開啟3D加速，很簡單，要只用到css3任何一個(gè)3D屬性都會(huì)觸發(fā)硬件加速，例如transform:translateZ(0)。

　　二、解決scrollFree參數(shù)失效

　　剛剛又看了一下IScroll5的源碼，它的選項(xiàng)參數(shù)是freeScroll，我把free和scroll的順序搞反了，糗大了。本來還想著使用和iscroll一樣的API，避免打亂用戶習(xí)慣，現(xiàn)在JRoll已經(jīng)上線了，改回來不太好，將錯(cuò)就錯(cuò)吧。iscroll的freeScroll實(shí)現(xiàn)方法是先滑動(dòng)再判斷要鎖定哪個(gè)方向，這種做法導(dǎo)致的問題就是在斜向滑動(dòng)時(shí)判斷失效。這里，額外補(bǔ)充一個(gè)小知識(shí)，preventDefault阻止瀏覽器默認(rèn)行為這個(gè)屬性在滑動(dòng)過程中才設(shè)置是不會(huì)生效的。例如，你想在橫向滑動(dòng)時(shí)將preventDefault設(shè)為true，可以通過e.pageX和e.pageY的差值比較判斷正在進(jìn)行橫向滑動(dòng)還是豎向滑動(dòng)抑或是斜向滑動(dòng)，當(dāng)然一般很少判斷斜向滑動(dòng)，pageX的差值比pageY的差值大時(shí)都當(dāng)作是橫向滑動(dòng)。此時(shí)，如果你先豎向滑動(dòng)，滑動(dòng)已經(jīng)開始，然后再橫向滑動(dòng)，preventDefault并不會(huì)起作用。jroll修正freeScroll的方法是先判斷要鎖定哪個(gè)方向再執(zhí)行滑動(dòng)。簡單點(diǎn)說，就是touchmove的第一個(gè)移動(dòng)位置不會(huì)使頁面滑動(dòng)，而是用于判斷將要進(jìn)行的方向，第二個(gè)移動(dòng)位置才開始滑動(dòng)頁面。

　　三、去繁從簡

　　iscroll將各項(xiàng)功能都拆分成單個(gè)文件，每個(gè)文件又不能一起使用，在一個(gè)項(xiàng)目既用到zoom又用到probe的話確實(shí)很讓人頭疼。jroll使用一個(gè)文件實(shí)現(xiàn)了滾動(dòng)條、縮放、事件監(jiān)聽等功能，開發(fā)者可不必再為到底使用哪個(gè)文件而手足無措。至于無限循環(huán)這個(gè)功能，將會(huì)做成jroll的插件。同時(shí)，基于jroll滑動(dòng)的插件，如日期控件、日歷控件、分頁等等鄙人也在謀劃中，完成之后，html5開發(fā)的應(yīng)用可不必使用input[type=date]來調(diào)用原生日期組件，直接調(diào)用jroll的日期插件可做到所有移動(dòng)終端對于日期控件這塊體驗(yàn)一致，敬請期待。

　　四、專注移動(dòng)

　　iscroll為了兼容各種終端，而且升級(jí)后廢棄的代碼也沒有刪除，因此文件越來越龐大，這并不利用移動(dòng)應(yīng)用的開發(fā)。jroll一個(gè)嶄新的產(chǎn)品，沒有歷史遺留問題，而且專注于移動(dòng)應(yīng)用開發(fā)，代碼相當(dāng)精簡，源文件24k，經(jīng)過UglifyJS壓縮后才12k。當(dāng)然也使用了mousemove、mousewheel等兼容谷歌瀏覽器非移動(dòng)模擬器模式，這也是為了方便開發(fā)調(diào)試，占用的代碼量很少。jroll沒有像iscroll那樣在touchstart時(shí)preventDefault，因此不需要click:true來允許點(diǎn)擊a鏈接。jroll在安卓方面做了自動(dòng)定位表單的優(yōu)化，即是點(diǎn)擊input時(shí)可自動(dòng)將input定位到可見位置不會(huì)被軟鍵盤遮擋，ios會(huì)自動(dòng)定位不需要我們多此一舉去優(yōu)化。

　　好了，說了這么多，讓大家一起來領(lǐng)略一下jroll。

　　jroll有五種引入方式：普通引入、CommonJS規(guī)范引入、RequireJS規(guī)范引入、SeaJS規(guī)范引入和強(qiáng)制普通方式引入。

　　使用時(shí)也是像iscroll那樣new一個(gè)。jroll = new JRoll("#wrapper", {bounce:true, zoom:true, ...})。

　　可選項(xiàng)一覽表：

　　兩個(gè)常用方法：refresh和scrollTo。

　　能看到這里，說明你很有毅力，若要更詳細(xì)的了解jroll，可訪問JRoll，現(xiàn)已開源到oschina，源碼地址：https://git.oschina.net/chenjianlong/JRoll

　　ps：一眨眼一年過去了，去年給客戶做的作品現(xiàn)在已經(jīng)訪問不到了，唉，有時(shí)不得不感慨，現(xiàn)在的人腫么都那么浮躁，說好要做品牌的，結(jié)果才一年，客戶就把網(wǎng)站關(guān)掉了。不過請大家放心，jroll是放在我自己的服務(wù)器上的，絕對不會(huì)那么輕易閉站。只是窮屌絲只買得起阿里云550元每年的產(chǎn)品，訪問量多了可能會(huì)擠爆，沒關(guān)系，還可以到開源中國去下載源碼或在51cto本博客留言問我拿。