前端開發工程師 - 03.DOM編程藝術 - 第1章.基礎篇(下)

時間 2019-11-11

標籤前端開發工程師 03.dom dom 編程藝術基礎欄目 HTML 简体版

原文原文鏈接

第1章.基礎篇(下)

Abstract: 數據通訊、數據存儲、動畫、音頻與視頻、canvas、BOM、表單操做、列表操做javascript

數據通訊（HTTP協議）

HTTP事務：css

客戶端向服務器端發送HTTP請求報文；服務器端接收到HTTP請求報文後，通過處理，向瀏覽器返回一個包含事務結果的HTTP響應報文html

請求報文：前端

i.e.html5

請求行：GET music.163.com HTTP/1.1java

請求方法主機地址 HTTP版本mysql

請求頭：由不少鍵值對構成git

Accept：瀏覽器端可接受的媒體類型github

Accept-Encoding：瀏覽器端可接受的編碼方式web

Accept-Language：瀏覽器端可接受的語言類型

Cache-Control：瀏覽器端採起的cache緩存策略

Cookie：瀏覽器向服務器發出的Cookie值

User-Agent：當前瀏覽器的版本

請求體：因爲請求方法是GET，因此請求體爲空

響應報文：

i.e.

響應行：HTTP/1.1 200 OK

HTTP版本狀態碼狀態描述

響應頭：由不少鍵值對構成

Expires：設置的緩存到期時間

Server：服務器端使用的服務器

響應體：HTML文件

經常使用HTTP請求方法：

GET：從服務器獲取一份文檔（無請求體）

POST：向服務器發送須要處理的數據

PUT：將請求的主體部分存儲在服務器上

DELETE：從服務器上刪除一份文檔

HEAD：只從服務器獲取文檔的頭部

TRACE：對可能通過代理服務器傳送到服務器上去的報文進行追蹤

OPTIONS：決定能夠在服務器上執行哪些方法

URL的構成：

i.e. http:// www.163.com:8080 /index.html ?r=admin&lang=zh-CN #news

protocol host(hostname+port) pathname search hash (當前文檔的片斷)

HTTP版本：

HTTP/0.9 原型，1991年，不少設計缺陷

HTTP/1.0 第一個普遍應用的版本

HTTP/1.0+ 添加新特性，持久的keep-alive鏈接、虛擬主機支持、代理鏈接支持等，成爲非官方的標準

HTTP/1.1 當前版本：校訂告終構性缺陷、明確了語義、引入性能優化、刪除不良特性

常見HTTP狀態碼：

200：OK 請求成功，通常用於GET和POST

301：Moved Permanently 資源移動。所請求資源自動到新的URL，瀏覽器自動跳轉到新的URL

304：Not Modified 未修改。所請求資源未修改，瀏覽器直接讀取緩存數據

400：Bad Request 請求語法錯誤，服務器沒法理解

404：Not Found 未找到資源（可個性設置）

500：Internal Server Error 服務器內部錯誤

HTTP協議在前端開發中的應用：

Ajax：Asynchronous JavaScript and XML

如今並不僅能使用XML做爲數據交換格式，純文本、HTML、Jason也是可行的

Ajax通訊流程：

1. 建立一個Ajax對象XHR：

屬性：

readyState：初始時爲0，其餘兩個值爲空

status：

responseText：

2. 調用XHR的open()，開啓一個請求，XHR的readyState值變爲1

3. 調用XHR的send()，發送請求給服務器，readyState值變爲2

4. 服務器端返回響應，瀏覽器端接收到響應時，readyState值變爲3

5. 瀏覽器端結束該通訊時，readyState值變爲4，status值爲200(表示請求成功)，responseText屬性存入相應HTML文本

Ajax調用示例：

var xhr = new XMLHttpRequest();  // 建立XHR對象
xhr.onreadystatechange = function (callback) {
    // .onreadystatechange() 用於處理返回數據
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            // 返回碼爲正常（2開頭或304）
            callback(xhr.responseText);
        } else {
            alert('Request was unsuccessful: ' + xhr.status);
        }
    }
}

