JavaScprit30-6 學習筆記，javascprit30-6

JavaScprit30-6 學習筆記，javascprit30-6

今天學習的是  仿立即搜尋詩句效果

 

第一個問題：

fetch()

Fetch API  提供了一個 JavaScript介面，用於訪問和操縱HTTP管道的部分，例如請求和響應。它還提供了一個全域 fetch()方法，該方法提供了一種簡單，合乎邏輯的方式來跨網路非同步擷取資源。
一個基本的 fetch請求設定起來很簡單。看看下面的代碼：
let myImage = document.querySelector('img');fetch('flowers.jpg').then(function(response) {    return response.blob();}).then(function(myBlob) {    let objectURL = URL.createObjectURL(myBlob);    myImage.src = objectURL;});
--mdn

這是一個還在實驗的用來替代AJAX的方法...第一次見哦。

項目源碼：

 const endpoint = 'https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json';             const  poetrys = [];    fetch(endpoint)        .then(blob => blob.json())        .then(data => poetrys.push(...data));

注意：ECMAScript 6引入三個點“...”文法用來分別代表一個數組參數列表

如果使用... 則會出現 這樣的情況..

資料都被存在數組的第一個元素裡了...

之後就是一個尋找的函數...

使用到了filter（）和正則。

先看看源碼..

return poetrys.filter(poet => {            // 正則找出匹配的詩句            const regex = new RegExp(wordToMatch, 'gi');            const author = poet.detail_author.join('');//            console.log(author);            return poet.detail_text.match(regex) || poet.title.match(regex) || author.match(regex);        });
const regex = new RegExp(wordToMatch, 'gi'); 中 g表示全域，i表示不區分大小寫
　　match() 方法可在字串內檢索指定的值，或找到一個或多個Regex的匹配。
　　該方法類似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字串的位置。

 為什麼這麼命名，我們來看看資料就知道了...

我們用到的 就是這三條擷取到的資料的名字....

 

之後就是給輸入框設定監聽然後調用 上面的函數來實現某些功能啦！

  function lala() {      const matchArr= fundProtory(this.value, shice);      console.log(matchArr);  }    const searchInput = document.querySelector('.search');    const suggestions = document.querySelector('.suggestions');    searchInput.addEventListener('change',lala);        searchInput.addEventListener('keyup',lala);

...不過似乎是網路不好的問題 ...我的fetch請求失敗啦..

 

最後完善代碼，通過JS操作 修改 視圖

function lala() {     const matches = findMatches(this.value, poetrys);    const regex = new RegExp(this.value, 'gi');    const html = matches.map( poet => {      // 替換高亮的標籤      const text = poet.detail_text.replace(regex, `<span class="hl">${ this.value }</span>`);      const title = poet.title.replace(regex, `<span class="hl">${ this.value }</span>`)      // 構造 HTML 值      return `        <li>          <span class="poet">${ text }</span>          <span class="title">${ title } - ${ poet.detail_author[0] }</span>        </li>      `;    }).join('');//    console.log(html);    suggestions.innerHTML = html;  }

關鍵點： map 和replace  ...

 const text = poet.detail_text.replace(regex, `<span class="hl">${ this.value }</span>`);
通過replace 來替換 正則判斷過的部分，也就是輸入的部分！
 
通過map 來篩選 有輸入部分的 數組元素。

 

最後的效果就和上面一樣啦！。