移動前端框架重構幾個關鍵問題

1. 是否該廢棄iscroll?

我得出的結論是,是該廢棄了。那當時為什么要用iscroll?

原因有三個:

1. 因為別人也用了。

2. 為了iPhone上頁面滑動更順暢。

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

關于這三個原因有幾點觀點:

1.?人最容易跟風,編程也是。當別人用了的時候,會認為我自己也要用,而不清楚為什么要用,本質為了解決什么。

2.?Android上不用iscroll時,頁面拖動效果是可以的。

? ??iPhone上不用iscroll時,頁面拖動效果確實有問題。但是!在滑動塊加上-webkit-overflow-scrolling:touch;? 效果非常好!!

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

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

Finally:

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

2. 效果設計圖以什么為準?

我不是做效果設計圖的,但是對設計圖有點想法。很多框架是以iPhone原生效果做的,這樣控件效果、頁面風格就跟iPhone一樣(Android上也是);也有人會有自己一套設計圖風格,既不是Android原生也不是iPhone原生效果。

Finally:

各自應用該有怎么的設計圖,像什么沒什么好說的。但對于做框架來說,我覺得偏向原生效果總歸是好的。

——自己設計的那一套真的比原生還好嗎?

3. Android動畫效果(頁面切換),效果不是很好,特別是Android4.3、4.4?

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

有人說把下面:

@-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)}
}

這樣可以加速。但是經過實踐檢驗,根本沒什么用,頁面卡頓的還是卡頓。

Finally:

既然現實已經如此,那么我們能做的是:

1. 避免使用大片區域的動畫效果(特別是單頁頁面切換)。

2. 不使用單頁。

4. 是否不該用單頁?

單頁的壞處:

1. 增加了開發人員的開發復雜度,是頁面DOM變得過于復雜。

2. 存在無法釋放的內存(可能是框架本身,或開發者自己弄出來的)。

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

4. 頁面路由問題,當想直接打開某個子頁,必須經過主頁,然后跳轉到子頁。存在兩層加載中問題。

Finally:

也鑒于在單頁中這些痛苦問題,無聊是移動Web,還是Hybrid應用,我覺得都不要使用單頁。

5. 對于zepto,是否換回jquery?

zepto和jquery的現狀:

1.zepto很久沒更新了,而jquery在持續發展。

2.jquery畢竟是大眾使用的,群眾基礎多。

3.很多控件是以jquery為基礎,可能無法轉換用zepto。

Finally:

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

對于Hybrid 應用來說,這幾十KB的問題根本不是問題,都是本地資源,加載速度可以忽略不計。

對于移動Web應用來說,jquery可以使用壓縮版和緩存做優化。

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

6.tap事件?

這是zepto里面根據幾個觸摸事件模擬出來的事件,為了提高點擊事件觸發的速度,但是存在經典的“穿透”問題。所以如果只是為了提速,或者廢棄使用zepto,完全可以使用fastclick,提高響應速度。

Finally:

回歸本質,使用click,在click基礎上使用fastclick。

7.字體圖標多少為好?

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

那字體圖標內置多少個為好,我認為是盡量少,左右上下等圖標,大概10個左右。字體圖標越少,體積越小;其他使用圖片還可以利用到緩存。

Finally:

不要一股腦加了幾百個字體圖標作為內置圖標, 雖然使用上簡單了,但是有很多冗余。

?

總結

這幾個問題是在公司框架重構想起的,感觸最深的問題。

?

本文為原創文章,轉載請保留原出處,方便溯源,如有錯誤地方,謝謝指正。

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

轉載于:https://www.cnblogs.com/lovesong/p/5478116.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/396038.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/396038.shtml
英文地址,請注明出處:http://en.pswp.cn/news/396038.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

android 內部共享存儲,Android共享內部存儲

我現在面對txt文件的類似情況,并做到了這一點.File downloadedFile new File( context.getFilesDir(),"simple.txt" );downloadedFile.setReadable( true,false );downloadedFile.setWritable( true,false ); //set read/write for othersUri downloadFileUri Uri.f…

UiPath: Selectors repair 選擇器的修復,即被選擇的按鈕發生改變如何選擇第二按鈕...

實現批量注冊用戶功能時,出現第一個用戶注冊完時,彈出確認按鈕,點擊即可,但是第二個用戶注冊完成時,彈出的按鈕與第一個有差異,圖形用戶界面元素及其父元素的屬性都發生改變。所以就點不了按鈕,…

《C專家編程》一1.6 它很棒,但它符合標準嗎

本節書摘來自異步社區《C專家編程》一書中的第1章,第1.6節,作者 【美】Perter Van Der Linde,更多章節內容可以訪問云棲社區“異步社區”公眾號查看 1.6 它很棒,但它符合標準嗎 不要添亂——立即解散ISO工作小組。 ——匿名人士 …

abap al設置單元格可編輯 oo_excel表格操作: 圖形和圖表編輯技巧匯總(二)

1. 快速選取圖表元素圖表創建好以后,我們還需要對某些圖表元素進行編輯和格式化。圖表區包括整個圖表和它的全部元素,當你選取圖表區后,你就可以看到8個黑色小方塊。要想調整單個的圖表對象,首先必須選取該對象,然后更…

trie樹查找前綴串_Trie數據結構(前綴樹)

