这里是用来存放我在做百度前端任务的练习代码。
关于百度前端学院的详情请点击这里：https://github.com/baidu-ife/ife
前两个任务的代码已经写到fork的仓库中了，如下：
但是我同时又拷贝了一份到这个仓库，因为改变了提交作业的方法之后，还是用自己的仓库比较方便。
深入学习了HTML、CSS。深刻理解了 CSS 布局和 BFC 技术。
最终实现了一个博客页面的展示。
学习 JavaScript。
自己封装了一个 util.js 工具库，包含深度克隆、数组去重、添加删除 CSS 样式、简单 Query、封装 Ajax 等功能。
后面的练习中实现了兴趣列表、倒计时、图片轮播、输入框即时提示、拖拽交互等任务。
任务三实现了一个 ToDo 的单页应用。
使用 localStorage 存储数据，JSON 模拟数据表，实现了分类和待办状态的改变，具有良好的交互体验。
任务四是将任务三的 ToDo 应用优化，以适应移动端设备。
为了便于管理，我单独开了一个仓库用来放 ToDo 手机适配版的代码。
仓库见这里：https://github.com/Gaohaoyang/ToDo-WebApp
-
数据存储
以 JSON 模拟数据表的形式存储于 LocalStorage 中
使用数据库的思想，构建3张表。 cateJson 分类 childCateJson 子分类 taskJson 任务 分类表 cate ---------------------- id* | name | child(FK) ---------------------- 子分类表 childCate -------------------------------- id* | pid(FK) | name | child(FK) -------------------------------- 任务表 task ---------------------------------------------- id* | pid(FK) | finish | name | date | content ---------------------------------------------- -
使用
Sass重构了 CSS 代码使用分块、继承等方式，使得代码更加清晰明了。
-
响应式布局
针对手机端细节做了很多调整，更符合手机上的视觉交互习惯。
-
加入页面切换效果
使用
translate3d()，纯 CSS3 切换动画效果。 -
处理了 XSS 防护
对可能造成破坏的字符进行转码。
-
性能优化
使用 CDN 处理静态资源 fontAwesome，压缩静态资源等
-
模块化
使用 requireJS 模块化 JavaScript 代码。重构 JavaScript 代码。优化之前写的耦合性高的绑定事件，重新绑定事件，降低耦合性。期间根据具体需求重写了事件代理的代码。
-
前端工程化
使用 gulp，自动编译 Sass，压缩 CSS 和 JavaScript 代码。并且配置了自动流程。