提交要求

1. 使用Git管理代码，并使用Git托管平台；

2. 在Git Repository中附一Markdown格式文档，内容包含遇到的问题和解决方案；

3. 为项目撰写符合 Best Practice 的 README 文档，可以参考以下规范：

   1. https://github.com/RichardLitt/standard-readme
   2. https://github.com/othneildrew/Best-README-Template

4. 本页面中的习题包括文档与代码，所有题目均写在同一份文档中，并导出为 PDF 格式，命名为 SynX 招新-前端类题目-20xxxxxxxxxxx-XXX.pdf。内容仅需是 Git Repository 的 URL（例如 github.com/xxx/xxx）。

5. PDF 文档通过邮箱提交，邮箱为：[email protected]，邮件的主题为 SynX 招新-前端类题目-<学号>-<姓名>。

6. 题目提交的截止时间为 2022 年 10 月 9 日 24:00，在截止时间之前，可以无限次的提交。

通用可选项

1. 使用某种技术（GitHub Pages、Netlify等）部署能供公网访问的页面。

搭建静态页面（大一）

[blame 以德御行]

1. 要求

   1. 具有基础简历的所有内容（具体内容不关键）
   2. 具有一定的自定义样式

2. 可能需要学习的内容

   1. MDN教程（入门先看完HTML和CSS部分）
   2. Semantics

搭建ToDoList（大二）

[blame 以德御行]

1. 要求

   1. 能够添加和删除待办项
   2. 能够切换待办项的完成状态（完成至未完成、未完成至完成）
   3. 点击待办项能够以弹窗的形式显示具体信息
   4. 能够可持久化储存ToDoList

2. 可选项

   1. 使用框架来构建项目
   2. 使用ECMAScript 6或者TypeScipt来处理交互
   3. 使用Electron打包项目
   4. 具有适当的过渡动画
   5. 可以拖拽代办项进行排序（不使用组件库为优）

3. 可能需要学习的内容

   1. JavaScript
   2. LocalStorage
   3. Electron
   4. ECMAScript 6

什么是娱乐题？

娱乐题需要用到的知识属于广义的前端内容，如果你学有余力的话可以尝试完成娱乐题。正如标题所述，娱乐题旨在于大家无聊之时起打发时间的功效，但其完成结果仍然可能作为招新参考。

初探WebGL（娱乐题）

[blame 以德御行]

1. 背景
   最近数字孪生被炒得如火如荼，而WebGL正是实现它的一种方式。

2. 要求

   1. 使用Three.js加载并渲染一.ply格式的点云文件；
   2. 使用射线拾取功能侦测点击位置，并在点击位置渲染一红球。

3. 可选项

   1. 对巨大的点云数据进行降采样；
   2. 分片加载——将一份很大的点云文件分多份加载能够及时给用户以反馈。根据米勒给出的理论，10秒为用户保持注意力执行本次任务的极限，如果超过此数值时仍然得不到有效的反馈，用户会在等待计算机完成当前操作时转向其他的任务。
      • Response time in man-computer conversational transactions
   3. 小地图显示
   4. 战争迷雾（面对一个大地图，为了提升性能会根据摄像机位置作选择性渲染）

4. 可能需要学习的内容

   1. Three.js官网Manual（看完Creating a scene、Installation后就可以了）
   2. 什么是PLY文件
   3. Three.js导入PLY模型的示例
   4. 射线拾取文档
   5. 射线拾取示例
   6. 供参考的点云数据（这个相对较大）
   7. 点云文件的切分

5. 注意项

   1. 这与HTML、CSS、图形学（所以使用现成的点云数据）等关系甚小，旨在考察自学能力；
   2. 完成基本要求的过程中遇到的问题100%可以在官网的文档和例子中找到答案，因此完成基本要求是并不复杂的；
   3. 可能面对一个全新的问题觉得无从下手，这正是一个锻炼信息搜索能力和英语的好机会。多使用Google搜索，使用恰当的英语描出自己的问题也是一门能力。

初探WebAssembly（娱乐题）

[blame 以德御行]

1. 背景
   JavaScript作为被大量项目重度使用的语言，它的语法和运行性能长期被人诟病。（There are only two kinds of languages: the ones people complain about and the ones nobody uses）虽然强大的V8引擎的JIT技术极大增强了JavaScript的性能表现，仍然有一群人觉得还不够，于是有了WebAssembly。

2. 要求
   编写一文件，在控制台输出使用WebAssembly技术的代码和纯JavaScript代码实现相同功能的运行时间对比。（什么代码作性能指标效果显著？）

3. 可选项
   提供一个简单的HTTP服务，用来返回.wasm文件；并在页面中请求此文件，且使用流式编译技术，This is the most efficient, optimized way to load wasm code。

4. 可能需要学习的内容

   1. Emscripten—A Complete Compiler Toolchain to WebAssembly
   2. WebAssembly