// 發送請求
xhr.open('get', 'example.json', true);
xhr.setRequestHeader('myHeader', 'myValue');
xhr.send(null);

執行順序：

1. new XMLHttpRequest(); 建立XHR對象

2. xhr.open(); xhr.setRequestHeader(); xhr.send() 發送請求

3. 監聽xhr.onreadystatechange()處理回調。當xhr.readyState屬性改變時，會觸發onreadystatechange事件。

也能夠監聽xhr.onload()事件：當xhr.readyState=4且xhr.status=200時會觸發onload()事件

API:

xhr.open(method, url [,async]);

method: http請求的方法(GET/POST等)；url: 請求的資源相對於當前文檔的路徑；async：開啓異步請求，默認爲true

請求參數序列化：

上例中的請求不帶有查詢參數，若想要向服務器端發送一個帶有查詢參數的請求：

將查詢參數做爲字符串跟在資源url以後

xhr.open('get', 'example.json?' + 'name1=value1&name2=value2', true);

但若是查詢參數是一個對象而非字符串呢？須要轉換爲字符串：

function serialize (data) {
    if(!data) return '';
    var pairs = [];
    for (var name in data) {
        if (!data.hasOwnProperty(name)) continue;
        if (typeof data[name] === 'function') continue;
        var value = data[name].toString();
        name = encodeURIComponent(name);
        value = encodeURIComponent(value);
        pairs.push(name + '=' + value);
    }
    return pairs.join('&');
}
var url = 'example.json?' + serialize(formdata);
// get請求
xhr.open('get', url, true);
// post請求
xhr.open('post', 'example.json', true);
xhr.send(serialize(formdata));

xhr.setRequestHeader(header, value); // 在請求頭中設置一些鍵值對（不是必要的）

header: 如"Content-Type"；value: 如"application/x-www-form-urlencoded...."

xhr.send([data = null]); // data爲向服務器發送的請求的請求體中的數據，能夠是String或FormData類型

同源策略：兩個頁面擁有相同的協議、端口和主機，則這兩個頁面就屬於同一個源(origin)

跨域資源訪問：不知足同源策略的資源訪問，則爲跨域資源訪問

W3C定義了CORS的規則，實現了跨域資源的訪問

CORS: http://www.w3.org/TR/cors/

其餘跨域技術：Frame代理、JSONP、Comet、Web Sockets等

Frame代理：https://github.com/genify/nej/blob/master/doc/AJAX.md

JSONP (JSON with padding 填充式JSON)

利用了<script>能夠跨域的特性，向服務器端請求一段js代碼，實現跨域的過程

function handleResponse(response) {
    alert ('My name is ' + response.name);
}
var script = document.createElement('script');
script.src = 'http:127.0.0.1:3000/json?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);

服務器json.js:
handleResponse(
    {name:'NetEase'}
)

課堂交流區：

Ajax請求GET方法的封裝

方法 get(url, options, callback)

參數

- url {String} 請求資源的url
- options {Object} 請求的查詢參數
- callback {Function} 請求的回調函數，接收XMLHttpRequest對象的responseText屬性做爲參數

返回 void

舉例

get(‘/information’, {name: ‘netease’, age: 18}, function (data) {

console.log(data);

});

描述方法get(url, options, callback) 是對Ajax請求GET方法的封裝。請寫出get方法的實現代碼。

答：見下

Ajax請求POST方法的封裝

post函數是對Ajax的POST請求的封裝，語法以下：

post(url, options, callback)

沒有返回值，參數說明以下：

url：請求資源的url，String類型

options：請求的查詢參數，Object類型

callback：回調函數，接收XMLHttpRequest對象的responseText屬性做爲參數，Function類型

使用示例以下：

post('/addUser', {name: 'jerry', age: 1}, function(data) {

// 處理返回數據

});

請寫出post函數的實現代碼，要求瀏覽器兼容。

答：

http://blog.csdn.net/qq_21794603/article/details/72770877

http://www.jianshu.com/p/877c6c7e142e

