diff --git a/06 - Type Ahead/README.md b/06 - Type Ahead/README.md index 38845b5..93949aa 100644 --- a/06 - Type Ahead/README.md +++ b/06 - Type Ahead/README.md @@ -1,68 +1,68 @@ -# 06 Fetch 结合 filter 实现快速匹配古诗 +# 06 Fetch 結合 filter 實現快速匹配古詩 -> 作者:©[缉熙Soyaine](https://github.com/soyaine) -> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 6 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*) +> 作者:©[緝熙Soyaine](https://github.com/soyaine) +> 簡介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一個 30 天挑戰。專案免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案原始程式碼。目的是説明人們用純 JavaScript 來寫東西,不借助框架和庫,也不使用編譯器和引用。現在你看到的是這系列指南的第 6 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜歡請 Star 哦♪(^∇^*) -## 实现效果 +## 實現效果 -![仿即时搜索诗句效果](https://cl.ly/0b360y270s0f/Screen%20recording%202016-12-31%20at%2010.05.23%20PM.gif) +![仿即時搜索詩句效果](https://cl.ly/0b360y270s0f/Screen%20recording%202016-12-31%20at%2010.05.23%20PM.gif) -在输入框中输入一个词,迅速匹配,展示含有这个词的诗句,诗句的来源 json 数据是加载页面时从网络中异步获得。[在线效果请查看。](http://soyaine.cn/JavaScript30/06%20-%20Type%20Ahead/index-SOYAINE.html) +在輸入框中輸入一個詞,迅速匹配,展示含有這個詞的詩句,詩句的來源 json 資料是載入頁面時從網路中非同步獲得。[線上效果請查看。](http://soyaine.cn/JavaScript30/06%20-%20Type%20Ahead/index-SOYAINE.html) -初始文档中提供了 HTML 和 CSS,我们需要补全 JS 代码。这个挑战是 Ajax 的预热练习,在异步方面用到了一些目前还未被完全支持的新特性,但很好用。 +初始文檔中提供了 HTML 和 CSS,我們需要補全 JS 代碼。這個挑戰是 Ajax 的預熱練習,在非同步方面用到了一些目前還未被完全支持的新特性,但很好用。 -原文档中选的内容是英文城市名,我将其换成了唐诗,构造了一个含有 70 多首唐诗的 JSON 数据,访问地址是 [https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json](https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json),请自由取用。 +原文檔中選的內容是英文城市名,我將其換成了唐詩,構造了一個含有 70 多首唐詩的 JSON 資料,訪問位址是 [https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json](https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json),請自由取用。 ## 涉及特性 - Promise - - `fetch()` - - `then()` - - `json()` + - `fetch()` + - `then()` + - `json()` - Array - - `filter()` - - `map()` - - `push()` - - `join()` - - Spread syntax 扩展语句 + - `filter()` + - `map()` + - `push()` + - `join()` + - Spread syntax 擴展語句 - RegExp - - `match()` - - `replace()` - -## 过程指南 - -1. 声明一个空数组,用于存放解析 json 后的数据 -2. 运用 `fetch()` 发送 HTTP 请求 - 1. 获取返回的 Promise 对象 - 2. 解析 JSON 数据 - 3. 存入数组 -3. 获取两个主要 HTML 元素(``,`