前端学习路线

前端学习路线，知识点梳理思维导图。

前端学习路线和资源

• 第一阶段
  • 开发环境搭建
    • 开发工具
      • hbuilder
      • Vscode
      • webstorm
    • 基础的计算机命令
  • HTML
    • 常用的标签
    • 表单
    • 语义化
    • 多媒体
      • video
      • audio
    • 常用的api
      • 文件读取
      • 网络状态
      • 本地缓存
      • 拖放
      • 定位
    • Dom
  • CSS
    • 基础语法
    • 样式的优先级
      • 直接样式（行内）
      • 祖先样式（行外——继承的样式）
      • 外部样式（选择器）
    • 弹性盒模型（flex）
    • 动画和过渡效果
  • JavaScript
    • 基础语法
    • 常见的数据结构
      • 数组
      • 集合
      • 堆栈
      • 队列
      • 链表
      • 哈希
      • 树
      • 资料
        • 黑马数据结构和算法
        • 慕课
    • JavaScript执行机制
      • Javascript是 单线程 的
      • 在JavaScript中，任务分为同步任务和异步任务
    • 面向对象
      • 原型链
      • 实现继承的几个方法
    • Js重点
      • 闭包
        • 1.定义：在内部函数，当变量在定义它的作用域外被引用时，就产生了该内部函数的闭包，如果内部函数引用外部函数的变量，当外部函数调用完毕后，这些变量在内存中不会被释放，因为闭包需要他们
        • 2.产生条件
          • 嵌套的函数
          • 内部函数引用外部函数的数据
        • 3.本质：闭包就是将函数内部和函数外部连接起来的一座桥梁
        • 4.作用
          • 读取函数内部的变量
          • 让这些变量始终保存在内存中
          • 可以避免使用全局变量，防止全局变量污染
        • 5.注意点
          • 滥用闭包内存消耗较大，影响性能
          • 闭包会在父函数外面修改函数的值，所以使用起来需要非常注意
        • 参考
      • Promise
        • 1.定义：所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理
        • 一个对象，用来处理异步操作。使异步操作写的更优雅、更易于阅读
        • 状态：
          • pending(进行中)
          • resolved(完成：成功的回调)
          • rejected（失败：失败的回调）
        • 状态转换
          • pending->resolved
          • pending->rejected
        • 参考
      • 类型转换
      • 作用域
    • 正则表达式
    • 如何操作Dom
  • 网络相关基础
    • 常见的通信
      • HTTP/HTTPs
      • IP/UDP
      • websocket
      • 参考
    • 常见的响应方式和状态码
      • Json
      • xml
      • 404
      • 400
      • 500
      • 200
      • 504
    • ajax通信
    • mock数据
    • 参考
  • 浏览器相关的知识
    • 浏览器的兼容性
    • SEO
      • https://www.bilibili.com/video/BV1fE411J7ya
    • Debug
      • https://www.imooc.com/learn/759
      • https://www.imooc.com/learn/1164
  • 资料规整
    • 黑马36期 https://www.bilibili.com/video/BV1g4411N71d
    • 鱼c小甲鱼 https://www.bilibili.com/video/BV1QW411N762
    • 尚硅谷 https://www.bilibili.com/video/BV1XJ411X7Ud
    • 电子书合集 https://github.com/biaochenxuying/awesome-books
