這幾年隨著移動設備的不斷普及, 使用手機和平板電腦觀看網頁的幾率大增, 因此, 網頁從簡單的HTML進化到必須符合各種分辨率的屏幕, 這是一個不可避免的趨勢。
目前開發(fā)針對于移動設備的APP非常流行, 各大網站都有其相應的APP。但是在學習編寫APP的時候, 我感覺到有幾個問題值得探討。第一, 現(xiàn)在最流行的手機操作平臺有兩個:Android和IOS, 其編程難度都不低;第二, 與網站可以直接瀏覽不同, 使用者必須另外下載APP。當然另外寫一個APP可以提供更具有針對性的服務, 但是提供一個手機瀏覽器可以瀏覽的版本也是必要的。
1、使用React.JS開發(fā)自適應網站
對于開發(fā)自適應網站而言, 在現(xiàn)在發(fā)達的開源社區(qū)中, 我們有很多可以使用的好東西。Bootstrap3和React.JS就是其中的佼佼者。
Bootstrap是一個前端的Framework, 可以使我們節(jié)省很多花費在編寫CSS身上的時間。作為設計自適應網站的重點, CSS具有比較容易的會有硬件加速等的優(yōu)化;另外, 為了提高效率, 能用CSS做到的, 就盡量不要用Java Script來實現(xiàn)。
React.JS (以下簡稱React) , 是Facebook底下的開源項目, Instagram就是使用React開發(fā)的。React是個JS框架, 同時也是個新的網頁開發(fā)概念。隨著這幾年來的蓬勃發(fā)展, 一直不斷推陳出新, 甚至可以用來開發(fā)i OSApp。
React讓網頁開發(fā)變成一種簡單的概念。和以往使用JQuery或是其他的套件有很大不同的是, React把網頁中的元素當成一個一個的“組件”, 先定義“組件”, 再將“組件”塞進網頁中。這樣的做法有幾個好處:第一、我們可以重復使用相同的組件, 卻只要定義一遍;第二、我們可以享有React提供的渲染優(yōu)化。所謂的渲染優(yōu)化, 就是React對于網頁內容呈現(xiàn)的處理方式加以優(yōu)化的算法。在呈現(xiàn)一個新網頁之前, React會先將新舊網頁的內容加以比較, 找出兩者相異之處后, 再以修改舊網頁的文件對象的方式達成新網頁的呈現(xiàn)。相較于傳統(tǒng)瀏覽器整個重新剖析計算新網頁, React可以讓瀏覽器呈現(xiàn)網頁的效率大為增進。
使用React, 網頁分成了“組件”和“數(shù)據”, 只要管理數(shù)據, 讓React來負責渲染。這樣的作法, 我們可以很容易地開發(fā)出一個純AJAX網站, 讓網頁加載后, 便不再需要重新整理, 全部使用JS去抓“數(shù)據”。還有一個好處就是不用再為處理這些數(shù)據而傷透腦筋, 只要將數(shù)據放進該放的地方就好。使用React的數(shù)據流寫前端的時候, 我們只要考慮整體, 而不用考慮細節(jié)。而分工從一般網頁設計上的功能性分工, 變成“組件”各自處理自己的部分, 而“組件”中還可以遷入其他組件, 形成一個數(shù)據流。
2、開發(fā)中遇到的問題
3.1 舊版IE瀏覽器
因為IE老舊, 而有些地方又常常指定使用舊版IE (如IE8) , 導致目前還有大量舊版IE使用者。
IE11是一款可支持HTML5標準的瀏覽器, 所以我選擇支持。當然, 我們還是必須另外寫一些程序代碼讓網頁支持IE11。
使用最新的瀏覽器, 我們可以使用最新的標準來編寫網站, 而不用遷就舊版IE瀏覽器, 套件也可以用最新版。最新版往往功能較多或是效率較高, 如JQuery 2.X以后版本不支持舊版IE。
3.2 不同的瀏覽器
每個瀏覽器的行為和支持的JS、CSS方法不同, 撰寫自適應網站一定要用各種瀏覽器測試, 不然就會出現(xiàn)意外的狀況。如果不想使用太多瀏覽器, 除了Chrome外, 至少還要再使用Fire Fox, 因為Fire Fox是一款非常遵守HTML5標準的瀏覽器。
3.3 不同的屏幕大小
這是一個基本的問題, 不同屏幕大小會影響你的網頁瀏覽模式, 有些時候不是調整一下DIV寬度就可以解決的。
諸如此類還有一些按鈕、表格等, 如果可以的話, 一開始就設計一個可大可小的顯示方法, 不然的話, 就必須針對不同的大小, 提供不同的網頁設計。手機優(yōu)先是現(xiàn)在的主流, 設計樣式時以小屏幕設計常常可以得到比較好的效果。
3.4 操作的模式和JS事件
手機上的觸控, 是不適用鼠標事件的, 而是另外定義一個“觸控事件”, 還有手機上不容易觸發(fā)Hover事件, 有些因為手機屏幕小, 很難進行精準的點擊。根據上述原因, 設計自適應網頁給手機使用者使用時, 一定要注意按鈕的大小不能太小, 也不要在網頁上放太多Hover的事件, 如果有用到mousedown、mouseover等鼠標事件, 也一定要注意另外定義touchstart、touchmove事件。
3.5 不要使用外掛功能, 如Flash
這里的外掛指標準 (HTML/CSS/JS) 之外的網頁外掛工具, 像是Flash, 因為手機版瀏覽器可能不支持這些外掛, 很難跨平臺?，F(xiàn)在的Android已經預設不使用Flash了, HTML5標準中也有很多更好用、效率更高的對象能夠取代Flash, 現(xiàn)在我們有更好的選擇, 使用大量外掛開發(fā)網頁的時代已經過去了。
3.6 網頁加載速度
其實這個問題不只在自適應網站上會有, 一般網站也該注意。
使用了很多套件、自適應的CSS檔案, 我們的網頁常常會很肥大, 尤其是移動設備常常不會有良好的網絡環(huán)境, 瀏覽網站一次可能就要加載好幾秒甚至幾分鐘。
盡量不要加載不必要的CSS、JS, 然后啟用壓縮功能, 把空白和換行壓縮掉, 并用gzip壓縮, 大概可以讓整個網頁變成原本的20%甚至更小。