移动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事件上的脚本执行完毕

生命周期如下图：