在输入框中搜索<code>字或者某个词</code>快速匹配含有这个字或者是词的诗句。
flex布局
<code>nth-child</code>奇偶匹配
<code>linear-gradient</code>颜色渐变
transform
fetch
array
<code>filter()</code>
<code>map()</code>
<code>push()</code>
<code>join()</code>
<code>...</code>
javascript regexp 对象
字面量语法
创建 regexp 对象的语法
修饰符<code>i</code>、<code>g</code>
<code>match()</code>
<code>replace()</code>
ui布局
通过fetch下载数据
数据处理并保存
事件监听
数据匹配操作
新数据替换展示
html代码
css代码
css布局相关参考文档
<a href="http://www.css88.com/book/css/properties/flex/flex.htm">css参考手册</a>
<a href="http://www.ruanyifeng.com/blog/2009/03/css_selectors.html">css选择器笔记</a>
<a href="http://bbs.kongyixueyuan.com/topic/10/flex">flex布局完全入门教程</a>
<a href="http://www.webhek.com/post/html5-classlist-api.html">使用html5里的classlist操作css类</a>
<a href="http://zh.learnlayout.com/position.html">position</a>
具体数据请求过程见下图：
<a href="https://developer.mozilla.org/zh-cn/docs/web/api/fetch_api/using_fetch">fetch详细使用文档</a>
<code>blob.json()</code>是将数据转换为json数据，data为<code>then</code>函数中转换完的数据，在这个案例中，data是一个数组。
<code>poetrys.push(...data)</code>这句代码中的<code>push</code>是往数组里面新增对象，而<code>...data</code>代表的是将这个data数组中的数据一一的存储到<code>poetrys</code>数组中。
获取<code>search</code>和<code>suggestions'</code>节点分别对<code>change</code>、<code>keyup</code>事件进行监听，当输入框中的内容发生变化或者键盘弹起时触发<code>displaymatches</code>函数更新数据。
regexp使用基础
<a href="http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp">regexp参考文档</a>
项目源码分析
<code>poetrys.filter</code>会返回带搜索关键字的新数组。
<code>const regex = new regexp(this.value, 'gi');</code> 代表匹配规则。
<code>g</code>：执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
<code>i</code>：执行对大小写不敏感的匹配。
上面的这种写法等价于："/this.value/gi"。
<code>matches.map</code>会返回一个按照新的规则处理完以后的新的数组。
<code>title.replace(regex, "新字符串");</code>表示将title字符串中满足 <code>regex</code> 规则的字符串替换成<code>新字符串</code>。
<a href="https://github.com/liyuechun/javascript30-liyuechun">github source code</a>
简介： 资深讲师，全栈工程师；区块链、高可用架构技术爱好者。
区块链技术交流qq群：348924182
「区块链部落」官方公众号