JavaScprit30-6 学习笔记
2018-06-24 01:57:33来源:未知 阅读 ()
今天学习的是 仿即时搜索诗句效果
第一个问题:
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() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
该方法类似 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 来筛选 有输入部分的 数组元素。
最后的效果就和上面一样啦!。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:CSS设置背景透明字体不透明
下一篇:css基础
- HTML骨架 2020-06-10
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
- 毕业生想学习web前端开发,有什么好的发展方向吗? 2020-06-09
- 转行前端很迷茫,该怎么学习? 2020-06-06
- 前端学习记录 2020-06-05
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash