2015-2016 WEB研发部寒假大作业

Basic

• 若有回家之后没网的，请做下面的单身狗作业
• 1前端 + 1后端 组队完成 自行组队, 两人一组, 特殊情况找不到组的(单身狗)找 Ling. 或 隆胸 给你随机分配→_→
• 给你们一个交朋友的机会，好好把握
• 组完队跟我说一声:) 放假前对没组好队的我会关照你. 也可以一个人全包，跟我说声
• 旨在让你们从实战角度提升能力, 善用搜索, 感受WEB的强大
• 作业提交时间为:开学第一周周末, 第二学期第一节课之前
• 作业提交形式: github，并在第一节课检查作业时向大家介绍你们的作品，希望到时候能看到你
• 没完成并提交的自动退出, 希望你们珍惜寒假的时间:)
• _禁止_互相推锅，_沟通_很重要，我知道肯定会发生队友坑了的情况, 给你几条路: 1.你也跟着坑, 2.自己顶上去, 3.只做前端/后端,会给你适当打分, 到时候不准说是队友的问题，我会认为1你们没沟通好，2你没选好队友。这是一个提升能力的过程，禁止抄袭（后果很严重）。
• 有任何问题的，除了在群里问，也可以发起issue：点我 然后点new issue，就可以发表了，类似于贴吧。这里只允许讨论技术相关内容

双人套作业

基本说明

• 以下可选题目任选其一
• 页面不崩是基本要求，最新版chrome能看
• 前端界面美观, 有后端管理界面, 有基本的CRUD功能
• 后端开发全部面向对象, 不要面向过程了

加分项

• 有自己的域名, 服务器
• https
• 针对SEO优化
• 前端语义化, 使用HTML5标签
• 使用CSS3制作前端动画
• 兼容低版本IE
• 考虑安全性 (比如前端xss,后端sql注入)
• 考虑性能因素
• 考虑缓存

建议

• 前端可以使用jQuery等类库/框架
• 后端可以使用你认为好用的框架

知乎

1. 首页
2. 问题列表页面和详情页面(可以回答问题, 对回复进行评论, 删除自己的问题和答案)
3. 个人资料页面(登录, 修改个人资料, 上传头像)
4. 后台管理页面(可以对问题进行管理)
5. 其他功能: 赞同/踩问题, 收藏, 搜索
6. [选作]分享到微博贴吧空间
7. [选作]搜索

博客

1. 至少要有主页、文章内容页、后台管理
2. 主页有文章的链接
3. 文章内容页要有评论功能
4. 后台管理需要登陆，能够分别对文章和评论进行增删改查
5. [选作]: 搜索
6. [选作]相册: 对缩略图的处理, 图片上传
7. [选作]日志分类/标签
8. [选作]日历，在日历上显示自己今天是否有博文，点击当天日期后可跳转至当天博文列表, 后台删除
9. [选作]时间轴，把所有的日志显示在一条轴上，实在不懂就百度。

B站

1. 用户登录注册
2. 视频文件上传
3. 视频播放/评论
4. 视频分类
5. 搜索:视频根据视频标签和标题进行搜索
6. 后台管理系统:视频管理 用户管理
7. [选作]弹幕功能提醒: 虽然我们不会做flash, 但是我们可以用飞翔的HTML元素来实现→_→_
   1. 脑洞大开: 可以做用户等级, 自己想等级制度, 等级越高, 发的弹幕越大_
   2. 脑洞大开: 比如说一级的时候弹幕是h5标签, 二级的时候弹幕是h4标签→_→...
8. [选作]浏览历史, 收藏功能

单身狗作业

• 特别申请的，仅限回家没网的同学专用，单人完成

前端: 切图 联系Ling.要psd

• 完成切图(好好切) 图为本Repo下的homework.psd
• 去写个ajax登陆的demo，要做到能手写使用ajax的代码
• 写一个学习(看书)的心得体会，1K字以上

后端: 无

• 后端所有人都有网!!!

其他

前端

