Skip to content

Archmee/IFE-2015-Spring-Task

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

IFE-2015-Spring-Task

这里是用来存放我的百度前端任务代码。


说明

百度前端学院2015春

task1

深入学习了HTML、CSS,理解 CSS 布局和 BFC 技术。

最终实现了一个多页静态博客。

task2

学习 JavaScript。

自己封装了一个 util.js 工具库,包含深度克隆、数组去重、添加删除 CSS 样式、类似jQ的mini$、封装 Ajax 等功能。

后面的练习中实现了兴趣列表、倒计时、图片轮播、输入框即时提示、拖拽交互等任务。

task3

任务三实现了一个 ToDo 的单页应用。

使用 localStorage 存储数据,JSON 模拟数据表,实现了分类和待办状态的改变,具有良好的交互体验。

task4

任务四是将任务三的 ToDo 应用优化,以适应移动端设备。

task5

本来没有task5,只是我将task4中需要做工程化重构的部分单独拿出来了

  • 使用Less重构CSS代码:变量、继承、mixin等特性可以简化CSS

  • 处理XSS防护:转义html字符

  • 性能优化:使用artTemplate,分离js中的模板字符串。压缩js、css、图片等

  • 工程化:使用gulp及其插件简化工作流

  • 模块化:使用requirejs模块化js代码

  • 笔记:

  • 在线 demo

task6

这个任务管理工具Vue-Todo和 task5 的功能和界面都是完全一样的,只是这里使用了Vue2来实现,当时还没有学习Vue全家桶就开始开发,所以除了Vue外,还是使用Gulp和RequireJs。

效果展示 点这里,由于该项目是gulp打包发布,还需要安装一些插件,个人觉得麻烦就省略了,反正效果和IFE任务5一样,当然,在本地是完全可以运行的。

想要在本地运行项目的话

  1. npm install
  2. gulp 或者gulp default就启动项目了,每次修改文件后都会将处理后的文件输出到目标位置
  3. gulp clear-all 可以清理目标重新生成
  4. ctrl + c 结束运行

About

IFE 2015 春季学期

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published