• 第二阶段
  • Git与Svn
    • 主要讲Git吧
    • 流程
      • （此流程为我司流程：供参考，可能会有不同）
      • 1.git status （查看更新）
      • 2.git stash (保存当前的改动到本地)
      • 3.git pull (拉取远程更新)
        • 这一步是为了防止冲突的，使用git以来，最难解决的问题就是冲突
      • 4.git stash pop (把保存在本地的修改释放)
      • 5.git add .(将所有改动添加)
      • 6.git status (查看当前状态是否变绿)
        • 此操作也可不要，但是规范的时候还是需要
      • 7.git commit (进入提交信息填写黑窗口)
        • 不推荐使用git commit -m feat： ""
        • 提交信息是给被人看的，此次干了哪些，解决了什么问题，有哪些难点等等
        • 我司commit规范
          • feat(用户): @Task1，新增登录注册功能# 新增系统登录登录功能，可使用邮箱、密码进行用户注册；# 邮箱发送验证码，验证通过后，即可登录。
        • 规范
          • feat： 新增featurefix: 修复bugdocs: 仅仅修改了文档，比如README, CHANGELOG, CONTRIBUTE等等style: 仅仅修改了空格、格式缩进、都好等等，不改变代码逻辑refactor: 代码重构，没有加新功能或者修复bugperf: 优化相关，比如提升性能、体验test: 测试用例，包括单元测试、集成测试等chore: 改变构建流程、或者增加依赖库、工具等revert: 回滚到上一个版本
    • 学习资料
      • https://www.bilibili.com/video/BV15J411973T
      • https://www.bilibili.com/video/BV13s411h7QM
  • JavaScript进阶
    • 基本的的算法学习
      • 排序
      • 搜索
      • 数组操作等
    • 函数式编程
      • 是一种编程范式
      • 举例
    • ES6学习
      • https://segmentfault.com/a/1190000004365693
      • https://segmentfault.com/a/1190000004368132
    • 模块化
      • 学习资料 https://www.bilibili.com/video/BV1WJ411P7DH
    • typeScript
      • 学习资料 https://www.bilibili.com/video/BV1AE41137QL
  • 框架学习
    • node.js
      • JavaScript运行环境
      • 优点：Node.js是一个事件驱动，非阻塞式的I/O的模型，异步编程，使其轻量又高效
      • 缺点
        • 单线程
        • 单进程
      • 学习资料 https://www.bilibili.com/video/BV1bs411E7pD
    • 打包和构建
      • webpack
        • https://www.bilibili.com/video/BV1e7411j7T5
        • https://www.bilibili.com/video/BV1oK411p7SJ/
        • https://survivejs.com/webpack/preface/
      • grunt
      • gulp
      • babel
        • 学习资料 https://www.bilibili.com/video/BV1jt411z7Wk
    • css预处理
      • less
      • sass
      • stylus
      • 看了别人写的样式，回头看看自己的，妈呀，不能看
      • 参考：https://juejin.im/post/6844903808049348616
    • JavaScript
      • 前期准备
        • 了解MVC、MVVM、MVP架构的区别
        • 了解服务端渲染和SPA区别
      • 三大主流框架
        • Vue（对小白比较友好，学完后学习react会简单很多）
          • 基础语法
          • 渐进式的JacaScript框架
          • 数据绑定
          • 生命周期
          • 组件化开发
          • vue-router（路由）
          • vuex（状态管理）
          • vue-cli（脚手架）
          • 学习视频
            • https://www.bilibili.com/video/BV1H7411j7Mc?p=1
            • 视频比较全，建议倍速观看，跟着操作，光看是没用的
        • react
          • 基础语法
          • router
          • redux
          • hooks
          • create-react脚手架
          • 学习资料
            • https://www.bilibili.com/video/BV1g4411i7po
            • https://www.bilibili.com/video/BV1CJ411377B
            • https://www.bilibili.com/video/BV1st41137hg
            • https://www.bilibili.com/video/BV1uT4y1G7xm
        • angular
          • 本人未进行学习
          • 学习资料
            • https://www.bilibili.com/video/BV1bt411e71b
            • https://www.bilibili.com/video/BV1i741157Fj
      • 网络
        • axios
          • 学习资料 https://www.imooc.com/learn/1152
        • uni-request
      • UI
        • Element
          • 饿了么推出的UI框架，我司也在使用，简单易上手
          • vue-element-admin
            • https://github.com/PanJiaChen/vue-element-admin
            • 在线预览：https://panjiachen.gitee.io/vue-element-admin/#/login?redirect=%2Fdashboard
            • 功能齐全，我司也一直在使用
        • Ant
    • 移动端开发
      • 小程序开发
        • https://www.bilibili.com/video/BV1nE41117BQ
        • https://www.bilibili.com/video/BV1M7411w7ez
      • 原生开发
        • Android原生开发
        • ...
      • 跨平台开发
        • uniapp
          • 我司主要的技术栈
          • UI
            • ColourUI
            • Vant
            • GraceUI
            • 都是很好看的UI，扩展性个人觉得ColorUi不错
        • flutter
          • 做出来的很炫酷，待学习
        • 资料
          • https://www.bilibili.com/video/BV15t411U7yf
          • https://www.bilibili.com/video/BV1S4411E7LY
          • https://www.bilibili.com/video/BV15J411L7PS
          • https://www.bilibili.com/video/BV11J411n7Zv
          • https://www.bilibili.com/video/BV1ZJ411p7kp
      • 小游戏开发
        • cocos
          • 极客学院 https://www.bilibili.com/video/BV1Px411v7u8
        • 白鹭
          • 官网 https://docs.egret.com/engine/videoplayback