• 前端与后端不太一样, 前端最重要的是写代码之前掌握良好的编程思想, 不然就会掉入巨大坑之中. 半天都写不完.
• 不要亲信周围身边的同学对前端的看法, 在他们眼里, 前端就是切图,写写JS. 那种思想早晚都会被他们写入历史.
• 一个优秀的前端工程师需要具有各个方面的技能, 绝对不只是切个图那么简单!! 只会切图? 趁早转行吧→_→
• 做一个页面不只是从头到尾写一堆全七八糟的CSS和JS. 一个设计良好的架构可以让你写的代码可能很轻松得看第二次,第三次.(请问: 如果现在让你去切个图, 你愿意去做二次开发么→_→)
• 最后给个计算公式: 牛逼的前端 = (后端工程师 + 移动开发工程师 + 一般前端工程师 + 安全工程师 + 性能工程师), 不过我见过哪些牛逼的前端工程师, 国内就几个..

​ 成为牛逼的前端我帮不了你, 但我能帮你成为一个一般前端工程师..

​ 不要浪费假期的时间, if so, 你会知道这是很值的. 再给你们推荐一些前端方面的学习路线:

• ！！！多写东西！！！，基础不好的补基础，有一定基础之后去看布局、动画、JS等等，一定要写东西，光看书看东西没点点杰宝用
• 代码灵感：codepen.io
• JS参考：http://javascript.ruanyifeng.com
• 作为参考，我大一寒假之前用了两个通宵纯手工做着玩的东西：https://gp.zeroling.com/ ，后端是PHP原生的，你们加油，当然不要以为你们也能两天就实现出来
• 前端发展很快，可以选择性的看一下一些工具、类库、框架：LESS,SASS,requirejs,jQuery等等
• AJAX很重要，前端的单页应用是发展趋势
• 书目推荐: 犀牛书 (JavaScript权威指南：基础, 刚开始很难啃, 没事就翻翻)、蝴蝶书（语言精粹：矫正编码习惯，专业前端的第一步）、你所不知道的Javascript、JavaScript高级程序设计 (我没看过，据说很好，很多前端技巧), 买书可以去亚马逊, 淘宝很多假货, 假书可以看但是我很鄙视, 没钱就去下PDF吧, 从压岁钱里拿几十块钱买书不过分吧！
• share http://pan.baidu.com/s/1qXdoZQs#path=%252Fbook-share%252Fbook

前端必备的技能

• CSS

  • 阅读代码的技能, 不会阅读代码怎么用我提供给你们的UI框架
  • CSS 布局技能, 不会居中的乘早转行吧→_→
  • 盒模型技能
  • 基本的页面兼容 IE8+

• JS

  • 阅读代码的技能，不会看代码还写啥代码→_→

  • 数组(重点)创建数组， 稀释数组， 数组长度， 多维数组基本数组方法, pop, push, shift ...ECMA5 数组方法, forEach, map, reduce类数组与真数组， 已经如何将类数组转换成真数组, 如何区分类数组和真数组如何使用数组方法进行字符串操作 (Array.prototype.join.call, Array.prototype.fliter.call])

  • 对象(重点)对象类型判断（Object.prototype.toString.call）对象属性检测

    属性枚举 for/in 以及 for in 和对象原型的关系， 如何避免枚举到继承的属性. 序列化对象 Object.stringify, Object.toJSON, Object.create （在原型继承会用到！）Object.keys, this 指针的指向问题

  • 函数(重点)函数定义， 函数声明和函数赋值的区别函数的call, apply 方法. 作用域与作用域链. 学会使用将一些属性保存在函数中， 可以显著提高性能闭包,arguments 对象,原型对象prototype通过bind修改函数指针函数式编程, 使用函数来操控函数,巧用闭包实现区部作用域

  • 类 (可选掌握, 可暂时不要求)

  • 正则表达式（可选掌握， 可暂时不要求）

  • Ajax (重点中的重点)GET 方法POST 方法Restful API浏览器跨域与同源策略WebSocket

  • Window API

    • setTimeout, setInterval 基本用法
    • 理解setTimeout, setInterval 中的异步事件队列
    • location对象
    • navigator对象
    • 错误处理
    • window 与iframe 以及同源策略与iframe

  • DOM API （重点）

    • 啥是DOM树
    • 删除节点， 创建节点， 节点类型
    • 获取元素属性
    • Form API
    • CSS 操作(style, H和getComputedStyle)
    • getElement[byId, sByClassName, sByTagName]等选择器
    • querySelector, querySelectorAll 的选择器
    • 上面两种选择器的区别， （动态，性能，兼容）

  • 事件 (重点)

    • 冒泡和捕捉
    • 基本浏览器事件（load, click, mouseover, mouse out, blur, b,submit...）
    • 去除浏览器模式事件
    • 如何阻止事件冒泡
    • 匿名函数与事件监听的取消

  • 面向对象(可选掌握, 可暂时不要求)

  • 面向对象与对象原型(可选掌握, 可暂时不要求)

  • 对象原型与原型链(可选掌握, 可暂时不要求)

