初级班和中级班的任务内容基本一致,但是在细节要求和时间要求上会不一样。

• 任务一:HTML、CSS基础
  • 初级班:11天左右
  • 中级班:4天左右
• 任务二:JavaScript基础
  • 初级班:13天左右
  • 中级班:7天左右
• 任务三:深入学习JavaScript语言的一些特性、以及相关的一些设计模式等知识。实践一个小型的to-do项目实践,巩固学习知识
  • 初级班:10天左右
  • 中级班:10天左右
• 任务四:关于移动、node.js、ES6、CSS预处理、CSS后处理、JavaScript模块化、前端工程化,掌握目前前端主流技术。并通过to-do大型项目实践,做一个移动+PC的大型项目,学习如何做技术选项,如何做大型项目设计架构
  • 初级班:30天左右
  • 中级班:30天左右

具体天数为根据课程内容的调整而有适当微调。以最后公布为主

高级班假设学员已经有非常好的前端基础,主要需要进行的是偏研究性质或者大型实践性质的项目实践。题目包括:

1. 实现一个表单管理框架,要求实现表单验证、错误信息显示、表单提交处理、基于AJAX的表单提交。

2. 框架的使用者应当使用MVVM模式进行开发,不需要使用DOM操作。

一个可行的使用代码的方式如下:

var eform = require('eform');
var form = eform.define({
 username: {
 required: false,
 validate: function (value, async) {
 var next = async();
 
 $.post({
 username: value
 }, function () {
 next(true);
 }, function () {
 next(false);
 });
 }
 },
 
 password: {
 validate: function (value) {
 return this.passwordConfirm.value === value;
 }
 },
 
 usertype: {
 validate: function (value) {
 // 这需要触发username表单的验证,而不需要用户的操作
 this.username.required = true;
 }
 },
});
// 需要识别HTML中的部分验证规则加到模型中去
form.scan($('#form')[0]);
// 这需要触发username的验证
form.fields.username = 'another username';
// 如果有一个程序员很淘气,它写了这样的代码
document.getElementById('username').value = 'a bad username';
// 我们也需要帮他验证一下对不对
// 另一个小淘气喜欢用各种表单控件
uploader.on('change', function (value) {
 form.fields.username.value = value;
});
// 我们也不可以抛弃他,也需要帮他验证一下
// 具体的详细细节请联系导师

模型到视图:使用ES5的新特性Object.defineProperties。

视图到默认:使用Mutation Observer。

1. Object.defineProperties如何在IE下实现呢?

2. Mutation Observer可是新玩意,其它的浏览器可怎么办呢?

3. 尝试将框架向非表单扩展。

4. 尝试配置JQuery写一个真正的MVVM框架。

5. 你是否在MVVM方面有自己新的想法呢?

1. 理解表单操作的基本模式和处理方法

2. 理解MVVM是什么,和怎么实现

3. 理解框架可用性和可扩展性以及两者之间的取舍

• 实现一个基于手机Web端的IM工具
• 可以实现文字、表情的交流

• 从UI设计、前端、后端均由自己完成

• 从无到有完整实现一个轻量级产品
• 体会全栈工程师
• 踩一踩移动端的各种大坑

• 基于WebGL,实现3D迷宫世界的自动生成
• 实现Avatar在迷宫里的运动
• 实现使用手机端作为Avatar的操作遥控器

• 不要基于已有框架
• 足够炫

• 深入学习并实践WebGL
• 学习跨端交互
• 尝试做一些炫酷的事情

• 在PC浏览器上,针对一个普通的HTML页面,基于WebGL可以生成他的3D世界版本,由页面自身的DOM嵌套关系生产层峦叠嶂的DOM阶梯
• 可以操作一个3D小球在这个世界中前进、转向、加速、减速、跳跃
• 实现使用手机端的重力感应和触屏作为小球运动的操作遥控器
• 实现在同一个3D页面世界玩耍的小伙伴们能看见其他人的球
• 实现球与球之间的互动,如碰撞扣血之类的

• 视觉效果好,画面流畅
• 游戏易上手、但富有乐趣

• 深入学习并实践WebGL
• 学习跨端交互
• 尝试做一些炫酷的事情

• 通过上传的图片,自动生成Low Poly(低多边形)图像
• 提供手动指定边缘和特征点,来提高生成图片的效果

• 产品体验流畅

• 基于前端技术做图像领域的深入研究