JavaScprit30-6 学习笔记

前日学习的是  仿即时追寻诗句效果

 ECMAScript 1

先是个难题:

fetch()

Fetch
API
 
提供了一个
JavaScript接口,用于访问和操纵HTTP管道的有的,例如请求和响应。它还提供了一个大局 fetch()主意,该措施提供了一种简易,合乎逻辑的法子来跨网络异步获取资源。

ECMAScript,一个基本的 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引入多少个点“…”语法用来分别表示一个数组参数列表

要是应用… 则会现出 那样的意况..

ECMAScript 2

数码都被存在数组的率先个要素里了…

然后就是一个寻觅的函数…

动用到了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()
方法可在字符串内搜索指定的值,或找到一个或三个正则表明式的相当。

  该方式类似 indexOf() 和
lastIndexOf(),不过它回到指定的值,而不是字符串的地方。

 为啥这么命名,我们来看看数据就掌握了…

ECMAScript 3

俺们用到的 就是那三条获得到的多少的名字….

 

尔后就是给输入框设置监听然后调用 上面的函数来落成某些意义啦!

  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请求失利啦..

ECMAScript 4

 

末尾完善代码,通过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, `${ this.value }`);
      const title = poet.title.replace(regex, `${ this.value }`)
      // 构造 HTML 值
      return `
        <li>
          ${ text }
          ${ title } - ${ poet.detail_author[0] }
        </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 来筛选 有输入部分的 数组元素。

 

最终的作用就和方面一样啊!。