數據存儲 (cookie & storage)

cookie由鍵值對構成，鍵值對之間用"; "來隔開

cookie在服務器端設置後，存儲在瀏覽器端

經過響應頭中的Set-Cookie來設置

打開瀏覽器developer tools->Resources->左邊Cookies可查看cookie信息

cookie屬性：

Name (必填)

Value (必填)

Domain：做用域，默認爲當前文檔域

做用域：

i.e. 設做用路徑爲/

若某cookie的domain爲news.163.com，當瀏覽器訪問news.163.com服務器時，會帶上該cookie

當cookie的domain爲.163.com時，瀏覽器訪問news.163.com或sports.163.com，均會帶上該cookie

Path：做用路徑，默認爲當前文檔路徑

做用路徑：

i.e. 設做用域爲www.163.com

當某cookie爲/a時，當瀏覽器訪問www.163.com/a時，會帶上該cookie

當某cookie爲根目錄/時，當瀏覽器訪問www.163.com/a或www.163.com/b時，均會帶上該cookie

Expires/Max-Age：失效時間，默認爲瀏覽器會話時間

Secure：只有當協議爲https時才生效，默認爲false

轉換cookie爲JS對象：

function getcookie () {
    var cookie = {};
    var all = document.cookie;
    if (all === '')
        return cookie;
    var list = all.split('; ');
    for (var i = 0; i < list.length; i++) {
        var item = list[i];
        var p = item.indexOf('=');
        var name = item.substring(0, p);
        name = decodeURIComponent(name);
        var value = item.substring(p + 1);
        value = decodeURIComponent(value);
        cookie[name] = value;
    }
    return cookie;
}

cookie的增刪查改：

設置/修改：

方法1. 直接修改 document.cookie = 'name=value';

方法2. 封裝setCookie

function setCookie (name, value, expires, path, domain, secure) {
    var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires) cookie += '; expires=' + expires.toGMTString();
    if (path) cookie += '; path=' + path;
    if (domain) cookie += '; domain=' + domain;    
    if (secure) cookie += '; secure=' + secure;
    document.cookie = cookie;
}

刪除：name, path, domain能夠惟一標識一個cookie，再將其max-age設爲0便可

function removeCookie (name, path, domain) {
    document.cookie = name + '=' + '; path=' + path + '; domain=' + domain + '; max-age=0';
}

cookie的缺陷：

流量代價：只要知足做用域做用路徑的地址，都會帶上cookie

安全性：cookie是明文傳遞的

大小限制：4k大小左右

因爲cookie的這些缺陷，提供了cookie的替代方案storage：

storage：

在developer tools中的Cookies上面還有兩個選項：Local Storage和Session Storage

localStorage

sessionStorage

有效期：

localStorage：默認爲永久

sessionStorage：默認爲會話時間

做用域：

localStorage：協議、主機名、端口

sessionStorage：協議、主機名、端口、窗口 -- 瀏覽器不一樣窗口之間不共享sessionStorage

大小：不一樣瀏覽器的實現不一樣，大部分都是5MB

每次使用時都會將其載入到內存中，對內存有不小壓力 -- 不要設置過大的數據

JS對象：能夠將storage理解爲一個對象

讀取：localStorage.name

添加/修改：localStorage.name = "...";

刪除：delete localStorage.name

目前爲止瀏覽器支持的storage值類型爲字符串String

API (W3C): 增刪查改

使用API的好處：向下兼容。若是瀏覽器不支持storage，則會進行cookie的模擬實現

localStorage.length // 獲取鍵值對數量

localStorage.getItem("key"); // key爲鍵，讀取對應值

localStorage.key(i); // i 爲index，0<=i<=length

localStorage.setItem("key", "value"); // 添加/修改

localStorage.removeItem("key"); // 刪除

localStorage.clear(); // 清空全部數據

動畫

幀：動畫裏的最小單位，爲靜態圖像

幀頻：每秒播放的幀數

前端動畫實現方式：

