移動Web前端開發高效實戰（一）

摘要：日前，筆者拿到一本有國內知名團隊iKcamp團隊著作的書籍，在對書籍的閱讀過程當中，發現許多知識，不能準確的描述出來，於是邊啃書，邊對裏面提到的東西進行梳理，以鞏固前端知識，作爲自己查閱所用。並且在學習中瞭解新的知識。(github倉庫爲https://github.com/fanyang123/Web_Ksc)

---

全書主要涉及到的知識有：HTML5，CSS3，javascript，webpack，react Native，Vue.js，node.js

HTML5

1、html5常用特性

1.1 在html5中，採用了更加語義化的標籤
Header、nav、srticle、section、aside、footer，分別表示頭部、導航、主題內容、重要的部分、重要的部分、底部等語義化標籤。

1.2表單增強應用
input的type屬性擴展：html5中增加了以下的屬性。

search->展現一個搜索框
tel->電話號碼，可以使用pattern和maxlength限定格式，pattern=”1[3-8][0-9]{9}”
url->地址
email->郵件
date->日期
color->輸入顏色
number->輸入數字
range->滑塊輸入

input還可以通過屬性進行表單驗證，通過required標記爲必填元素，使用pattern進行驗證。
其他屬性：

autofocus->頁面加載的時候，自動聚焦
form->將input輸入元素和特定的form表單關聯
placeholder->輸入佔位符。

1.3其他新增加的元素：

progress->表示進度條，
meter->表示標尺，max爲最大值，默認爲1，min爲最小值，value爲標尺的值。
特殊屬性：contenteditable=”表示可以編輯”。

1.4視頻video和音頻audio
所包含的屬性：

controls->控制是否顯示控制條
autoplay->是否自動播放，默認爲false
loop->是否循環播放
preload->預加載

audio示例：

<section>
        <h3>自定義播放行爲</h3>
        <audio id="audio">
            <source src="vincent.ogg" />
            <source src="vincent.mp3" /> 你的瀏覽器不支持Audio標記
        </audio>
        <p>
            <button id="btnPlay">Play</button>
            <button id="btnPause">Pause</button>
        </p>
        <script>
            var audio = document.getElementById("audio")
            document.getElementById("btnPlay").addEventListener("click", function(){
                audio.play()
            })//給元素添加play的時間，控制播放。
            document.getElementById("btnPause").addEventListener("click", function(){
                audio.pause()暫停
            })
        </script>
    </section>

video實例：

<video width="400" height="300" controls id="video">
    <source src="dizzy.mp4#t=,15" type="video/mp4">
    <source src="dizzy.webm" type="video/webm">
    <source src="dizzy.ogv" type="video/ogg">
    <p>你的瀏覽器不支持HTML5視頻</p>
</video>

在video中，currentTime 屬性設置或返回音頻/視頻播放的當前位置（以秒計）。可以去設置播放時間位置。

2、新增內置API

2 訪問設備

2.1 定位地理位置 (navigator.geolocation)

if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success, error, options);
    } else {
      alert('您的瀏覽器不支持Geolocatioin!')
    }

2.2 調用攝像頭（getUserMedia）

//處理兼容
if(navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
        //調用用戶媒體設備
        getUseMedia({video:{width:480,height:320}},success,error)
      }else{
        alert("您的瀏覽器不支持訪問用戶媒體設備");
      };

2.3 方向傳感器(DeviceOrientationEvent)和運動傳感器(DeviceMotionEvent)

//方向事件
window.addEventListener('deviceorientation','orientationHandler',true)
//運動事件
window.addEventListener('devicemotion',motionHandler,true)

2.4 離線緩存
2.5 canvas
2.6 svg

3、通信

3.1 PostMessages解決跨域問題

在之前跨源或者窗口之間的通信通過服務器進行數據交互來實現，並且需要輪詢或者comet技術來監聽消息，HTML5提供了新型機制PostMessages來進行安全的跨源通信，瀏覽器同源是指協議（如HTTPS）、端口、域名相同，同時爲了用戶信息安全，瀏覽器在實現機制上使用同源策略進行限制，PostMessages具有靈活性和安全性等特點，實現了跨源之間的信息傳遞。
語法如下：

otherwWindow.postMessage(message,targetOrigin,[transfer])
otherwWindow：其他窗口的一個引用，如iframe的content.window屬性；
message：將要發送到其他窗口的數據
targetOrigin：通過窗口的origin屬性，制定那些窗口可以接受消息，值可以是*（表示無限制），或者一個URL
transfer：一串和message一起發送的transferable對象(可選)

實例：(html5/4-connection/postmessage)

3.2 ajax 無刷新獲取服務端數據，XMLHttpRequest
XMLHttpRequest level2版本，比一版本做出了大幅改進，包括了下面幾點：（xhr表示創建的實例）

·設置Http請求超時時間

xhr.timeout = 3000;//超時時間設置
xhr.ontimeout = ()=>{alert(‘超時’)}//超時時會發一個事件，可以在ontimeout接收處理

·使用FormData對象管理表單數據

var formData = new FormData();
formData.append(‘username’,’demon’);
xhr.send(formData)

上傳文件…
跨域請求，需要瀏覽器支持。。。
詳情見API
例子：(html5/4-connection/XMLHttpReauest)
3.3 Server Send Rvent 服務器向客戶端發送數據
3.4 WebSocket基於TCP鏈接的全雙工通信
實例創建：

var Socket = new WebSocket(url,[protocol])
url:制定鏈接的url
protocol：可選項，協議等
3.5 WebRTC實時通信

4 其他常用特性

4.1 History API與單頁應用
是我們常說的路由模式

4.1 Drag和Drop
HTML5提供專門的拖拽與拖放的API，

4.1 利用web workers 加速應用計算
4.1 利用performance API分析網站性能
如對淘寶網站進行分析：

各時間點說明：

1、navigationStart–>upload事件觸發
2、fetchStart–>開始獲取當前頁面內容（這兩步之間的時間差是瀏覽器內核爲加載新頁面做的準備）
3、查詢緩存（上一步和下一步之間的時間爲查詢緩存的時間）
4、domainLookupStart–>解析DNS開始
5、domainLookupEnd–>解析DNS結束（與上一步之間的時間點爲解析DNS所消耗的時間）
6、然後建立TCP連接（這一段時間爲建立TCP連接消耗的時間）
7、connectStart–>TCP連接開始
8、connectEnd–>TCP連接結束
9、requestStart–>開始發送請求內容至服務器端
10、服務器端接受請求，處理完畢，將響應返回給客戶端
11、responseStart–>開始發送響應
12、responseEnd–>響應結束，瀏覽器收到完整的響應的時候，觸發
13、domLoading–>DOM樹解析
14、domInteractive–>DOM 解析完成，dom構建完成，但是頁面依賴外部的資源還未加載，例如img、js等
15、domContentLoadedEventStart–>執行頁面腳本和加載外部資源
16、domContentLoadedEventEnd–>所有頁面加載完成後觸發
17、domComplete–>上面所有的步驟完成後，觸發，同時，會觸發暴露給開發者的load事件
18、loadEventStart–>執行發者註冊在load事件上的腳本
19、loadEventEnd–>所有開發者註冊在load事件上的腳本執行完畢

生命週期如下圖：