1 前言

本人学艺不精，没有进行过任何系统化学习，曾经认为前端无非就是达成各种端的运行就可以了，在网页中奔跑，在微信小程序上奔跑，在app上奔跑，会用些前辈们造就的轮子。只要能用，那就是完成了。后来发现这一切并没有那么简单...

我所认为的前端

大二那年，我加入了专门为比赛而诞生的团队。为了快速的入门，学习了关于<div>和盒子模型，float:left。这些可以速成页面的法门，在没有语义化的世界里，其实html中<div>、<a>、<img>。已经足够可以统一网页前端的世界。然后就是不断的学习简单版的css,padding、margin、margin、border、background、width、height,其他的一律百度一下，你就知道。完全已经满足了，基本网页需求，关键是写的还蛮快的。那么js呢，其实初学者，只要懂一些c语言的运算符合数据类型，加上一个jQuery的选择器，难道非要去学习dom与bom？那些本来就需要时间和积累的东西嘛。我们只会朝着一个方向，就是敏捷开发，快速开发。

比赛的时候，还需要自己写一个后端，使用一门名曰php的语言，稍微了解了一下mvc的设计模式，靠着记忆力背出了连接数据库的语句。有一个叫做phpMyAdmin巧妙的生成了mysql的语句，学上增删改查，4个函数，就以为拿下了后端的世界。

开始工作了，我们写着简陋的ajax，调用着前辈们写好的方法，开始进行了一场拼图开发，这一切来得太简单，太容易了，似乎没有经历过什么痛苦，就已经成了所谓的"全栈工程师"，我们会写前端，也会后端，对于数据最大理解就是将数据存储在一个教myqsql的数据中。

工作了2年后，看到了社招的题目，猛然间五味杂陈，我看不懂什么叫做document，对于es6也就能说说let、const、var 和不知所以的箭头函数()=>。关于语义化也知之甚少。对于vue的理解也仅仅局限于双向绑定。webpack的使用无非就是百度一下，你就懂了。当然也会有人和我一样，对于webpack，局限在vue-cil脚手架上。前端的优化呢，使用工具压缩一下图片，将ajax的同步改成异步，防止页面堵塞。

难道这些就是前端?

对此告诫那些刚刚入门对于代码世界充满希望的人——**所有速成的东西，没一个是好东西。**我们总是喜欢一些，敲下回车，马上有效果的东西。我们对于原理而言，我们对金钱更加感兴趣，我们更喜欢关注一些，比如说这个行业目前自己值多少钱，这样实际的东西。

对此感谢掘金写作者计划，能够让我能够表达出，这2年对于前端的弊端，看到自己深深的不足。用上一句winter大神的话，重学前端。我将会分享一些关于前端一些入门笔记(当然有什么错误还请纠正)，让那些和我一样，对于前端的了解(狭义)的人，开始重新认识这个，广阔无际的前端世界，对于技术重新包含这敬畏之心。

如何学习前端？

针对知识点的各个击破策略

2 基本功考察

2.1 关于html

1. html语义化标签的理解;
2. 结构化的理解;
3. 能否写出简洁的html结构;
4. SEO优化
5. h5中新增的属性; 如自定义属性data, 类名className等, 新增表单元素, 拖拽Drag
6. h5中新增的API, 修改的API, 废弃的API 稍作了解 (离线存储, audio, video)

2.2 关于CSS

1. CSS选择器( 三大特性)
2. BFC机制
3. 盒模型

css入门 juejin.im/post/5cc569…

1. CSS模块化开发(封装),SCSS和LESS的使用

1. 屏幕适配 以及 页面自适应

1. CSS3中新增的选择器
2. CSS3中新增的属性, transform trasition animation等...

2.3 关于布局

1. 标准文档流(padding + margin + 负margin) + 浮动float + 定位 left + right + top + bottom
2. 百分比布局: px单位 用 %num代替, 占父级元素的百分比
3. flex弹性布局: 主轴 辅助轴的几个属性
4. grid栅格布局: 使用框架中的类名来替代: 本质上还是百分比布局

2.4 关于JS基础 (完成)

1. 变量数据类型及检测: 基本 + 引用
2. 运算符: 算术 + 条件 + 逻辑 + 位 + 短路, 隐式转换等
3. 条件, 循环, 异常处理 if switch(){case xxx:} try catch finally throw
4. 函数定义, 调用方式(apply, call, 直接调用), 传参: 实参给形参赋值
5. 字符串, 数组, 对象常用API

JavaScript基础入门笔记   juejin.im/post/5caaf9…

2.5 正则表达式

2.6 关于JS高级

