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

設(shè)計(jì)網(wǎng)頁靠什么來打動(dòng)訪客
香港站群多IP服務(wù)器怎么樣？香港站群服務(wù)器有哪些優(yōu)勢？
受青睞的網(wǎng)站設(shè)計(jì)用了怎樣的技巧
如何用廣告來增加網(wǎng)站收入？
為什么堅(jiān)持更新原創(chuàng)文章排名還是上不去
如何更好的設(shè)計(jì)網(wǎng)頁配色
電商經(jīng)驗(yàn)談?wù)勑氯胄姓呷绾尾拍茏鲭娮由虅?wù)
企業(yè)如何開發(fā)一個(gè)適合自己的小程序？