webApp 閱讀器項目實踐

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

　　項目屬於麻雀雖小，但五臟俱全的類型，對於前端新手來講，仍是頗有學習價值。　　

1、項目成果展現

2、項目所用技術

語言：Html，css，js

插件：

zepto.js: 使用於移動端的js庫，語法與jquery類似，但增長了觸摸等移動端事件，去掉了對瀏覽器兼容的代碼，所以更輕量級

jquery.base64.js: 解碼base64編碼的插件

jquery.jsonp.js: 提供jsonp請求的插件

 

3、項目實現功能分析

一、HTML結構

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

 

二、靜態頁面交互

須要實現的功能有：

1）點擊屏幕中央，出現上下邊欄；再次點擊，上下邊欄消失（這是爲何在上一段代碼中，添加了響應觸摸屏幕的div這個結構，其寬度能夠設置爲屏幕寬度的30%左右）

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

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

 

對於以上功能，完成後，還須要在細節上進行優化：

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

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

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

    設置字體時，字體的圖標應該高亮；

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

 

完成了初步的優化後，還能夠進一步完善：

1）用戶設置的字體和背景色，是否能夠緩存下來，使頁面刷新時不變

 

三、和後臺的交互

項目是在data文件夾放了一些json文件，模擬服務端的返回值，這裏要解決的問題有：

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

2）獲取到了數據後，如何更新到頁面

 

4、項目技術點分析

一、HTML結構

1）控制面板部分，能夠看到背景色的幾個按鈕是不透明的，而面板背景是半透明的：該效果能夠經過設置兩個div，第一個div設置爲半透明的背景色，第二個div做爲容納按鈕等標籤的容器

 

二、靜態頁面交互

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

2）緩存背景色和字號，可使用本地存儲localStorage實現

 

三、和後臺的交互

　　使用jsonp來實現跨域，獲取模擬服務端返回的數據　　

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