gif：以圖像方式存儲，缺點容量大、須要藉助第三方製圖工具來製做

flash：前幾年很是流行，可是也須要藉助第三方工具製做，並且如今也不是大衆選擇了

CSS3：侷限性

JS：能夠實現大部分動畫

JS動畫三要素：

對象：DOM對象

屬性：對象的屬性，如width height opacity等

定時器：

setInterval：每隔必定時間執行一次，調用一次就能夠實現連貫的動畫，直到動畫結束調用clearInterval()清除動畫便可

var intervalID = setInterval(func, delay [, param1, param2, ...])

func：執行改變屬性的操做

delay：觸發定時器的時間間隔，單位毫秒

params：執行func時做爲參數傳入

clearInterval(intervalID); // 刪除

setTimeout：在觸發以後只執行一次，每一幀結束須要從新調用該定時器才能使動畫繼續

var timeoutID = setTimeout(func, [delay, param1, param2, ...])

delay：是可選的，默認爲0，表示定時器當即觸發

clearTimeout(timeoutID); // 刪除

requestAnimationFrame：與setTimeout相近，是HTML的一個新的標準，區別是間隔時間由顯示器刷新頻率控制

好處：不用關心間隔時間delay，比前兩個定時器（可能掉幀）作出的動畫更流暢

var requestID = requestAnimationFrame(func);

cancelAnimationFrame(requestID); // 刪除

前端常見動畫：

形變、位移、旋轉、透明度等

動畫實現：實例（以px爲單位）

var animation = function (ele, attr, from, to) {
    var distance = Math.abs(to - from);    // 距離
    var stepLength = distance/100;    // 每一步的距離
    var sign = (to - from)/distance;    // 方向
    var offset = 0;
    var step = function() {
        // 改變屬性值
        var tmpOffset = offset + stepLength;
        if (tmpOffset < distance) {
            ele.style[attr] = from + tmpOffset * sign + 'px';  // 每次加上一個步長
            offset = tmpOffset;
        } else {
            ele.style[attr] = to + 'px';  // 達到距離目標，置於最後一幀的狀態
            clearInterval(intervalID);
        }
    }
    ele.style[attr] = from + 'px';
    var intervalid = setInterval(step, 10);  // 每10ms觸發一次step函數
}

動畫實現：實例 -- 圖片輪播

進度條：形變更畫--改變寬度

//進度條動畫
var process = function (prcsswrap, drtn, intrvl, callback) {
    // prcsswrap爲對象父元素，drtn爲進度條時間，intrvl爲定時器時間間隔，callback爲回調函數
    var width = prcsswrap.clientWidth;
    var prcss = prcsswrap.getElementsByClassName('prcss')[0];  // 獲取當前對象
    var count = drtn/intrvl;
    var offset = Math.floor(width/count);
    var tmpCurrent = CURRENT;
    var step = function () {
        // 修改屬性值
        if (tmpCurrent !== CURRENT) {
            prcss.style.width = '0px';
            if(intervalId){
                clearInterval(intervalId);
            }
            return;
        }
        var des = getNum(prcss.style.width) + offset;
        if (des < width) {  // 若當前值+位移值 小於 目的值 -- 正常執行
            prcss.style.width = getNum(prcss.style.width) + offset + 'px';
        } else if (des = width) {  // 動畫已經完成
            clearInterval(intervalId);  // 清除定時器
            // 初始化操做
            prcss.style.width = '0px';
            PREV = CURRENT;
            CURRENT = NEXT;
            NEXT++;
            NEXT = NEXT%NUMBER;
            // 回調
            if (callback)
                callback();
        } else {
            // 若是超過了目的值，不是預期效果，直接將當前值設爲目的地值（下一次執行就會進入else if()）
            prcss.style.width = width + 'px';
        }
    }
    var intervalId = setInterval(step, intrvl); // 觸發定時器
};

圖片切換：位移動畫

