前端学习

front_end

Angular学习

目的

1. 后续的框架，JS学习都是针对Angular，先对Angular有大概了解，方便后续学习

学习要点

1. angualr工程文件结构
2. angualr常用概念
   
   1. 数据绑定
   2. service
   3. component
   4. directive
   5. dependency injection
   6. navigation
   7. remote data access

学习步骤

1. 搭建angualr开发环境
2. 走一遍angular官方turorial

考核与奖励

考核： 在tutorial基础上，新增加一个列表页，并可过滤显示相关item。
奖励： 最快实现该功能的奖励番茄时钟一个

框架学习

目的

1. 学习包管理工具npm
2. 学习前端构建工具webpack

学习要点

1. npm 常用命令

   1. 配置命令，如：查看与配置registry
   2. 查找，安装，卸载npm包，和常用的一些参数

2. webpack的配置

   1. 各项task的配置
      
      1. copy: 有些资源需要拷贝到dist对应目录
      2. concat： 多个文件合并，减少请求个数
      3. uglify： 压缩js文件
      4. cssmin： 压缩css文件
      5. filerev： 为文件缓存准备
      6. usemin： 文件名修改了，html中也要修改相应文件名
      7. htmlmin： 压缩html文件
      8. type script预编译
      9. proxy： 开发时CSRF问题
   2. webpack常用debug设置

学习步骤

1. 搭建angular2-webpack-starter环境
2. 学习该框架针对上述task是怎么配置的

考核与奖励

考核： 给出各个task debug步骤
奖励： task debug过程写的最有例，有据的，奖励价值250元钢笔一只

HTML & CSS

目的

1. 自己也能写页面模板

学习步骤

1. 实现mertonic的header， siderbar， footer架子
2. 实现header上用户信息下拉效果
3. 实现siderbar的各项效果

考核与奖励

奖励： 最短的代码，最快的实现metronic框架，奖励100元下午茶经费

JS 学习

目的

1. 写出简洁高效JS代码
2. 了解angular内部实现原理

学习要点

1. 数据绑定机制
2. dirty check实现机制
3. dependency injection
4. service Singleton

学习步骤

1. 针对学习要点，阅读源代码
2. 断点调试源码
3. 自己动手实现angular其中的机制

考核与奖励

每人选择一个点，share angular其实现机制，钱总，马总给分，得分最高者，奖励可刷openwrt，有USB接口的路由器