行業動态

這(zhè)幾年随着移動設備的(de)不(bù)斷普及, 使用手機和(hé / huò)平闆電腦觀看網頁的(de)幾率大(dà)增, 因此, 網頁從簡單的(de)HTML進化到(dào)必須符合各種分辨率的(de)屏幕, 這(zhè)是(shì)一(yī / yì ／yí)個(gè)不(bù)可避免的(de)趨勢。

目前開發針對于(yú)移動設備的(de)APP非常流行, 各大(dà)網站都有其相應的(de)APP。但是(shì)在(zài)學習編寫APP的(de)時(shí)候, 我感覺到(dào)有幾個(gè)問題值得探讨。第一(yī / yì ／yí), 現在(zài)最流行的(de)手機操作平台有兩個(gè):Android和(hé / huò)IOS, 其編程難度都不(bù)低;第二, 與網站可以(yǐ)直接浏覽不(bù)同, 使用者必須另外下載APP。當然另外寫一(yī / yì ／yí)個(gè)APP可以(yǐ)提供更具有針對性的(de)服務, 但是(shì)提供一(yī / yì ／yí)個(gè)手機浏覽器可以(yǐ)浏覽的(de)版本也(yě)是(shì)必要(yào / yāo)的(de)。

1、使用React.JS開發自适應網站

對于(yú)開發自适應網站而(ér)言, 在(zài)現在(zài)發達的(de)開源社區中, 我們有很多可以(yǐ)使用的(de)好東西。Bootstrap3和(hé / huò)React.JS就(jiù)是(shì)其中的(de)佼佼者。

Bootstrap是(shì)一(yī / yì ／yí)個(gè)前端的(de)Framework, 可以(yǐ)使我們節省很多花費在(zài)編寫CSS身上(shàng)的(de)時(shí)間。作爲(wéi / wèi)設計自适應網站的(de)重點, CSS具有比較容易的(de)會有硬件加速等的(de)優化;另外, 爲(wéi / wèi)了(le／liǎo)提高效率, 能用CSS做到(dào)的(de), 就(jiù)盡量不(bù)要(yào / yāo)用Java Script來(lái)實現。

React.JS (以(yǐ)下簡稱React) , 是(shì)Facebook底下的(de)開源項目, Instagram就(jiù)是(shì)使用React開發的(de)。React是(shì)個(gè)JS框架, 同時(shí)也(yě)是(shì)個(gè)新的(de)網頁開發概念。随着這(zhè)幾年來(lái)的(de)蓬勃發展, 一(yī / yì ／yí)直不(bù)斷推陳出(chū)新, 甚至可以(yǐ)用來(lái)開發i OSApp。

React讓網頁開發變成一(yī / yì ／yí)種簡單的(de)概念。和(hé / huò)以(yǐ)往使用JQuery或是(shì)其他(tā)的(de)套件有很大(dà)不(bù)同的(de)是(shì), React把網頁中的(de)元素當成一(yī / yì ／yí)個(gè)一(yī / yì ／yí)個(gè)的(de)“組件”, 先定義“組件”, 再将“組件”塞進網頁中。這(zhè)樣的(de)做法有幾個(gè)好處:第一(yī / yì ／yí)、我們可以(yǐ)重複使用相同的(de)組件, 卻隻要(yào / yāo)定義一(yī / yì ／yí)遍;第二、我們可以(yǐ)享有React提供的(de)渲染優化。所謂的(de)渲染優化, 就(jiù)是(shì)React對于(yú)網頁内容呈現的(de)處理方式加以(yǐ)優化的(de)算法。在(zài)呈現一(yī / yì ／yí)個(gè)新網頁之(zhī)前, React會先将新舊網頁的(de)内容加以(yǐ)比較, 找出(chū)兩者相異之(zhī)處後, 再以(yǐ)修改舊網頁的(de)文件對象的(de)方式達成新網頁的(de)呈現。相較于(yú)傳統浏覽器整個(gè)重新剖析計算新網頁, React可以(yǐ)讓浏覽器呈現網頁的(de)效率大(dà)爲(wéi / wèi)增進。

使用React, 網頁分成了(le／liǎo)“組件”和(hé / huò)“數據”, 隻要(yào / yāo)管理數據, 讓React來(lái)負責渲染。這(zhè)樣的(de)作法, 我們可以(yǐ)很容易地(dì / de)開發出(chū)一(yī / yì ／yí)個(gè)純AJAX網站, 讓網頁加載後, 便不(bù)再需要(yào / yāo)重新整理, 全部使用JS去抓“數據”。還有一(yī / yì ／yí)個(gè)好處就(jiù)是(shì)不(bù)用再爲(wéi / wèi)處理這(zhè)些數據而(ér)傷透腦筋, 隻要(yào / yāo)将數據放進該放的(de)地(dì / de)方就(jiù)好。使用React的(de)數據流寫前端的(de)時(shí)候, 我們隻要(yào / yāo)考慮整體, 而(ér)不(bù)用考慮細節。而(ér)分工從一(yī / yì ／yí)般網頁設計上(shàng)的(de)功能性分工, 變成“組件”各自處理自己的(de)部分, 而(ér)“組件”中還可以(yǐ)遷入其他(tā)組件, 形成一(yī / yì ／yí)個(gè)數據流。

