這是一個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代碼；本地瀏覽器就會執行這段代碼。