1.1art-template模板引擎
1、什么是HTML模板
?? HTML模板就是一段特定格式的HTML、CSS、JS代碼，程序根據(jù)這段代碼可以重復(fù)生成相同風(fēng)格的頁面元素。
2、什么是模板引擎（特指web開發(fā)）
?? 模板引擎是解析模板與數(shù)據(jù)最終生成標(biāo)準(zhǔn)的HTML文檔的一種機(jī)制
3、前端模板引擎art-template
?? art-template 是一個簡約、超快的模板引擎。瀏覽器版本僅 6KB 大小
1.2 art-template模板語法
標(biāo)準(zhǔn)語法：
{{if user}}
? <h2>{{user.name}}</h2>
{{/if}}
模板配套數(shù)據(jù)：
{
?? user:{name:'my name is art'}
}
1.3 art-template模板配套的數(shù)據(jù)格式
模板表達(dá)的意義：判斷如果 user對象存在，則輸出user對象中的name屬性值
{{if user}}
? <h2>{{user.name}}</h2>
{{/if}}
模板配套數(shù)據(jù)：
{
?? user:{name:'my name is art'}
}
1.4 art-template 解析模板與數(shù)據(jù)代碼
1.5 art-template常見語法
1.輸出標(biāo)準(zhǔn)語法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
2、條件判斷標(biāo)準(zhǔn)語法
{{if value}} ... {{/if}}
{{if value}} ... {{else}}...{{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
{{if v1}} ... {{else if v2}} ...{{else}}... {{/if}}
1.6 art-template常見語法
1、循環(huán)輸出
{{each target}}
? ? {{$index}}?? <!-- 輸出每次遍歷的 數(shù)組是下標(biāo)，對象是屬性名稱? -->
? ? {{$value}}? ? <!-- 輸出每次遍歷的 數(shù)組是下標(biāo)對應(yīng)的值，對象是屬性對應(yīng)的值 -->
{{/each}}
說明?。。?、target 支持 array 與 object 的迭代
? ? ? ? 2、$value 與 $index 可以自定義：{{each target val key}}
1.7 art-template常見語法
1.原文輸出：
{{@ value }}
2、配套的數(shù)據(jù)通常是html字符串
{ value : '<h2>這是art的值</h2>' }
額外：
contentType: false,// 告訴服務(wù)器 這個數(shù)據(jù)是文件 不是 普通的文本
processData: false,// 告訴jq 這個是文件 不是普通的文本
day4
1.1 jQuery文件上傳進(jìn)度功能
1、核心思路：
? 1、自定義帶有upload.onprogress 進(jìn)度處理邏輯的XMLHttpRequest對象
? 2、改變$.ajax方法內(nèi)部本身的XMLHttpRequest為帶有upload.onprogress 進(jìn)度處理邏輯的XMLHttpRequest對象
2、核心代碼
$.ajax({
? ?? xhr: function () {
? ?? let new_xhr = new XMLHttpRequest();
? ?? new_xhr.upload.onprogress = function (e) {
? ? ? ? ? ?? if(e.lengthComputable){ // 是否可計算長度
? ? ? ? ? ? ? ? ? ? e.loaded? //已經(jīng)上傳的長度
? ? ? ? ? ? ? ? ? ? e.total? // 要上傳的總長度
? ? ? ? ? ? ?? }? ? ? ? ? ? ? ? ? ? ? ?
? ? ? }
? ? ? ? return new_xhr;
? ? ? }})
2.1 xhr.timeout設(shè)置Ajax請求超時
1、什么是Ajax請求超時
?? 在指定時間內(nèi)服務(wù)器沒有響應(yīng)Ajax請求，那么這次請求即為超時，默認(rèn)是0，即沒有超時
2、異步對象請求超時處理
let xhr = new XMLHttpRequest();
xhr.open();
xhr.timeout = 500; // 表示服務(wù)器在500毫秒之內(nèi)沒有響應(yīng)則自動終止當(dāng)前ajax請求
xhr.send();
xhr.onload = function () {}
3.1 HTTP協(xié)議
目標(biāo)：了解Http協(xié)議的作用
HTTP：超文本傳輸協(xié)議（Hyper Text Transfer Protocol）
作用：規(guī)范了瀏覽器和服務(wù)器的數(shù)據(jù)交互格式
3.2 HTTP協(xié)議的請求報文
目標(biāo)：了解請求報文的格式
? 請求報文：客戶端向服務(wù)器發(fā)送請求時會攜帶一些基本信息過去，這些信息稱為請求報文
? 請求報文格式：請求報文需要遵守Http協(xié)議的特定格式，這個特定格式叫做請求報文格式
3.2 HTTP協(xié)議的請求報文格式
3.3 Http響應(yīng)狀態(tài)碼
HTTP狀態(tài)碼：由三個十進(jìn)制數(shù)字組成，第一個十進(jìn)制數(shù)字定義了狀態(tài)碼類型，后面兩個數(shù)字對狀態(tài)碼進(jìn)行了二級分類
3.4 常見響應(yīng)狀態(tài)碼說明
2**的狀態(tài)碼表示服務(wù)器已經(jīng)成功處理了請求，常見的狀態(tài)碼為200
3**的狀態(tài)碼，表示服務(wù)器要求客戶端進(jìn)行新的URL重定向，需要客戶端進(jìn)一步請求新URL才能完成資源的請求
4**的狀態(tài)碼，表示客戶端的請求有非法內(nèi)容導(dǎo)致本次請求失敗，常見的狀態(tài)碼有：
5**的狀態(tài)碼，表示服務(wù)器在處理客戶端請求時出現(xiàn)了錯誤，常見的狀態(tài)碼有：
4.1 IP地址
IP地址（Internet Protocol Address）是指互聯(lián)網(wǎng)協(xié)議地址，又譯為網(wǎng)際協(xié)議地址
格式：xxx.xxx.xxx.xxx 由4組數(shù)字組成
每一組數(shù)字取值范圍0-255包含0和255
每一組數(shù)字中間用點分割
IP地址作用：IP地址被用來給鏈接到網(wǎng)絡(luò)中的終端設(shè)備進(jìn)行編號，具有唯一性，多個設(shè)備之間通訊都是基于IP地址
通俗理解：IP地址好比電話號碼，每個電話都需要有一個號碼才能打電話，同樣的，一臺電腦或網(wǎng)絡(luò)設(shè)備需要一個IP地址才能進(jìn)行通信
IP地址的分類
公有地址（Public address）：通過它直接訪問因特網(wǎng)，例如：通過www.ip138.com查出來的地址
私有地址（局域網(wǎng)地址）：專門為組織機(jī)構(gòu)內(nèi)部使用，例如：192.168開頭的IP地址
代表本機(jī)地址： 127.0.0.1
4.2 端口
端口：英文是Port表示設(shè)備與外界通訊的出口，例如電腦QQ，微信，內(nèi)網(wǎng)通等軟件之間要進(jìn)行網(wǎng)絡(luò)通訊都需要用到端口
電腦會為這些軟件都分配一個端口。
通俗理解：電腦比作房子的話，那么端口就相當(dāng)于是出入這個房子的門
端口特點：
端口是通過端口號來標(biāo)記的，端口號是一個整數(shù)，取值范圍：0-65535
端口只能被一個軟件占用，如果其他軟件要使用相同的端口就會沖突
端口通常是配合IP或域名一起使用，例如：http://127.0.0.1:3001? ,www.baidu.com:80
常用端口：
www服務(wù)的默認(rèn)端口是80，一個url地址上如果不帶端口，那么默認(rèn)就是80，例如www.baidu.com 默認(rèn)就是80
FTP服務(wù)的默認(rèn)端口是21
5.1 同源
什么是同源？
在編程中所謂同源是指：同時滿足協(xié)議相同、域名(IP)相同、端口相同的兩個URL我們就認(rèn)為它們同源
舉例：我們有一個url： http://www.test.com:8080/pages/index.html
與之同源的url：
? ? http://www.test.com:8080/api/getlist
與之不同源的url：
? ? file:///C:/pages/index.html 不同源 (協(xié)議不同)
? ? https://www.test.com:8080/pages/index.html (協(xié)議不同)
? ? http://www.abc.com:8080/pages/index.html (域名不同)
? ? http://www.test.com/pages/index.html (端口不同，不填寫端口默認(rèn)是80)
5.2 同源策略
什么是同源策略？
? 瀏覽器中為了安全，在非同源的兩個地址中，瀏覽器會利用它的同源策略機(jī)制限制它們訪問一些數(shù)據(jù)
? ? 同源策略是瀏覽器本身的一種機(jī)制
限制訪問數(shù)據(jù)類型
Cookie、LocalStorage 等無法讀取
DOM 無法獲得
AJAX 請求在瀏覽器端有跨域限制
5.3 Ajax跨域錯誤
用ajax請求http://127.0.0.1:3001/getStudentsJSONP.js就會產(chǎn)生跨域錯誤提示
$.ajax({
? ? ? ? ? ? ? ? type: 'GET',
? ? ? ? ? ? ? ? url: 'http://127.0.0.1:3001/getStudentsJSONP.js'
? ? ?? })
5.4 Ajax跨域解決方案-JSONP
JSONP跨域：
JSONP所有瀏覽器均可以使用包括IE6
它只支持GET跨域請求，不支持POST跨域請求
JSOPN需要服務(wù)器的支持
JSONP不屬于Ajax請求
jQuery實現(xiàn)JSNOP跨域核心代碼:
$.ajax({
? ? ? ?? type: 'GET',
? ? ? ?? url: 'http://127.0.0.1:3001/getStudentsJSONP.js',? ? ? ? ? ? ? ? ? ? ?
? ? ? ?? dataType: 'jsonp', // 指定dataType類型為jsonp
})
JSONP實現(xiàn)的本質(zhì)：
通過在網(wǎng)頁上添加一個<script>元素去請求服務(wù)器地址
服務(wù)器將數(shù)據(jù)用函數(shù)+參數(shù)格式響應(yīng)回來
瀏覽器執(zhí)行函數(shù)，獲取參數(shù)即為數(shù)據(jù)
5.5 Ajax跨域解決方案-CORS
CORS是一個W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）
特點：
1.新式瀏覽器都支持該功能，IE瀏覽器不能低于IE10
2.CORS需要服務(wù)器支持
3.由后臺程序員在服務(wù)器做CORS設(shè)置即可
4.整個通信過程都是瀏覽器自動完成的，不需要前端工程師做任何介入
檢驗一個Api接口地址是否支持CORS跨域
1.打開瀏覽器調(diào)試工具進(jìn)入NetWork
2.查看響應(yīng)報文頭中如果有以下必選項的頭信息，則表示服務(wù)器開啟了CORS跨域
?? 1.Access-Control-Allow-Origin（必選）
?? 2.Access-Control-Allow-Credentials（可選）
?? 3.Access-Control-Expose-Headers（可選）
6.1 XML可擴(kuò)展標(biāo)記語言
XML：指可擴(kuò)展標(biāo)記語言，XML 被設(shè)計用來傳輸和存儲數(shù)據(jù)
XML格式舉例：
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<root>
? ? <items>
? ? ? ? <item>
? ? ? ? ? ? <id>4</id>
? ? ? ? ? ? <name>jodan</name>
? ? ? ? ? ? <age>21</age>
? ? ? ? ? ? <gender>男</gender>
? ? ? ? ? ? <zhuanye>ruby</zhuanye>
? ? ? ? ? ? <address>白云區(qū)</address>
? ? ? ? </item>
? ? </items>
</root>
6.2 jQuery請求接口獲取XML數(shù)據(jù)并解析
目標(biāo)：重點掌握通過jquery獲取響應(yīng)回來的數(shù)據(jù)方式
接口：http://127.0.0.1:3001/getUserNameXML 返回的數(shù)據(jù)是XML格式的
7.1 jQuery Ajax請求loading效果
loading效果的作用：
?? 如果網(wǎng)速較慢或者服務(wù)器響應(yīng)較慢的情況下，我們需要提示用戶正在請求數(shù)據(jù)，讓用戶感覺網(wǎng)頁是在工作的，提高使用體驗
$.ajax({
? ? beforeSend:function(XHR){}? // ajax發(fā)出請求前 彈出正在加載中
? ? complete:function(XHR){} // ajax請求完成后，關(guān)閉正在加載中提示
})
8.2 防抖-應(yīng)用
防抖在驗證用戶名是否可用案例上的應(yīng)用
案例：
// 1.0 防抖寫法步驟1：定義一個變量用來存儲setTimeout返回的句柄
? ? ? ? ? ? let time = null;
? ? ? ? ? ? $('#name').keydown(function () {
? ? ? ? ? ? ? ? // 3.0 判斷前一次的time如果有值，則清除本次settimeout的執(zhí)行
? ? ? ? ? ? ? ? if(time !=null){? clearTimeout(time); }
? ? ? ? ? ? ? ? // 2.0 給句柄賦值
? ? ? ? ? ? ? ? time = setTimeout(() => {
? ? ? ? ? ? ? ? ? ? $.ajax({ });
? ? ? ? ? ? ? ? },500)
? ? ? ? ? ? })
什么是節(jié)流？
在一定時間內(nèi)不管觸發(fā)多少次相同的事件，都只執(zhí)行第一次的事件
節(jié)流的核心代碼
// 1.0 定義變量
let timer = null;
// 2.0 如果timer不為空，則表示當(dāng)前有一個setTimeout的回調(diào)函數(shù)等待執(zhí)行，就不再設(shè)置新的setTimeout
if (timer) return;
timer = setTimeout(() => {
? ? // 4.0 執(zhí)行完畢以后，timer置空，表示下個時間段可以設(shè)置新的setTimeout處理邏輯
? ? timer = null;
}, 時間);
