亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

摘要：日前，筆者拿到一本有國(guó)內(nèi)知名團(tuán)隊(duì)iKcamp團(tuán)隊(duì)著作的書籍，在對(duì)書籍的閱讀過(guò)程當(dāng)中，發(fā)現(xiàn)許多知識(shí)，不能準(zhǔn)確的描述出來(lái)，于是邊啃書，邊對(duì)里面提到的東西進(jìn)行梳理，以鞏固前端知識(shí)，作為自己查閱所用。并且在學(xué)習(xí)中了解新的知識(shí)。(github倉(cāng)庫(kù)為https://github.com/fanyang123/Web_Ksc)

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

HTML5

1、html5常用特性

1.1 在html5中，采用了更加語(yǔ)義化的標(biāo)簽 

Header、nav、srticle、section、aside、footer，分別表示頭部、導(dǎo)航、主題內(nèi)容、重要的部分、重要的部分、底部等語(yǔ)義化標(biāo)簽。

1.2表單增強(qiáng)應(yīng)用 

input的type屬性擴(kuò)展：html5中增加了以下的屬性。

search->展現(xiàn)一個(gè)搜索框 

tel->電話號(hào)碼，可以使用pattern和maxlength限定格式，pattern=”1[3-8][0-9]{9}” 

url->地址 

email->郵件 

date->日期 

color->輸入顏色 

number->輸入數(shù)字 

range->滑塊輸入

input還可以通過(guò)屬性進(jìn)行表單驗(yàn)證，通過(guò)required標(biāo)記為必填元素，使用pattern進(jìn)行驗(yàn)證。 

其他屬性：

autofocus->頁(yè)面加載的時(shí)候，自動(dòng)聚焦 

form->將input輸入元素和特定的form表單關(guān)聯(lián) 

placeholder->輸入占位符。

1.3其他新增加的元素：

progress->表示進(jìn)度條， 

meter->表示標(biāo)尺，max為最大值，默認(rèn)為1，min為最小值，value為標(biāo)尺的值。 

特殊屬性：contenteditable=”表示可以編輯”。

1.4視頻video和音頻audio 

所包含的屬性：

controls->控制是否顯示控制條 

autoplay->是否自動(dòng)播放，默認(rèn)為false 

loop->是否循環(huán)播放 

preload->預(yù)加載

audio示例：

<section>

        <h3>自定義播放行為</h3>

        <audio id="audio">

            <source src="vincent.ogg" />

            <source src="vincent.mp3" /> 你的瀏覽器不支持Audio標(biāo)記

        </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的時(shí)間，控制播放。

            document.getElementById("btnPause").addEventListener("click", function(){

                audio.pause()暫停

            })

        </script>

    </section>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

video實(shí)例：

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

1

2

3

4

5

6

在video中，currentTime 屬性設(shè)置或返回音頻/視頻播放的當(dāng)前位置（以秒計(jì)）?？梢匀ピO(shè)置播放時(shí)間位置。

2、新增內(nèi)置API

2 訪問(wèn)設(shè)備

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

if (navigator.geolocation) {

      navigator.geolocation.getCurrentPosition(success, error, options);

    } else {

      alert('您的瀏覽器不支持Geolocatioin!')

    }

1

2

3

4

5

2.2 調(diào)用攝像頭（getUserMedia）

//處理兼容

if(navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){

        //調(diào)用用戶媒體設(shè)備

        getUseMedia({video:{width:480,height:320}},success,error)

      }else{

        alert("您的瀏覽器不支持訪問(wèn)用戶媒體設(shè)備");

      };

1

2

3

4

5

6

7

2.3 方向傳感器(DeviceOrientationEvent)和運(yùn)動(dòng)傳感器(DeviceMotionEvent)

//方向事件

window.addEventListener('deviceorientation','orientationHandler',true)

//運(yùn)動(dòng)事件

window.addEventListener('devicemotion',motionHandler,true)

1

2

3

4

2.4 離線緩存 

2.5 canvas 

2.6 svg

3、通信

3.1 PostMessages解決跨域問(wèn)題

在之前跨源或者窗口之間的通信通過(guò)服務(wù)器進(jìn)行數(shù)據(jù)交互來(lái)實(shí)現(xiàn)，并且需要輪詢或者comet技術(shù)來(lái)監(jiān)聽(tīng)消息，HTML5提供了新型機(jī)制PostMessages來(lái)進(jìn)行安全的跨源通信，瀏覽器同源是指協(xié)議（如HTTPS）、端口、域名相同，同時(shí)為了用戶信息安全，瀏覽器在實(shí)現(xiàn)機(jī)制上使用同源策略進(jìn)行限制，PostMessages具有靈活性和安全性等特點(diǎn)，實(shí)現(xiàn)了跨源之間的信息傳遞。 

語(yǔ)法如下：

otherwWindow.postMessage(message,targetOrigin,[transfer]) 

otherwWindow：其他窗口的一個(gè)引用，如iframe的content.window屬性； 

message：將要發(fā)送到其他窗口的數(shù)據(jù) 

targetOrigin：通過(guò)窗口的origin屬性，制定那些窗口可以接受消息，值可以是*（表示無(wú)限制），或者一個(gè)URL 

transfer：一串和message一起發(fā)送的transferable對(duì)象(可選)

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

3.2 ajax 無(wú)刷新獲取服務(wù)端數(shù)據(jù)，XMLHttpRequest 

XMLHttpRequest level2版本，比一版本做出了大幅改進(jìn)，包括了下面幾點(diǎn)：（xhr表示創(chuàng)建的實(shí)例）

·設(shè)置Http請(qǐng)求超時(shí)時(shí)間

xhr.timeout = 3000;//超時(shí)時(shí)間設(shè)置 

xhr.ontimeout = ()=>{alert(‘超時(shí)’)}//超時(shí)時(shí)會(huì)發(fā)一個(gè)事件，可以在ontimeout接收處理

·使用FormData對(duì)象管理表單數(shù)據(jù)

var formData = new FormData(); 

formData.append(‘username’,’demon’); 

xhr.send(formData)

上傳文件… 

跨域請(qǐng)求，需要瀏覽器支持。。。 

詳情見(jiàn)API 

例子：(html5/4-connection/XMLHttpReauest) 

3.3 Server Send Rvent 服務(wù)器向客戶端發(fā)送數(shù)據(jù) 

3.4 WebSocket基于TCP鏈接的全雙工通信 

實(shí)例創(chuàng)建：

var Socket = new WebSocket(url,[protocol]) 

url:制定鏈接的url 

protocol：可選項(xiàng)，協(xié)議等 

3.5 WebRTC實(shí)時(shí)通信

4 其他常用特性

4.1 History API與單頁(yè)應(yīng)用 

是我們常說(shuō)的路由模式

4.1 Drag和Drop 

HTML5提供專門的拖拽與拖放的API，

4.1 利用web workers 加速應(yīng)用計(jì)算 

4.1 利用performance API分析網(wǎng)站性能 

如對(duì)淘寶網(wǎng)站進(jìn)行分析： 

各時(shí)間點(diǎn)說(shuō)明：

1、navigationStart–>upload事件觸發(fā) 

2、fetchStart–>開始獲取當(dāng)前頁(yè)面內(nèi)容（這兩步之間的時(shí)間差是瀏覽器內(nèi)核為加載新頁(yè)面做的準(zhǔn)備） 

3、查詢緩存（上一步和下一步之間的時(shí)間為查詢緩存的時(shí)間） 

4、domainLookupStart–>解析DNS開始 

5、domainLookupEnd–>解析DNS結(jié)束（與上一步之間的時(shí)間點(diǎn)為解析DNS所消耗的時(shí)間） 

6、然后建立TCP連接（這一段時(shí)間為建立TCP連接消耗的時(shí)間） 

7、connectStart–>TCP連接開始 

8、connectEnd–>TCP連接結(jié)束 

9、requestStart–>開始發(fā)送請(qǐng)求內(nèi)容至服務(wù)器端 

10、服務(wù)器端接受請(qǐng)求，處理完畢，將響應(yīng)返回給客戶端 

11、responseStart–>開始發(fā)送響應(yīng) 

12、responseEnd–>響應(yīng)結(jié)束，瀏覽器收到完整的響應(yīng)的時(shí)候，觸發(fā) 

13、domLoading–>DOM樹解析 

14、domInteractive–>DOM 解析完成，dom構(gòu)建完成，但是頁(yè)面依賴外部的資源還未加載，例如img、js等 

15、domContentLoadedEventStart–>執(zhí)行頁(yè)面腳本和加載外部資源 

16、domContentLoadedEventEnd–>所有頁(yè)面加載完成后觸發(fā) 

17、domComplete–>上面所有的步驟完成后，觸發(fā)，同時(shí)，會(huì)觸發(fā)暴露給開發(fā)者的load事件 

18、loadEventStart–>執(zhí)行發(fā)者注冊(cè)在load事件上的腳本 

19、loadEventEnd–>所有開發(fā)者注冊(cè)在load事件上的腳本執(zhí)行完畢

生命周期如下圖： 

---------------------