//位移動畫
var animation = function (ele, from, to, callback) {
    var distance = Math.abs(to - from);
    var cover = 0;
    var symbol = (to - from)/distance;
    var stepLength = Math.floor((distance*STEP)/SPEED);
    var step = function () {
        var des = cover + stepLength;
        if (des < distance) {
            cover += stepLength;
            ele.style.left = getNum(ele.style.left) + stepLength*symbol + 'px';
        } else {
            clearInterval(intervalId);
            ele.style.left = to + 'px';
            if (callback)
                callback();
        }
    }
    var intervalId = setInterval(step, STEP);
}

音頻與視頻

多媒體和圖形編程：多媒體 audio/video; 圖形編程 canvas

主流audio格式：mp3/wav/ogg；

支持格式沒有肯定，由各瀏覽器廠商本身實現，須要實現兼容用法

<audio>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.wav" type="audio/x-wav">
    <source src="music.ogg" type="audio/ogg">
</audio>

type爲可選屬性，幫助瀏覽器更快解碼

<video>
    <source src="movie.webm" type="video/webm; codecs='vp8, vorbis'">
    <source src="movie.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.e'">
</video>

多媒體格式兼容性：

音頻：http://en.wikipedia.org/wiki/HTML5_Audio#Supported_audio_coding_formats

視頻：http://en.wikipedia.org/wiki/HTML5_video#Browser_support

var a = new Audio(); a.canPlayType('audio/nav'); // 確認瀏覽器是否支持該格式的音視頻文件，若支持會返回"maybe"或「probably"; 不然返回""

可是瀏覽器沒有實現視頻的構造函數，所以只能經過獲取瀏覽器上的視頻元素來調用canPlayType()

屬性：

HTML屬性：

audio和video除了在界面上顯示不同，大部分的屬性和方法是同樣的

src：URL（必須項）

controls：是否向用戶顯示控件，默認爲false

autoplay：是否在就緒後立刻播放，默認false

preload：可取值"none"不預加載/"metadata"只預加載媒體源信息/"auto"預加載資源信息，默認爲none

該屬性與autoplay屬性是衝突的，若是設置了preload，則autoplay就失效了

loop：是否循環播放，默認爲false

控制播放：

load() 加載媒體內容

play() 開始播放

pause() 暫停播放

playbackRate 播放速度（0-1爲慢速，1爲正常速度，>1爲快速播放）

currentTime 播放進度，以秒爲單位

volume 音量

muted 是否靜音

只讀屬性：

paused 是否爲暫停狀態

seeking 是否正在跳轉

ended 是否播放完成

duration 媒體時長

initialTime 媒體開始時間

常見事件：

loadstart：開始加載媒體內容時觸發

loadmetadata：媒體元數據已經加載完成時觸發

canplay：是否已加載部份內容，能夠開始播放時觸發

play：調用play()時觸發，或設置了autoplay，頁面就緒時觸發

waiting：緩衝數據不夠，播放暫停時觸發

playing：正在播放中觸發

其餘事件：多媒體相關事件列表：http://www.w3.org/wiki/HTML/Elements/audio#Media_Events

Web Audio API：高級工具

W3C官方定義：http://webaudio.github.io/web-audio-api/

mozilla官方教程：https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

第三方教程：http://www.html5rocks.com/en/tutorials/webaudio/intro/,http://webaudioapi.com/

canvas

基本用法：<canvas id="xxx" width="300" height="150"></canvas>

寬高的默認值爲300*150，建議直接在JS中指定寬高，由於CSS和JS在渲染速度上不一致，可能會致使問題

渲染上下文：

var ctx = canvas.getContext('2d'); // ctx爲返回的渲染上下文的對象

golbalCompositeOperation：

在畫每一幀圖像以前，可能須要設置ctx.globalCompositeOperation = 'destination-over';

值：

source-over：均顯示，後者覆蓋前者

source-in：只顯示後者圖層，顯示區域爲前者

source-out：只顯示後者圖層，顯示區域爲前者所在以外的區域

source-atop：均顯示，顯示區域爲前者

destination-over; destination-in; destination-out; destinaion-atop;

lighter; darker; copy; xor

每一幀繪圖的步驟：