• canvas

• localStorage

• CSS3 动画

• 响应式布局

• ajax

• REM/EM

• 移动端浏览器兼容

后端

• 看看Linux, 看看shell, Linux装个虚拟机玩玩, 书的话: 鸟哥的私房菜, shell脚本学习指南
• 面向对象!!!
• 操作系统知识和计算机网络知识, 光PHP的话知识结构有缺陷
• php基础
  1. 字符串+数组操作(带正则的)
     • 原生str
     • 扩展mb库
     • 数组操作
  2. 文件操作
     • 上传文件
     • 读取文件(可选stream)
  3. GD库操作
     • 生成图片(如验证码)
     • 图片裁剪
     • 图片缩放
  4. curl
     • 附: file_get_contents, file_put_contents
     • 模拟登录知乎
     • 抓取有用信息
     • 扒新生照片
     • 进阶:
       • 批处理
  5. 面向对象深化
     • 实现抽象类
     • 实现接口
     • trait
  6. 闭包
  7. PHP新版本特性
  8. 杂项
     • js(jq)
     • 同源策略
     • bootstrap
     • composer
• 数据库基础
  1. 数据库基础阅读
  2. sql语句练习
  3. 数据库设计
  4. 数据库调优(索引, sql语句优化)
  5. wordpress数据库赏析
• 设计模式
  • 单例
  • 进阶
    • 观察者
    • 迭代器(middleware实现)
    • 工厂
    • 外观
    • 责任链
• 超进阶
  • 写php扩展
  • 实现php数组的下标索引算法

奖励列表

• 到时候做的最好的组我请吃饭 --Ling.
• 前端写的最好的送一本书 --赵小宇.
• 没想好送啥(反正会有) --隆胸
• 没想好送啥(反正会有)+1 --咬碎

附1：还活着的学员名单

名字打错的尝试给这个repo提交pull request，不会就算了

前端（按照期末考核成绩排序）

• 李立平
• 蒋清瀚
• 张曦镱
• 吴君涛
• 杨新雷
• 王威
• 张彦
• 曾玉
• 於光晶
• 刘峻豪
• 李敏娴
• 文俊霖
• 罗方霞
• 杨潇涵
• 王晨宇
• 游舒婕
• 黄卿怡
• 张欣悦
• 杭景帆
• 刘荣博
• 王静怡
• 张兰秋月
• 徐菁馨
• 白政英
• 图尔荪阿依
• 胡佩文
• 秦银泽
• 杨飞
• 张智勇
• 郝也
• 雷恒林

后端(按随意排序)

• 魏天嘉
• 黄思翔
• 严澄
• 何知轩
• 刘伟红
• 吴培楠
• 彭远志
• 杜剑峰
• 杨博艺
• 杨周
• 杨越
• 查森云
• 王炜松
• 王经纬
• 王超
• 甘锐
• 刘劲飞
• 谭丙章
• 叶成林
• 陈倩倩
• 陈豪
• 陈馨怡
• 霍江钿
• 魏恒琨
• 黄子依
• 李佩
• 蒋天星

组队名单

前端	后端	备注
游舒婕	谭丙章	1
杭景帆	严澄	2
吴君涛	甘锐	3
李敏娴	叶成林	4
罗方霞	杨博艺	5
黄卿怡	陈豪	6
白政英	彭远志	7
张曦镱	蒋天星	8
刘竣豪	霍江钿	9
张彦	王炜松	10
胡佩雯	何知轩	11
刘荣博	刘伟红	12
杨潇涵	吴培楠	13
雷恒林	王超	14
李立平	杨周	15
张智勇	陈倩倩	16
於光晶	魏天嘉	17
王静怡	黄思翔	18
杨新雷	李佩	19
王晨宇	黄子依	20
曾玉	陈馨怡	21
秦银泽	查森云	22
张兰秋月	杜剑峰	23
文俊霖	魏恒琨	24
蒋清瀚	王经纬	25
刘劲飞	刘劲飞	26.单人
徐菁馨	杨越	27

无法联网的同学名单

• 图尔荪阿依
• 杨飞
• 张欣悦