trie樹查找前綴串by Julia GeistJulia蓋斯特(Julia Geist) A Trie, (also known as a prefix tree) is a special type of tree used to store associative data structuresTrie (也稱為前綴樹)是一種特殊類型的樹,用于存儲關聯數據結構 A trie (pronounced try) g…

我的北航故事

我的北航故事 致 沙航的我 既然是故事,那就一定少不了我們耳熟能詳的時間,地點,人物,事件,發展,高潮,結局。經過反復的琢磨,我覺得還是寫成日記形式比較適合,一是為了掩蓋…

oppo r11 android版本,OPPO R11手機一共有幾個版本?各版本都有哪些區別?

OPPO正式發布了新一代R11和R11 Plus兩款旗艦手機,那么OPPO R11有幾個版本?OPPO R11各個版本有什么區別?下面帶來OPPO R11各版本區別對比詳細評測,一起來了解下吧!外觀方面,采用微弧面設計,全新打磨輕薄“小…

CDB和PDB的創建、連接、啟動、關閉

CDB和PDB的創建、連接、啟動、關閉 一、CDB和PDB基本管理 基本概念: Multitenant Environment:多租戶環境 CDB(Container Database):數據庫容器 PD(Pluggable Database):可插拔數據庫…

《Java和Android開發學習指南(第2版)》——第2章,第2.10節本章小結

本節書摘來自異步社區《Java和Android開發學習指南(第2版)》一書中的第2章,第2.10節本章小結,作者 【加】Budi Kurniawan,更多章節內容可以訪問云棲社區“異步社區”公眾號查看 2.10 本章小結本章介紹了Java語言的基礎…

控制usb掃碼槍_無線也可以很牢靠-世達SATA熱熔膠槍評測

作為一名喜歡動手制作的手工達人,往往樂趣就在于動手過程中的成就感。而在對零件進行固定時,熱熔膠由于可以包裹裸露的電線線頭,固定效果也非常好,相比電焊也更加的簡單易操作,因而被很多人選擇。但是,多數…

測試驅動開發 測試前移_為什么測試驅動的開發有用?

測試驅動開發 測試前移有關如何更有效地應用TDD的技巧,以及為什么它是一種有價值的技術 (Tips on how to apply TDD more efficiently, and why its a valuable technique) Theres a common pattern we follow when we start a project using TDD. We describe the …

Anaconda管理多版本的python環境

通過Conda的環境管理功能,我們能同時安裝多個不同版本的Python,并能根據需要自由切換。下面我將給大家分享一下,新增Python版本,切換,再切回主版本的詳細過程。 方法/步驟 1首先確保你的系統里已經安裝了Conda&#xf…

父子滬c轉大牌過戶_機動車異地過戶(轉籍)

最近我家換了一輛車,導航后臺數據統計是去足浴城最多的車主,尬!從想起這個品牌到付定金,也就半天時間,買之前沒了解這么透徹。不過,到手駕駛,還是比之前的車舒適很多的,就是容易在不…

android安卓系統2.3 使用說明書,Android2.3操作界面

Android2.3操作界面摩托羅拉XT882的界面相對于原生的Gingerbread還是有了不小的變化,首先最大的感覺就是主色調亮了很多。默認背景在qHD分辨率下非常的清晰,同時整個界面仍然采用了多分屏界面。下方由中國電信定制,狀態欄加入了全新的單個狀態…

《運營力——微信公眾號 設計 策劃 客服 管理 一冊通》一一1.2 團隊崗位介紹...

本節書摘來自異步社區出版社《運營力——微信公眾號 設計 策劃 客服 管理 一冊通》一書中的第1章,第1.2節,作者: 杭州創博通信技術有限公司 , 施瑤君,更多章節內容可以訪問云棲社區“異步社區”公眾號查看。 1.2 團隊崗位介紹 創…

一切都是關于“ –ilities”的

by George Stepanek通過喬治斯蒂芬內克 都是關于“邪惡”的 (It’s all about the “-ilities”) We were “feature complete.”我們“功能齊全”。 Four weeks into a 10-week Free Code Camp project to build an environmental pledge web application, we had gotten al…

1,滑動驗證,前后臺接口

http://www.geetest.com/install/sections/idx-client-sdk.html 轉載于:https://www.cnblogs.com/yexiangwang/p/5481153.html

Linux 下 nginx反向代理與負載均衡

前面幾篇記錄下nginx的基本運功,代理服務器的訪問,這里來試驗下nginx的反向代理。 反向代理(Reverse Proxy)方式是指以代理服務器來接受internet上的連接請求,然后將請求轉發給內部網絡上的服務器,并將從服…

android 8.1沒聲音,Android 8.1重大改變!耳機孔不見了

原標題:Android 8.1重大改變!耳機孔不見了今天上午,Android Police爆料稱,下一代的Pixel 2將首發Android 8.1。更重要的是,在這個新系統中,谷歌已經做好了放棄3.5mm耳機插口的準備,并將在底層優…

php變量前下滑_PHP變量

變量來源于數學,是計算機語言中能儲存計算結果或能表示值抽象概念。變量可以通過變量名訪問。變量是存儲數據的“容器”。命名規則變量以 $ 符號開始,后面跟著變量的名稱變量名必須以字母或者下劃線字符開始變量名只能包含字母數字字符以及下劃線(A-Z、a…