在物件的原型上新增方法？
1.瞭解同源策略和跨域
1.1同源策略
1.什麼是同源
如果兩個頁面的協議，域名和埠都相同，則兩個頁面具有相同的源。
2.什麼是同源策略
同源策略是瀏覽器提供的一個安全功能
通俗的說就是瀏覽器規定A網站的JavaScript不允許和非同源的網站C之間進行資源互動。
1.無法讀取非同源網頁的Cookie、LocalStorage和IndexedDB
2.無法接觸非同源網也的DOM
3.無法向非同源地址傳送Ajax請求
1.2跨域
1.什麼是跨域
同源值的是兩個URL的協議、域名和埠一致，反之、則是跨域
出現跨域的根本原因：瀏覽器的同源策略不允許非同源的URL之間進行資源的互動。
2.瀏覽器對跨域請求的攔截
注意：瀏覽器允許發起跨域請求，但是，跨域請求回來的資料，會被瀏覽器攔截，無法被頁面獲取到！
3.如何實現跨域資料請求
現如今，實現跨域資料請求，最主要的兩種方案，分別是JSONP和CORS。
JSONP：出現的早，相容性好，是前端程式設計師為了解決跨域問題，被迫想出來的一種臨時解決方案。缺點是隻支援GET請求，不支援POST請求。
CORS：出現的較晚，他是W3C標準，屬於跨域Ajax請求的根本解決方案。支援GET和POST請求，缺點是不相容某些低版本的瀏覽器。
2.JSONP
2.1什麼是JSONP
JSONP是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域資料訪問的問題
2.2 JSONP的實現原理
由於瀏覽器同源策略的限制，網頁中無法通過Ajax請求非同源的介面資料。但是<script>標籤不受瀏覽器同源策略的影響，可以通過src屬性，請求非同源的js指令碼。
因此，JSONP的實現原理，就是通過<script>標籤的src屬性，請求跨域的資料介面，並通過函式呼叫的形式，接收跨域介面響應回來的資料。
2.3自己實現一個簡單的JSONP
定義一個success回撥函式：
通過<script>標籤，請求介面資料：
2.4JSONP的缺點
由於JSONP是通過<script>標籤的src屬性，來實現跨域資料獲取的，所以，JSONP只支援GET資料請求，不支援POST請求
注意：JSONP和Ajax之間沒有任何關係，不能把JSONP請求資料的方式叫做Ajax，因為JSONP沒有用到XMLHttpRequest這個物件
2.5jQuery中的JSPNP
jQuery提供了$.ajax()函式，除了可以發起真正的Ajax資料請求之外，還能夠發起JSONP資料請求
在預設情況下，使用jQuery發起的JSONP請求，會自動攜帶一個callback=jQueryxxx的引數，jQuery是隨機生成的一個回撥函式名稱
2.6自定義引數及回撥函式名稱
在使用jQuery發起JSONP請求時，如果想要自定義JSONP的引數以及回撥函式，可以通過下面兩種方式來指定:
2.7jQuery中JSONP的實現過程
jQuery中的JSONP，也是通過<script>標籤的src屬性實現跨域資料訪問，只不過，jQuery採用的是動態建立和移除<script>標籤方式來發起JSONP資料請求
在發起JSONP請求的時候，動態向<header>中append一個<script>標籤
在JSONP請求成功以後，動態從<heaber>中移除剛才append進去的<script>標籤
3.案例-淘寶搜尋
3.1需要實現的UI效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <!-- 匯入頁面的基本樣式 --> <link rel="stylesheet" href="./css/search.css" /> <!-- 匯入 jQuery --> <script src="./lib/jquery.js"></script> </head> <body> <div class="container"> <!-- Logo --> <img src="./images/taobao_logo.png" alt="" class="logo" /> <div class="box"> <!-- tab 欄 --> <div class="tabs"> <div class="tab-active">寶貝</div> <div>店鋪</div> </div> <!-- 搜尋區域（搜尋框和搜尋按鈕） --> <div class="search-box"> <input type="text" class="ipt" placeholder="請輸入要搜尋的內容" /><button class="btnSearch"> 搜尋 </button> </div> </div> </div> </body> </html>
3.2獲取使用者輸入的搜尋關鍵詞
為了獲取到使用者每次按下鍵盤所輸入內容，需要監聽輸入框的keyup事件，示例程式碼如下
3.3封裝getSuggestList函式
將獲取搜尋建議列表的程式碼，封裝到getSuggestList函式中，程式碼結構如下
function getSuggestList(kw) { $.ajax({ url: 'https://suggest.taobao.com/sug?q=' + kw, dataType: 'jsonp', success: function (res) { console.log(res); } }) }
3.4渲染建議列表的UI結構
1.定義搜尋建議列表
2.定義模板結構
3.定義渲染模板結構的函式
4.搜尋關鍵詞為空時隱藏搜尋建議列表
3.5輸入框的防抖
1.什麼是防抖
防抖策略（debounce）是當事件被觸發後，延遲n秒後在執行回撥，如果在這n秒內事件又被觸發，則重新計時
2.防抖的應用場景
使用者在輸入框中連續輸入一串字元時，可以通過防抖策略，只在輸入完成後，才執行查詢的請求，這樣可以有效減少請求次數，節約資源；
3.實現輸入框防抖
3.6快取搜尋的建議列表
1.定義全域性快取物件
2.將搜尋結果儲存到快取物件中
3.優先從快取中獲取搜尋建議
案例全部程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <!-- 匯入頁面的基本樣式 --> <link rel="stylesheet" href="./css/search.css" /> <!-- 匯入 jQuery --> <script src="./lib/jquery.js"></script> <script src="/lib/template-web.js"></script> </head> <body> <div class="container"> <!-- Logo --> <img src="./images/taobao_logo.png" alt="" class="logo" /> <div class="box"> <!-- tab 欄 --> <div class="tabs"> <div class="tab-active">寶貝</div> <div>店鋪</div> </div> <!-- 搜尋區域（搜尋框和搜尋按鈕） --> <div class="search-box"> <input type="text" id="ipt" class="ipt" placeholder="請輸入要搜尋的內容" /><button class="btnSearch"> 搜尋 </button> </div> <!-- 搜尋建議列表 --> <div id="suggest-list"> </div> </div> </div> <!-- 模板引擎結構 --> <script type="text/html" id="tpl-suggestList"> {{each result}} <!-- 搜尋建議項 --> <div class="suggest-item">{{$value[0]}}</div> {{/each}} </script> <script> $(function () { // 1.定義延時器的ID let timer = null // 定義全域性快取物件 let cacheObj = {} // 2.定義防抖的函式 function debounceSearch(kw) { timer = setTimeout(function () { getSuggestList(kw); }, 500) } // 為輸入框繫結keyup事件 $('#ipt').on('keyup', function () { // 3.清空 timer let keywords = $(this).val().trim(); if (keywords.length <= 0) { return $("#suggest-list").empty().hide() } // 先判斷快取中是否有資料 if (cacheObj[keywords]) { return renderSiggestList(cacheObj[keywords]) } // TODO:獲取搜尋建議列表 // console.log(keywords); // getSuggestList(keywords); debounceSearch(keywords) }) function getSuggestList(kw) { $.ajax({ url: 'https://suggest.taobao.com/sug?q=' + kw, dataType: 'jsonp', success: function (res) { // console.log(res); renderSiggestList(res) } }) } // 渲染UI結構 function renderSiggestList(res) { if (res.length <= 0) { return $('#suggest-list').empty().hide() } let htmlStr = template('tpl-suggestList', res) $('#suggest-list').html(htmlStr).show() // 1.獲取到使用者輸入的內容，當做鍵 let k = $('#ipt').val().trim() // 2.需要將資料作為值進行快取 cacheObj[k] = res } }) </script> </body> </html>
4.防抖和節流
4.1節流策略（throttle），故名思義，可以減少一段時間內事件的觸發頻率。
4.2節流的應用場景
1.當滑鼠連續不斷的觸發某個事件，只在單位時間內觸發一次
2.懶載入時要監聽計算滾動條的位置，但不必每次滑動都觸發，可以降低計算的頻率，而不必去浪費CPU資源
4.3節流案例-滑鼠跟隨效果
1.渲染UI結構並美化樣式
2.不使用節流時實現滑鼠跟隨效果
3.節流閥的概念
節流閥為空，表示可以執行下次操作；不為空，表示不能執行下次操作
當前操作執行完，必須將節流閥重置為空，表示可以執行下次操作了
每次執行操作前，必須先判斷節流閥是否為空。
4.使用節流優化滑鼠跟隨效果
4.4防抖和節流的區別
防抖：如果事件被頻繁觸發，防抖只能保證只有最有一次觸發生效，前面N多次的觸發都會被忽略
節流：如果事件被頻繁觸發，節流能夠減少事件觸發的頻率，因此，節流是有選擇性的執行一部分事件