1. 是否該廢棄iscroll？

我得出的結(jié)論是，是該廢棄了。那當(dāng)時(shí)為什么要用iscroll？

原因有三個(gè)：

1. 因?yàn)閯e人也用了。

2. 為了iPhone上頁面滑動(dòng)更順暢。

3. 為了用上拉、下拉刷新。

關(guān)于這三個(gè)原因有幾點(diǎn)觀點(diǎn)：

1.?人最容易跟風(fēng)，編程也是。當(dāng)別人用了的時(shí)候，會(huì)認(rèn)為我自己也要用，而不清楚為什么要用，本質(zhì)為了解決什么。

2.?Android上不用iscroll時(shí)，頁面拖動(dòng)效果是可以的。

? ??iPhone上不用iscroll時(shí)，頁面拖動(dòng)效果確實(shí)有問題。但是！在滑動(dòng)塊加上-webkit-overflow-scrolling:touch;? 效果非常好！！

? ? 所以別用iPhone做借口去使用。

3. 本質(zhì)上，上下拉刷新跟iscroll沒什么關(guān)系，只是借iscroll間接實(shí)現(xiàn)。所以如果作為框架的開發(fā)者，就別使用iscroll，可以減少26.1KB（壓縮版）js庫。如果是普通開發(fā)者想偷懶，那就看著用。

Finally：

iscroll該廢棄用，明確為什么想用很重要。

2. 效果設(shè)計(jì)圖以什么為準(zhǔn)？

我不是做效果設(shè)計(jì)圖的，但是對設(shè)計(jì)圖有點(diǎn)想法。很多框架是以iPhone原生效果做的，這樣控件效果、頁面風(fēng)格就跟iPhone一樣（Android上也是）；也有人會(huì)有自己一套設(shè)計(jì)圖風(fēng)格，既不是Android原生也不是iPhone原生效果。

Finally：

各自應(yīng)用該有怎么的設(shè)計(jì)圖，像什么沒什么好說的。但對于做框架來說，我覺得偏向原生效果總歸是好的。

——自己設(shè)計(jì)的那一套真的比原生還好嗎？

3. Android動(dòng)畫效果（頁面切換），效果不是很好，特別是Android4.3、4.4？

在iPhone上，由于分配給瀏覽器的內(nèi)存多，動(dòng)畫效果是不錯(cuò)的，無論是CSS3還是js控制的。但在Android上，即便是加上GPU加速，可是效果還是不好，特別是Android4.3、4.4，動(dòng)畫還是存在卡頓情況。

有人說把下面：

@-webkit-keyframes slideLeftIn {0% { -webkit-transform: translate3d(100%,0,0)}100% { -webkit-transform: translate3d(0,0,0)} } @-webkit-keyframes slideLeftOut {0% { -webkit-transform: translate3d(0,0,0)}100% { -webkit-transform: translate3d(-100%,0,0)} } @-webkit-keyframes slideRightIn {0% { -webkit-transform: translate3d(-100%,0,0)}100% { -webkit-transform: translate3d(0%,0,0) } } @-webkit-keyframes slideRightOut {0% { -webkit-transform: translate3d(0%,0,0)}100% { -webkit-transform: translate3d(100%,0,0)} }

改成：

@-webkit-keyframes slideLeftIn {0% { -webkit-transform: translate3d(100%,0,0)}100% { -webkit-transform:none; } } @-webkit-keyframes slideLeftOut {0% { -webkit-transform:none; }100% { -webkit-transform: translate3d(-100%,0,0)} } @-webkit-keyframes slideRightIn {0% { -webkit-transform: translate3d(-100%,0,0)}100% { -webkit-transform:none; } } @-webkit-keyframes slideRightOut {0% { -webkit-transform:none; }100% { -webkit-transform: translate3d(100%,0,0)} }

這樣可以加速。但是經(jīng)過實(shí)踐檢驗(yàn)，根本沒什么用，頁面卡頓的還是卡頓。

