fcc项目总结系列2：wikipedia viewer

begin: 20170728
version: 20170728

项目地址：https://codepen.io/jacktown/pen/RZWLNR
fcc题目地址：https://freecodecamp.cn/challenges/build-a-wikipedia-viewer

项目简介

根据用户输入的文本检索维基百科的条目，显示前若干条结果，结果包含词条标题和内容摘要。

技术点

• 利用wikipedia的API检索维基百科数据库，
  API文档地址是http://www.mediawiki.org/wiki/API:Main_page
  API在线实验地址：https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm
  获取随机维基百科条目方法：http://en.wikipedia.org/wiki/Special:Random
  当时学习api的时候迷了好久，主要不知道该用什么参数才能获得和demo一样的结果，结果网上搜到一篇demo，关键点是list=search&srsearch=xxx
• 搜索框动画
  用户界面在一开始，输入框是一个形似放大镜的图标，点击该图标，放大镜手柄逐渐缩短到0，图标成为一个圆，然后这个圆向两边分开，拉出一个输入框，输入框自动获取焦点，接着输入框尾端两条斜线段从右上角和右下角飞入，形成一个关闭的叉，点击该叉，动画逆向运行一遍，搜索框又还原为一个搜索图标。
  实现该动画的过程主要采用了以下技术：
  • 搜索图标手柄：用一个高度很小的div，对搜索框（包围块）绝对定位，利用css3旋转，让其成为一条斜线，作为搜索图标的手柄。修改div的宽度就可以修改手柄的长度。难点：由于css3旋转是相对div中心的，修改了div的长度以后，div的中心位置变了，旋转以后和之前的位置平行却不共线，达不到效果，为此还需要在div相对定位以后利用css3位移变换transform: translate(-50%,-50%) rotate(45deg);让不论div长度多少，div的中心都固定在一个位置。这样以后，缩短div时会向div中心收缩，那么这个中心放在哪儿呢？搜索图标圆的边缘上。此时div有一部分会显示在搜索图标圆内部，为解决这个问题，让div的z-index设置为-1，并给搜索图标圆（实际是搜索框包围块）加上和页面相同的背景，折叠掉div手柄在圆内的部分。
  • 搜索框的关闭叉：和搜索图标手柄类似，不同的动画过程中修改的css属性是其绝对定位位置。
  • 实现动画的js：在搜索框包含块上监听点击事件，根据点击事件目标和当前搜索框状态(我在搜索框关闭完全以后给其加collaspsed类)确定执行什么动画；各个动画的顺序执行：利用jquery的animate()方法回调函数。
• 内容显示
  一开始我在html中写了12个用于填充结果内容的div>a>(h3+p)，在分享项目时，伙伴们给的意见是动态生成dom，对此做了相应修改。