實例：太陽系動畫

元素：

灰色矩形：地球上太陽背光的陰影

地球、月亮、太陽

地球運行的軌道

背景

實現代碼：

var sun = new Image();
var moon = new Image();
var earth = new Image();

function init() {
    // 三個image對象加載圖片到內存裏
    sun.src = 'sun.png';
    moon.src = 'moon.png';
    earth.src = 'earth.png';
    window.requestAnimationFrame(draw);  // 定時器
}

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');

    ctx.globalCompositeOperation = 'destination-over';  // 後畫的在下面
    ctx.clearRect(0, 0, 300, 300);  // clear canvas，清空區域爲0,0,300,300正方形區域
    
    ctx.fillStyle = 'rgba(0,0,0,0.4)';
    ctx.strokeStyle = 'rgba(0,153,255,0.4)';
    ctx.save();  // 保存畫布狀態
    ctx.translate(150, 150);
    
    // Earth
    var time = new Date();
    ctx.rotate(((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds());
    ctx.translate(105, 0);
    ctx.fillRect(0, -12, 50, 24);  // Shadow
    ctx.drawImage(earch, -12, -12);

    // Moon
    ctx.rotate(((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds());
    ctx.translate(0,28.5);
    ctx.drawImage(moon, -3.5, -3.5);
    
    ctx.restore();  // 恢復畫布狀態
    ctx.beginPath()'
    ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
    ctx.stroke();
    
    ctx.drawImage(sum, 0,0,300,300);

    window.requestAnimationFrame(draw);
}

詳細canvas教程：Mozilla官方教程：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

課堂交流區：

1. 目前市面上有哪些比較有名的基於canvas的引擎，他們各有什麼特色，合適作什麼應用？

Laro：是一個基於html5 canvas的用於平面2d或者2.5d遊戲製做的輕量級遊戲引擎。
特色：快速、輕量
應用：輕量級遊戲
X-Canvas：是一款跨平臺的HTML5遊戲引擎。
特色：一次開發，跨平臺運行
應用：手機遊戲開發
CutJS：一款專門用於跨平臺遊戲開發的開源2D HTML5渲染引擎
特色：輕量級、快速、可交互
應用：跨平臺的遊戲開發
cocos2djs:一個遊戲框架。國人開發。
特色:從cocos2d-x轉過來的。各類api普遍。
應用：遊戲開發

ref: http://www.jianshu.com/p/d13aa3718f66

2. 用canvas畫一個圓

在一個300*300的canvas（id爲「myCanvas「）上，以座標點（150, 150）爲圓心，100爲半徑，畫一個邊框色爲#4d4e53，填充色爲#6a83ff的圓。

http://blog.csdn.net/qq_21794603/article/details/72780838

BOM

表單操做

列表操做

基礎篇的單元測驗

本次得分爲： 74.33/90.00, 本次測試的提交時間爲： 2017-09-03, 若是你認爲本次測試成績不理想，你能夠選擇再作一次。

http://www.jianshu.com/p/f5ea21a1646e

基礎篇的單元做業

http://www.jianshu.com/p/86377f675b85

3（10分）

函數fadeout(element)實現了元素的淡出效果（即透明度從1變到0），動畫時間爲1秒鐘。用定時器setInterval實現動畫，寫出函數fadeout的實現代碼：

<script type="text/javascript">
    var fadeout = function (element) {
        var startOpacity = 1;
        var finalOpacity = 0;
        var currentOpacity = startOpacity;
        var totalTimes = 1000/10; // total times invoked
        var step = function () {
            var stepOpacity = (finalOpacity - startOpacity)/totalTimes;
            currentOpacity += stepOpacity;
            if (currentOpacity > finalOpacity) {
                console.log(element.style.opacity);
                element.style.opacity = currentOpacity;
            } else if (currentOpacity == finalOpacity) {
                clearInterval(intervalID);
            } else {
                currentOpacity = finalOpacity;
                element.style.opacity = currentOpacity;
            }
        }
        var intervalID = setInterval(step, 10);
    }
</script>