學習「HTML5 移動webapp閱讀器」心得

先來點題外話：實習ing，工做之餘想找些開源的項目學習一波，看着慕課實戰的項目不錯，經過多番尋找在某魚上面找了一個「HTML5 移動webapp閱讀器」學習視頻，而後就花了兩天時間學習惡補了一波，但願你們多多指正！

項目源碼：https://github.com/whhlulu/we...

有視頻資源須要的另外聯繫！

想搞一個在線案例，新人小白不會搞，會的能夠交流一波！

---

項目包含：

1. 本地存儲

2. jsonp請求和ajax請求

3. ES6新的特性promise

4. 實戰項目搭建，規範

5. 還有一些其餘小知識點

先一張效果圖

下面進入正題：

1、一些知識點

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" />

2、代碼框架搭建

這個很少說上代碼吧，入口函數、交互方法、DOM事件分離！閉包避免全局變量污染！
這一點很是受用，工做的時候看不是本身寫的代碼簡直是想死，若是你們都有一個規範，和事件分類，以及大量的註釋，代碼易讀性飛昇！

(function () {
        var Util = (function () {
        })();
        function main() {
            //todo 入口函數
        }
        function ReaderModel() {
            //todo 實現和閱讀器相關的數據交互的方法
        }
        function ReaderBaseFrame() {
            //todo 渲染基本的UI結構
        }
        function EventHanlder() {
            //todo 交互的事件綁定
        }
        main();//調用入口函數
    })()//閉包不影響全局

3、本地存儲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
}

4、JSONP

jsonp之前也沒有本身寫過，此次又學到了一些。原來學過java，ajax傳輸數據傳輸感受信手拈來，不過一直疑惑明文傳輸的問題和跨域，今天終於獲得瞭解答！
經過jsonp獲得一個url而這個url則是真實數據（實質是<script>標籤，其src指向咱們的數據地址解決跨域），傳輸base64流能夠解決加密問題。
照舊先看代碼：
詳細參見

var getJSONP = function (url, callback) {
    return $.jsonp({
    url: url,
    cache: true,//是否緩存
    callback: 'duokan_fiction_chapter',
    success: function (result) {
        var data = $.base64.decode(result);//經過base64解析
        var json = decodeURIComponent(escape(data));//轉碼
            callback(json);
        }
    })

}

5、關於promise

原來學習react 用fetch的時候學了一下promise，以同步的形式寫異步的代碼。
不過我的感受對這個項目而用有點雞肋。（promise.html用了，有興趣的能夠看看，不過我沒有所有改爲promise寫法）
含義：Promise是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最先提出和實現，ES6將其寫進了語言標準，統一了用法，原生提供了Promise對象。
所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise是一個對象，從它能夠獲取異步操做的消息。Promise提供統一的API，各類異步操做均可以用一樣的方法進行處理。（http://es6.ruanyifeng.com/#do...）

ES6新特性仍是很是值得一學了，還有配合react使用，下面想繼續學習react了！