任务说明
初级班 & 中级班
初级班和中级班的任务内容基本一致，但是在细节要求和时间要求上会不一样。
- 任务一：HTML、CSS基础
- 初级班：11天
- 中级班：4天
- 任务二：JavaScript基础
- 初级班：13天
- 中级班：7天
- 任务三：一个简单的to-do APP，巩固之前的学习，并深入学习JavaScript语言的一些特性、以及相关的一些设计模式
- 初级班：7天
- 中级班：7天
- 任务：关于移动、node.js、ES6、CSS Processing、JavaScript模块化、前端工程化，掌握目前前端主流技术
- 初级班：15天
- 中级班：11天
- 任务四：to-do大型项目实践，做一个移动+PC的大型项目，学习如何做技术选项，如何做大型项目设计架构
- 初级班：30天
- 中级班：30天
具体天数为根据课程内容的调整而有适当微调。以最后公布为主
高级班
高级班假设学员已经有非常好的前端基础，主要需要进行的是偏研究性质或者大型实践性质的项目实践。题目包括：
1. MVVM表单框架任务
1.1 任务描述
-
实现一个表单管理框架，要求实现表单验证、错误信息显示、表单提交处理、基于AJAX的表单提交。
- 框架的使用者应当使用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;
});
// 我们也不可以抛弃他，也需要帮他验证一下
// 具体的详细细节请联系导师
1.2 建议的MVVM实现方式
模型到视图：使用ES5的新特性Object.defineProperties。
视图到默认：使用Mutation Observer。
1.3 进阶任务
- Object.defineProperties如何在IE下实现呢？
- Mutation Observer可是新玩意，其它的浏览器可怎么办呢？
- 尝试将框架向非表单扩展。
- 尝试配置JQuery写一个真正的MVVM框架。
- 你是否在MVVM方面有自己新的想法呢？
1.4 学习目的
- 理解表单操作的基本模式和处理方法
- 理解MVVM是什么，和怎么实现
- 理解框架可用性和可扩展性以及两者之间的取舍
2. 移动端Web IM
2.1 任务描述
- 实现一个基于手机Web端的IM工具
- 可以实现文字、表情的交流
2.2 任务要求
- 从UI设计、前端、后端均由自己完成
2.3 任务目的
- 从无到有完整实现一个轻量级产品
- 体会全栈工程师
- 踩一踩移动端的各种大坑
3. 迷宫游戏
3.1 任务描述
- 基于WebGL，实现3D迷宫世界的自动生成
- 实现Avatar在迷宫里的运动
- 实现使用手机端作为Avatar的操作遥控器
3.2 任务要求
- 不要基于已有框架
- 足够炫
3.3 任务目的
- 深入学习并实践WebGL
- 学习跨端交互
- 尝试做一些炫酷的事情
4. 3D HTML World 游戏
4.1 任务描述
- 在PC浏览器上，针对一个普通的HTML页面，基于WebGL可以生成他的3D世界版本，由页面自身的DOM嵌套关系生产层峦叠嶂的DOM阶梯
- 可以操作一个3D小球在这个世界中前进、转向、加速、减速、跳跃
- 实现使用手机端的重力感应和触屏作为小球运动的操作遥控器
- 实现在同一个3D页面世界玩耍的小伙伴们能看见其他人的球
- 实现球与球之间的互动，如碰撞扣血之类的
4.2 任务要求
- 视觉效果好，画面流畅
- 游戏易上手、但富有乐趣
4.3 任务目的
- 深入学习并实践WebGL
- 学习跨端交互
- 尝试做一些炫酷的事情
5. Low Poly 生成器
5.1 任务描述
- 通过上传的图片，自动生成Low Poly（低多边形）图像
- 提供手动指定边缘和特征点，来提高生成图片的效果
5.2 任务要求
- 产品体验流畅
5.3 任务目的
- 基于前端技术做图像领域的深入研究
时间： 2024-10-08 09:04:10