針對自適應網站開發探討的不同問題

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

對于開發自適應網站而言, 在現在發達的開源社區中, 我們有很多可以使用的好東西。Bootstrap3和React.JS就是其中的佼佼者。

Bootstrap是一個前端的Framework, 可以使我們節省很多花費在編寫CSS身上的時間。作為設計自適應網站的重點, CSS具有比較容易的會有硬件加速等的優化;另外, 為了提高效率, 能用CSS做到的, 就盡量不要用Java Script來實現。

React.JS (以下簡稱React) , 是Facebook底下的開源項目, Instagram就是使用React開發的。React是個JS框架, 同時也是個新的網頁開發概念。隨著這幾年來的蓬勃發展, 一直不斷推陳出新, 甚至可以用來開發i OSApp。

React讓網頁開發變成一種簡單的概念。和以往使用JQuery或是其他的套件有很大不同的是, React把網頁中的元素當成一個一個的“組件”, 先定義“組件”, 再將“組件”塞進網頁中。這樣的做法有幾個好處:第一、我們可以重復使用相同的組件, 卻只要定義一遍;第二、我們可以享有React提供的渲染優化。所謂的渲染優化, 就是React對于網頁內容呈現的處理方式加以優化的算法。在呈現一個新網頁之前, React會先將新舊網頁的內容加以比較, 找出兩者相異之處后, 再以修改舊網頁的文件對象的方式達成新網頁的呈現。相較于傳統瀏覽器整個重新剖析計算新網頁, React可以讓瀏覽器呈現網頁的效率大為增進。

使用React, 網頁分成了“組件”和“數據”, 只要管理數據, 讓React來負責渲染。這樣的作法, 我們可以很容易地開發出一個純AJAX網站, 讓網頁加載后, 便不再需要重新整理, 全部使用JS去抓“數據”。還有一個好處就是不用再為處理這些數據而傷透腦筋, 只要將數據放進該放的地方就好。使用React的數據流寫前端的時候, 我們只要考慮整體, 而不用考慮細節。而分工從一般網頁設計上的功能性分工, 變成“組件”各自處理自己的部分, 而“組件”中還可以遷入其他組件, 形成一個數據流。

2、開發中遇到的問題

3.1 舊版IE瀏覽器

因為IE老舊, 而有些地方又常常指定使用舊版IE (如IE8) , 導致目前還有大量舊版IE使用者。

IE11是一款可支持HTML5標準的瀏覽器, 所以我選擇支持。當然, 我們還是必須另外寫一些程序代碼讓網頁支持IE11。

使用最新的瀏覽器, 我們可以使用最新的標準來編寫網站, 而不用遷就舊版IE瀏覽器, 套件也可以用最新版。最新版往往功能較多或是效率較高, 如JQuery 2.X以后版本不支持舊版IE。

3.2 不同的瀏覽器

每個瀏覽器的行為和支持的JS、CSS方法不同, 撰寫自適應網站一定要用各種瀏覽器測試, 不然就會出現意外的狀況。如果不想使用太多瀏覽器, 除了Chrome外, 至少還要再使用Fire Fox, 因為Fire Fox是一款非常遵守HTML5標準的瀏覽器。

3.3 不同的屏幕大小

這是一個基本的問題, 不同屏幕大小會影響你的網頁瀏覽模式, 有些時候不是調整一下DIV寬度就可以解決的。

諸如此類還有一些按鈕、表格等, 如果可以的話, 一開始就設計一個可大可小的顯示方法, 不然的話, 就必須針對不同的大小, 提供不同的網頁設計。手機優先是現在的主流, 設計樣式時以小屏幕設計常常可以得到比較好的效果。

3.4 操作的模式和JS事件

手機上的觸控, 是不適用鼠標事件的, 而是另外定義一個“觸控事件”, 還有手機上不容易觸發Hover事件, 有些因為手機屏幕小, 很難進行精準的點擊。根據上述原因, 設計自適應網頁給手機使用者使用時, 一定要注意按鈕的大小不能太小, 也不要在網頁上放太多Hover的事件, 如果有用到mousedown、mouseover等鼠標事件, 也一定要注意另外定義touchstart、touchmove事件。

3.5 不要使用外掛功能, 如Flash

這里的外掛指標準 (HTML/CSS/JS) 之外的網頁外掛工具, 像是Flash, 因為手機版瀏覽器可能不支持這些外掛, 很難跨平臺。現在的Android已經預設不使用Flash了, HTML5標準中也有很多更好用、效率更高的對象能夠取代Flash, 現在我們有更好的選擇, 使用大量外掛開發網頁的時代已經過去了。

3.6 網頁加載速度

其實這個問題不只在自適應網站上會有, 一般網站也該注意。

使用了很多套件、自適應的CSS檔案, 我們的網頁常常會很肥大, 尤其是移動設備常常不會有良好的網絡環境, 瀏覽網站一次可能就要加載好幾秒甚至幾分鐘。

盡量不要加載不必要的CSS、JS, 然后啟用壓縮功能, 把空白和換行壓縮掉, 并用gzip壓縮, 大概可以讓整個網頁變成原本的20%甚至更小。

http://www.ifourtheye.com

相關閱讀：廣州網站建設新聞類站點的開發事項

公司網站設計怎么做更能綁住用戶的心