前端分享

分享一下前端方面的心得！

知识路径

实现静态页面

目标：能实现市面上大部分官网(静态)页面
你需要：

1. 知道HTML有哪些标签，它们有什么特性，在合适的地方使用。
2. 知道CSS相关属性，明白它们各自的作用，组合后的作用，用多种方法实现一种效果，并对比场景。
3. 从简单到复杂，从模仿到独立创作，反复练习。

实现交互页面

目标：能够独立实现常见页面交互
你需要：

1. JS基础语法
2. DOM / BOM, 并理解其中能够达到“一样”效果的API的细微区别. 优劣.
3. 接触并应用封装，组件化思想
4. 试着将常见交互过程抽象，造小轮子
5. 比对 mix(CSS+JS) vs only JS实现的优劣，理解 结构-表现-行为 分层。

深入javascript

1. 原型，继承的实现。理解并应用概念：私有/公有方法，接口等。理解它们带来的好处.
2. 一些比较tricky的知识点： 类型检测, 运算符，this，闭包，并理解它们在实际使用中需要注意的地方。( 稳妥类型检测 / bind this / 闭包引起内存泄露 )
3. 掌握高阶函数，以及高阶函数思想，理解数据流，接触函数式思想。
4. 理解异步(对比同步)，并能够利用熟练操控异步流程 => 可以试着实现一个小型动画流程库.
5. 理解事件循环(Event Loop)，macro / micro，[五星重点，揭示JS运行]
6. 常见设计模式

工程化

目标： 掌握前端项目开发工作流搭建，提高开发效率
你需要：

1. 理解模块化，模块依赖。
2. 理解代码压缩，掌握打包工具的使用。
3. 理解预处理，polyfill/shim，compiler等概念。
4. 理解并应用自动化测试，单元测试，端到端测试
5. 理解gitflow，自动化部署等概念。
6. 性能优化： HTTP / 服务端渲染
7. 代码规范 CSS naming style / JS coding style
8. 代码检查: Lint

框架

React Vue Angular
为组件化提供辅助。本质还是JS。从它们的设计中学习。个人比较喜欢React。

热点问题：

1. 组件通信
2. 状态管理 redux / vuex / rx
3. 框架原理：
   a. 效率(virtual dom / 脏检查 )
   b. 机制(单向数据流 / 双向绑定 )
   c. 具体实现 (asynchronous setState / 双向绑定)
   d. 原理应用
   i. 优化BatchUpdate
   ii. 优化复杂场景通信
   iii. 优化大规模数据量view层渲染性能
   iiii. 概念: 依赖注入，控制反转

输入和输出

输入

1. 多来源，产生对比，提取相似。
2. 文章 / 书籍 / 源代码 / 别人的代码 / 同事的代码
3. 了解趋势观点，首选网络文章，博客，twitter
   系统化学习知识，首选书籍。
   深入掌握底层原理，首选源码。
   学习技巧，汲取经验： 别人/同事的代码
4. 用输出当输入： 写教程。
   有时候自己思路有点混沌，试着像人阐述一遍，自己感觉更懂了。
5. 体会痛点，搜集问题。

输出

1. 模仿知识来源的代码。
   这里我用了模仿，而不是记忆，强调实践，验证。
2. 将它们合并在一起，组合使用。
3. 谨慎创造，大胆“模仿”。

心得，解惑 => 写博客 / Wiki / 分享

一定要乐于分享，理解开源精神带来的双赢互利。
Learn from it, give back to it.

没有一遍写成的代码 只有比上一次更好的

1. 代码整洁之道
2. 重构
3. 设计模式
4. coding要无耻，提commit要带着羞耻心
5. 写出bug也是一种进步的时机