先來點題外話:實習ing,工作之餘想找些開源的項目學習一波,看着慕課實戰的項目不錯,通過多番尋找在某魚上面找了一個“HTML5 移動webapp閱讀器”學習視頻,然後就花了兩天時間學習惡補了一波,希望大家多多指正!
項目源碼:https://github.com/whhlulu/webappbook
有視頻資源需要的另外聯繫!
想搞一個在線案例,新人小白不會搞,會的可以交流一波!
項目包含:
- 本地存儲
- jsonp請求和ajax請求
- ES6新的特性promise
- 實戰項目搭建,規範
- 還有一些其他小知識點
先一張效果圖
下面進入正題:
一、一些知識點
1.以前絕對不是這樣寫,其中老師的一句話非常受用“代碼崩潰不是突然一句代碼搞的,性能要時刻注意”
複用的dom用變量存儲,jquery選擇器耗時,雖然看不出來區別,但是頁面越來越龐大之後,都是負擔。當然吶這樣的地方太多太多了:全局變量的管理,z-index的管理……
var Dom = {
top_nav: $('#top_nav'),
bottom_nav: $('.bottom_nav'),
}
var Win = $(window);
var Doc = $(document);
2.使用base64製作圖片-background: url(data:image/png;base64,*)
好處就不多說了,適用於簡單元素圖片,減少http請求
3.使用css3製作背景圖片
.bk-container-current {
position: absolute;
top: -2px;
left: -2px;
width: 32px;
height: 32px;
border-radius: 16px;
border: 1px solid #ff7800;
display: inline-block;
}
4.移動平臺對 META 標籤的定義-詳細參見
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">//屏幕縮放
<meta name="format-detection" content="telephone=no">//數字不識別爲電話
<meta name="apple-mobile-web-app-capable" content="yes" />
二、代碼框架搭建
這個不多說上代碼吧,入口函數、交互方法、DOM事件分離!閉包避免全局變量污染!
這一點非常受用,工作的時候看不是自己寫的代碼簡直是想死,如果大家都有一個規範,和事件分類,以及大量的註釋,代碼易讀性飛昇!
(function () {
var Util = (function () {
})();
function main() {
//todo 入口函數
}
function ReaderModel() {
//todo 實現和閱讀器相關的數據交互的方法
}
function ReaderBaseFrame() {
//todo 渲染基本的UI結構
}
function EventHanlder() {
//todo 交互的事件綁定
}
main();//調用入口函數
})()//閉包不影響全局
三、本地存儲Storage
原來一點沒接觸過,學習了一下,發現也不難,而且非常實用,有時候學習就是這樣接觸過寫過比知識聽說強大的多!詳細參見
特別說明一下爲了避免同域情況下的localStorage相同,所以增加var prefix = ‘html5_reader_’前綴區分!
var prefix = ‘html5_reader_’
var StorageGetter = function (key) {
return localStorage.getItem(prefix + key);
}
var StorageSetter = function (key, val) {
return localStorage.setItem(prefix + key, val)
}
return {
StorageGetter:StorageGetter,
StorageSetter:StorageSetter
}
四、JSONP
jsonp以前也沒有自己寫過,這次又學到了一些。原來學過java,ajax傳輸數據傳輸感覺信手拈來,不過一直疑惑明文傳輸的問題和跨域,今天終於得到了解答!
通過jsonp得到一個url而這個url則是真實數據(實質是
五、關於promise
原來學習react 用fetch的時候學了一下promise,以同步的形式寫異步的代碼。
不過個人感覺對這個項目而用有點雞肋。(promise.html用了,有興趣的可以看看,不過我沒有全部改成promise寫法)
含義:Promise是異步編程的一種解決方案,比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現,ES6將其寫進了語言標準,統一了用法,原生提供了Promise對象。
所謂Promise,簡單說就是一個容器,裏面保存着某個未來纔會結束的事件(通常是一個異步操作)的結果。從語法上說,Promise是一個對象,從它可以獲取異步操作的消息。Promise提供統一的API,各種異步操作都可以用同樣的方法進行處理。(http://es6.ruanyifeng.com/#docs/promise)
ES6新特性還是非常值得一學了,還有配合react使用,下面想繼續學習react了!