2、開發中遇到(dào)的(de)問題

3.1 舊版IE浏覽器

因爲(wéi / wèi)IE老舊, 而(ér)有些地(dì / de)方又常常指定使用舊版IE (如IE8) , 導緻目前還有大(dà)量舊版IE使用者。

IE11是(shì)一(yī / yì ／yí)款可支持HTML5标準的(de)浏覽器, 所以(yǐ)我選擇支持。當然, 我們還是(shì)必須另外寫一(yī / yì ／yí)些程序代碼讓網頁支持IE11。

使用最新的(de)浏覽器, 我們可以(yǐ)使用最新的(de)标準來(lái)編寫網站, 而(ér)不(bù)用遷就(jiù)舊版IE浏覽器, 套件也(yě)可以(yǐ)用最新版。最新版往往功能較多或是(shì)效率較高, 如JQuery 2.X以(yǐ)後版本不(bù)支持舊版IE。

3.2 不(bù)同的(de)浏覽器

每個(gè)浏覽器的(de)行爲(wéi / wèi)和(hé / huò)支持的(de)JS、CSS方法不(bù)同, 撰寫自适應網站一(yī / yì ／yí)定要(yào / yāo)用各種浏覽器測試, 不(bù)然就(jiù)會出(chū)現意外的(de)狀況。如果不(bù)想使用太多浏覽器, 除了(le／liǎo)Chrome外, 至少還要(yào / yāo)再使用Fire Fox, 因爲(wéi / wèi)Fire Fox是(shì)一(yī / yì ／yí)款非常遵守HTML5标準的(de)浏覽器。

3.3 不(bù)同的(de)屏幕大(dà)小

這(zhè)是(shì)一(yī / yì ／yí)個(gè)基本的(de)問題, 不(bù)同屏幕大(dà)小會影響你的(de)網頁浏覽模式, 有些時(shí)候不(bù)是(shì)調整一(yī / yì ／yí)下DIV寬度就(jiù)可以(yǐ)解決的(de)。

諸如此類還有一(yī / yì ／yí)些按鈕、表格等, 如果可以(yǐ)的(de)話, 一(yī / yì ／yí)開始就(jiù)設計一(yī / yì ／yí)個(gè)可大(dà)可小的(de)顯示方法, 不(bù)然的(de)話, 就(jiù)必須針對不(bù)同的(de)大(dà)小, 提供不(bù)同的(de)網頁設計。手機優先是(shì)現在(zài)的(de)主流, 設計樣式時(shí)以(yǐ)小屏幕設計常常可以(yǐ)得到(dào)比較好的(de)效果。

3.4 操作的(de)模式和(hé / huò)JS事件

手機上(shàng)的(de)觸控, 是(shì)不(bù)适用鼠标事件的(de), 而(ér)是(shì)另外定義一(yī / yì ／yí)個(gè)“觸控事件”, 還有手機上(shàng)不(bù)容易觸發Hover事件, 有些因爲(wéi / wèi)手機屏幕小, 很難進行精準的(de)點擊。根據上(shàng)述原因, 設計自适應網頁給手機使用者使用時(shí), 一(yī / yì ／yí)定要(yào / yāo)注意按鈕的(de)大(dà)小不(bù)能太小, 也(yě)不(bù)要(yào / yāo)在(zài)網頁上(shàng)放太多Hover的(de)事件, 如果有用到(dào)mousedown、mouseover等鼠标事件, 也(yě)一(yī / yì ／yí)定要(yào / yāo)注意另外定義touchstart、touchmove事件。

3.5 不(bù)要(yào / yāo)使用外挂功能, 如Flash

這(zhè)裏的(de)外挂指标準 (HTML/CSS/JS) 之(zhī)外的(de)網頁外挂工具, 像是(shì)Flash, 因爲(wéi / wèi)手機版浏覽器可能不(bù)支持這(zhè)些外挂, 很難跨平台。現在(zài)的(de)Android已經預設不(bù)使用Flash了(le／liǎo), HTML5标準中也(yě)有很多更好用、效率更高的(de)對象能夠取代Flash, 現在(zài)我們有更好的(de)選擇, 使用大(dà)量外挂開發網頁的(de)時(shí)代已經過去了(le／liǎo)。

3.6 網頁加載速度

其實這(zhè)個(gè)問題不(bù)隻在(zài)自适應網站上(shàng)會有, 一(yī / yì ／yí)般網站也(yě)該注意。

使用了(le／liǎo)很多套件、自适應的(de)CSS檔案, 我們的(de)網頁常常會很肥大(dà), 尤其是(shì)移動設備常常不(bù)會有良好的(de)網絡環境, 浏覽網站一(yī / yì ／yí)次可能就(jiù)要(yào / yāo)加載好幾秒甚至幾分鍾。

盡量不(bù)要(yào / yāo)加載不(bù)必要(yào / yāo)的(de)CSS、JS, 然後啓用壓縮功能, 把空白和(hé / huò)換行壓縮掉, 并用gzip壓縮, 大(dà)概可以(yǐ)讓整個(gè)網頁變成原本的(de)20%甚至更小。