1. 作用域, 作用域链, 闭包
2. 原型, 原型链, 继承
3. 函数上下文, this指向
4. js的运行机制, 事件队列和循环
5. 同步, 异步编程

预解释作用域this juejin.im/post/5cc6b3…

JavaScript | 异步处理 juejin.im/post/5cd97d…

2.7 关于浏览器

1. 浏览器的构成和运行机制
2. 浏览器内核
3. 浏览器交互: BOM和DOM相关webApi, 监听事件
4. 浏览器缓存机制
5. 浏览器的渲染原理
6. 浏览器的安全性: 跨域 和 攻击

2.8 关于网络协议 (完成)

1. HTTP协议
2. Ajax原理

http与ajax入门笔记  juejin.im/post/5cab02…

2.9 cookie, session, token

2.10 关于ES6语法 (完成)

1. 字符串, 数组, 对象 扩展的api
2. 变量扩展: let const 解构赋值 块级作用域
3. 函数扩展: 箭头函数 默认参数, rest参数
4. 展开运算符, 模板字符串
5. set 和 map数据结构
6. 迭代器和生成器函数 next 和 yield的理解
7. proxy对象 属性代理器: 属性的读取（get）和设置（set）相关操作
8. promise对象, 异步编程的解决方案
9. async + await: 异步编程的终极方案 promise + generator的语法糖
10. class语法 构造函数的语法糖
11. 模块化编程 export + import 的 导出和导入

ECMAScript 6入门笔记 juejin.im/post/5c81dd…

2.11 VUE基础

1. 基本指令
2. 实例的 属性 和 方法
3. 实例的生命周期
4. 组件基础: 创建,注册,添加属性方法,套用等...
5. 组件通信传值  父子, 兄弟, 跨级
6. 插槽slot 等...

2.12 VUE高级

1. vue-router: 搭建SPA

• 路由,组件的配置
• 路由间的传值
• 路由跳转
• 路由的导航守卫
• 记住在router.js 和 组件页面中的使用方式

1. vuex: 状态管理: 数据仓库store

• 实例化仓库的5大属性的使用
• state, getters, mutations, actions, modules
• 辅助函数mapState等..., 仓库中计算属性的映射, 方便操作
• 记住在 store.js 和 组件中 使用方式

2.13 VUE深入, 源码阅读

1. 数据响应式原理
2. virtual dom
3. diff 算法
4. nextTick等等...

3 工程能力考察

3.1 项目能力

1. vue-cli脚手架搭建 和 功能配置 vue.config.js
2. webpack的常用配置
3. 项目构建 打包
4. 熟悉各类框架的文档...
5. UI框架: Bootstrap, MUI, Element-ui等
6. 常用的插件整理, 整理一个自己插件库, 封装自己的方法库,组件库
7. 常用的工具熟练度
8. PC端 和 移动端开发注意事项
9. 经验总结: 快速确定项目的技术选型
10. 坑点总结: 项目遇到坑坑坑!!!
11. 项目中的性能优化记录 ( 都是细节点...多记录 )
12. 需求文档的理解, 可以结合 项目流程图, UML图
13. 问题解决能力: (bug定位调试, 查找文档, 寻求他人...)
14. 记录习惯养成

3.2 模块化, 组件化开发能力

1. 项目分类; 各类文件整理,分类
2. 各类功能封装
3. 组件和功能模块的抽离, 解耦, 复用

3.3 前端优化方案 (完成学习)

1. 优化css
2. 优化图片
3. 优化js
4. 优化html
5. 移动端
6. cookie
7. 服务器端

前端优化方案 juejin.im/post/5cab0f…

4 内功考察:

4.1 面向对象的编程思想

1. 类的抽象
2. 对象的封装, 继承

• 为了更好的去管理数据, 分类数据     实现高内聚, 低耦合

4.2 设计模式

设计模式感觉也是 将面向对象思想 再度抽象成现实中 某些特定模式
数据结构和算法

学习常用的排序搜索算法, 顺序表,链表,栈,队列,树,堆 结构等等...
考验你的 抽象思维 和 数学功底了
将现实需求 抽象成 计算机代码 的思维能力

5 附加技能考察:

5.1 学习能力

1. 持续学习的态度--博客, 笔记记录
2. 技术论坛活跃度高, 问答多
3. GitHub开源项目参与

5.2 了解一门后端语言

1. python, node.js, php等...
2. 数据库mysql,redis,mongodb.  sql的操作语句, mongo的操作语句, redis操作语句
3. node + express 搭建本地服务等
4. egg()

5.3 系统编程

1. Linux命令行操作, 系统文件管理
2. 多任务, 多线程, 多进程, 协程, 并发, 并行, 串行, 同步, 异步等概念的理解