bingyan-test

冰岩实习任务:知乎

---

项目简述:
前端界面：模仿知乎首页，响应式设计，固定导航条和侧边栏（使用html和css实现框架和样式）
前端交互：实现滚动加载，动态折叠和展开，手动发表动态（js）
后台搭建：爬虫，实现登录（node.js）

---

前端静态页面构建

3.25
基本框架和样式设计

version 1:由于采用相对布局和position：absolute和relative，导致无法实现响应式布局

version 2:修改相对布局为绝对布局，margin改为0 auto，实现响应式布局

version 3:细节修改，增加hover效果和字体颜色

3.26
CSS文件分流

3.27
爬取数据

查找到一个简单实现数据爬取的例子
几次尝试都没有成功，原因总结如下：

知乎首页需要登录才能显示数据

爬取数据文件格式有误，未能正确分析数据结构

解决方法如下：

浏览器选中元素进行copy selector

按照话题爬取数据

可改进的地方

XHR

只能爬取少数数据，寻找应付瀑布流加载的方法

3.28
简单挪用数据 + node 学习

使用js调用数据到页面
html:复制 div.content
js:

将储存data的js文件在head处引用

使用原型创建对象（content），保存属性和方法

改进方向:

module
封装函数的js文件通过exports暴露出接口，供他人调用
模块化 .js 有利于保持全局变量的纯净，同时保持 .js 的独立性

封装函数，抽象过程

node学习 node

初步了解express

get

request 对象处理请求数据
response 对象

events监听器（EventEmitter），事件触发和绑定（类比js addEventListener）