Finally：

既然現(xiàn)實(shí)已經(jīng)如此，那么我們能做的是：

1. 避免使用大片區(qū)域的動(dòng)畫效果（特別是單頁頁面切換）。

2. 不使用單頁。

4. 是否不該用單頁？

單頁的壞處：

1. 增加了開發(fā)人員的開發(fā)復(fù)雜度，是頁面DOM變得過于復(fù)雜。

2. 存在無法釋放的內(nèi)存（可能是框架本身，或開發(fā)者自己弄出來的）。

3. 單頁的頁面切換效果在Android自帶瀏覽器效果不好。

4. 頁面路由問題，當(dāng)想直接打開某個(gè)子頁，必須經(jīng)過主頁，然后跳轉(zhuǎn)到子頁。存在兩層加載中問題。

Finally：

也鑒于在單頁中這些痛苦問題，無聊是移動(dòng)Web，還是Hybrid應(yīng)用，我覺得都不要使用單頁。

5. 對于zepto，是否換回jquery？

zepto和jquery的現(xiàn)狀：

1.zepto很久沒更新了，而jquery在持續(xù)發(fā)展。

2.jquery畢竟是大眾使用的，群眾基礎(chǔ)多。

3.很多控件是以jquery為基礎(chǔ)，可能無法轉(zhuǎn)換用zepto。

Finally：

zepto作為一個(gè)jquery的縮減版，目的是想在移動(dòng)Web的基礎(chǔ)庫上有更小的體積。而我在想，真的需要為了減少這么幾十kb的大小去使用zepto嗎？zepto（54.78KB，包含觸摸事件部分），jquery 1.7（91.6KB），這兩個(gè)數(shù)字都是壓縮版的。

對于Hybrid 應(yīng)用來說，這幾十KB的問題根本不是問題，都是本地資源，加載速度可以忽略不計(jì)。

對于移動(dòng)Web應(yīng)用來說，jquery可以使用壓縮版和緩存做優(yōu)化。

所以我覺得，真心使用jquery就可以了。有種有趣的現(xiàn)象，就是有人為了引用某個(gè)控件（基于jquery），就同時(shí)引入zepto和jquery，這反而增加了資源體積。

6.tap事件？

這是zepto里面根據(jù)幾個(gè)觸摸事件模擬出來的事件，為了提高點(diǎn)擊事件觸發(fā)的速度，但是存在經(jīng)典的“穿透”問題。所以如果只是為了提速，或者廢棄使用zepto，完全可以使用fastclick，提高響應(yīng)速度。

Finally：

回歸本質(zhì)，使用click，在click基礎(chǔ)上使用fastclick。

7.字體圖標(biāo)多少為好？

字體圖標(biāo)使用的本質(zhì)是為了圖標(biāo)在不同設(shè)備不失真、可以變顏色等字體能設(shè)置屬性。絕不是為了這樣做更酷，看起來頁面沒有引用一張圖片。

那字體圖標(biāo)內(nèi)置多少個(gè)為好，我認(rèn)為是盡量少，左右上下等圖標(biāo)，大概10個(gè)左右。字體圖標(biāo)越少，體積越小；其他使用圖片還可以利用到緩存。

Finally：

不要一股腦加了幾百個(gè)字體圖標(biāo)作為內(nèi)置圖標(biāo)， 雖然使用上簡單了，但是有很多冗余。

?

總結(jié)

這幾個(gè)問題是在公司框架重構(gòu)想起的，感觸最深的問題。

?

本文為原創(chuàng)文章，轉(zhuǎn)載請保留原出處，方便溯源，如有錯(cuò)誤地方，謝謝指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/5478116.html

轉(zhuǎn)載于:https://www.cnblogs.com/lovesong/p/5478116.html

總結(jié)

以上是生活随笔為你收集整理的移动前端框架重构几个关键问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。