webApp 閱讀器項目實踐

標籤：

　　這是一個webApp 閱讀器的項目，是慕課網的老師講授的一個實戰，先給出項目源碼在GitHub的地址：https://github.com/yulifromchina/MobileWebReader。

　　項目屬於麻雀雖小，但五髒俱全的類型，對於前端新手來說，還是很有學習價值。　　

一、項目成果展示

二、項目所用技術

語言：Html，css，js

外掛程式：

zepto.js: 使用於移動端的js庫，文法與jquery相似，但增加了觸摸等移動端事件，去掉了對瀏覽器安全色的代碼，因此更輕量級

jquery.base64.js: 解碼base64編碼的外掛程式

jquery.jsonp.js: 提供jsonp請求的外掛程式

 

三、項目實現功能分析

1、HTML結構

閱讀器的構造主要是上側邊欄、文章主體、控制檯面板、下側邊欄幾部分：

 

2、靜態頁面互動

需要實現的功能有：

1）點擊螢幕中央，出現上下側邊欄；再次點擊，上下側邊欄消失（這是為什麼在上一段代碼中，添加了響應觸控螢幕幕的div這個結構，其寬度可以設定為螢幕寬度的30%左右）

2）點擊字型，出現控制台，面板可調節字型的大小；面板可設定內容主體的背景色

3）點擊夜間/白天，背景色會切換成暗黑色/乳白色

 

對於以上功能，完成後，還需要在細節上進行最佳化：

1）使用者滾動頁面時，上下側邊欄應該消失，這樣才能不阻礙使用者閱讀

2）調節字型大小時，應該有最大字型和最小字型的限制；

    設定背景色時，選中的顏色的按鈕，外圍還有一個稍大一點的圓圈；

    設定字型時，字型的表徵圖應該高亮；

3）點擊夜間/白天，這部分的功能實際上是背景色切換的子集，那麼這部分的代碼是可複用的；

 

完成了初步的最佳化後，還可以進一步完善：

1）使用者佈建的字型和背景色，是否可以緩衝下來，使頁面重新整理時不變

 

3、和背景互動

項目是在data檔案夾放了一些json檔案，類比服務端的傳回值，這裡要解決的問題有：

1）項目中請求的資料是多看閱讀中的資料，那麼，如何跨域請求

2）擷取到了資料後，如何更新到頁面

 

四、項目技術點分析

1、HTML結構

1）控制台部分，可以看到背景色的幾個按鈕是不透明的，而面板背景是半透明的：該效果可以通過設定兩個div，第一個div設定為半透明的背景色，第二個div作為容納按鈕等標籤的容器

 

2、靜態頁面互動

1）需要使用js事件來實現CSS樣式的切換，包括點擊和滾動；對於背景色的幾個按鈕，監聽事件的方式都相同，這裡可以使用事件委託的方式來減少代碼

2）緩衝背景色和字型大小，可以使用本機存放區localStorage實現

 

3、和背景互動

　　使用jsonp來實現跨域，擷取類比服務端返回的資料　　

　　關於Jsonp的理解：由於同源策略，a.html不能直接擷取b.html的內容，因此利用<script>標籤不受同源策略的顯示的特性，在script中請求b.html的內容；b.html並不直接返回內容，而是返回 callback({json資料})， 其中，callback是a.html傳遞給b.html的一個回呼函數的名稱；這樣，b.html返回的實際是一段js代碼；本地瀏覽器就會執行這段代碼。

webApp 閱讀器項目實踐