• 第三阶段
  • 前端进阶
    • 性能优化
      • https://segmentfault.com/a/1190000020867090
      • 这个博客讲的比较齐全，后期自己也会认真整理一遍
    • 源码解读
    • 浏览器原理
    • 自己造轮子
    • 设计模式
  • 服务器相关
    • linux基础
      • 学习资料 https://www.bilibili.com/video/BV1pE411C7ho
    • nginx
      • 学习资料 https://www.bilibili.com/video/BV1zJ411w7SV
    • docker
      • https://www.bilibili.com/video/BV1GW411w7pn
      • https://www.bilibili.com/video/BV18b411K7q7
  • 服务端开发
    • 了解serverless
      • https://juejin.im/post/5d9c47dce51d4578045a3569
      • https://juejin.im/post/5cdc3dc2e51d453b6c1d9d3a
    • 数据库知识
      • 关系型数据库
        • Mysql
      • 非关系型数据库
        • MongoDB
          • 我也整理了一张脑图，可以看我的主页
      • https://www.bilibili.com/video/BV12b411K7Zu
      • https://www.bilibili.com/video/BV18s411E78K
    • node的网络框架
    • session/cookie
    • 权限管理与认证
• 拓展
  • 推荐博客
    • 阮一峰 http://www.ruanyifeng.com/home.html
    • 廖雪峰 https://www.liaoxuefeng.com/
    • 技术胖：https://jspang.com/
    • 张鑫旭 https://www.zhangxinxu.com/
  • 推荐网站
    • 面试
      • 牛客：https://www.nowcoder.com/
      • 力扣：https://leetcode-cn.com/
    • 菜鸟教程
    • 掘金：https://juejin.im/
    • 齐舞周刊：https://weekly.75team.com/
    • 好多好的博客网站等待你挖掘等等
• 注意点
  • 多敲，光看视频是没用的
  • 新技术学习方法
    • 1.首先通读官方的API
      • 对技术有一个大概的了解
      • 时间：1-2天
    • 2.实战（自己上手操作）
      • 注意参考官方的小案例（demo）手动跟着操作
      • 时间大概维持在4或7天
      • 查看视频教程（github /慕课/掘金/极客）
    • 3.github（了解技术的相关生态）
    • 4.用（学了之后不用几天就忘了）
  • 提升代码质量
    • 1.看书（了解什么是代码质量）
      • 《代码大全》
      • 《code clean》
    • 2.以测试为驱动进行开发
      • 让代码简捷可用
      • 提升代码质量
      • 降低bug出现的概率
    • 3.工匠精神
      • 对自己的代码负责，自己负责的代码就把他码好
      • 发现不好的代码，改掉，甚至重构
  • 学什么技术好
    • 一看就业机会
    • 二看兴趣
      • 多学少砖
      • 采用新技术学习的方法，确认自己是否感兴趣
    • 三看薪水
      • 没钱是真的不行
    • 四看发展前景
      • 持续性判断（一门技术如果盛行了很久，很多软件使用。就会产生很大的生态圈，产生林迪效应）
      • 市场缺口
      • 拉勾网
      • 100offer