前端学习路线（很长，建议收藏）

wmshero
300 阅读8分钟

后续还会添加，建议加入收藏夹，以免遗失。

已经建议了学习交流群，私聊拉

这些知识掌握得差不多了之后，建议选一个喜欢的方向进行钻研，成为你的擅长点，朝着这个目标进军，提高核心竞争力。

方向有很多：架构师，3d, 全栈等等好多

前端工程师职业规划

更新微信公众号（ 双击屏幕祝你越来越强 ）

微信公众号：

  • 腾讯AlloyTeam
  • 印记中文
  • 奇舞周刊
  • 前端大全
  • 前端外刊评论
  • 前端早读课
  • 前端之巅
  • 凹凸实验室
  • Node地下铁
  • FEX
  • W3cplus
  • w3ctech

后续还会添加，建议加入收藏夹，以免遗失。

这些知识掌握得差不多了之后，建议选一个喜欢的方向进行钻研，成为你的擅长点，朝着这个目标进军，提高核心竞争力。

方向有很多：架构师，3d, 全栈等等好多

前端工程师职业规划

更新微信公众号（ 双击屏幕祝你越来越强 ）

微信公众号：

  • 腾讯AlloyTeam
  • 印记中文
  • 奇舞周刊
  • 前端大全
  • 前端外刊评论
  • 前端早读课
  • 前端之巅
  • 凹凸实验室
  • Node地下铁
  • FEX
  • W3cplus
  • w3ctech github.com/qianguyihao…

这是一个大佬总结的知识点，特别\全且清晰，所以分享出来

image.png 一、编辑器：

  1. VSCode (推荐使用)
  2. WebStorm
  3. Atom
  4. Sublime

2019年黑马程序员前端入门视频教程 HTML5+CSS3-简单有趣好玩-pink老师_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

二、HTML

三、CSS

  • 基本语法
  • 布局（浮动float、定位position、盒模型、flex、grid/layout)
  • 响应式布局
  1. viewport（用户网页的可视区域）
  1. 流动布局（fluid grid）
  2. 媒体监听@media

@media only screen and (max-width: 500px) { .gridmenu { width:100%; } }

image.png

CSS 教程 | 菜鸟教程

四、JS(特别重要，将时间多花点在JS上)

尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

  • 基本语法
  • 函数
  1. 函数定义和调用
  2. 变量作用域与解构赋值
  3. 方法
  4. 高阶函数
  5. 闭包
  6. 箭头函数
  7. generator
  • 标准对象
  • 面向对象编程
  1. 创建对象
  2. 原型继承
  3. class继承
  • ES6+
  • this、call、apply
  • 异步（Ajax、promise、async/await）
  • 设计模式（推荐看书《JavaScript设计模式与开发实践》）,将js都学完再来看设计模式

目前很多公司都使用了Typescript，面试的时候大都会问你会不会ts,所以伙伴们也要学习起来了

五、版本管理工具Git

推荐使用软件（Tower/sourcetree)

快捷方便，commit 、push、 pull、 checkout 、merge、 restore、 rename等等，一键搞定 image.png

  • 创建仓库

git init

  • 基本操作
  1. git clone
  2. git add
  3. git diff
  4. git commit
  5. git rm
  6. git reset HEAD
  • 分支管理
  1. git branch (branchname)
  2. git merge
  3. git rebase (branchname) Git 指令 牢记 · 语雀
  • 使用github搭建个人博客，可用以下
  1. hexo
  2. gatsby
  3. vuePress

很多公司都实行Code Review， 排查问题，提高代码质量、统一风格，团队合作建议实施code review，可以多参考借鉴成熟并且有效的code review规范。

六、Node(不用学太深)

包管理

  • npm （相当于手机里的应用商店，可以下载很多软件包）
  1. npm install (安装单个软件包)
  2. npm update (更新软件包)
  3. npm run (运行任务)
  4. npm uninstall (卸载 npm 软件包)
  5. -g标志可以执行全局安装
  6. -S就是--save的简写
  7. -D就是--save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而--save会将包的名称及版本号放在dependencies里面。
  • yarn
  • npx

常用包

  • 文件读写fs
  • 路径查找path
  • 网络http

相关：：：

express.js (node.js 的优化版）

koa (基于node.js的web开发框架)

七、构建工具

自动化构建

  1. npm script

npm 允许在 package.json 文件里面，使用 scripts 字段定义脚本命令 npm scripts 使用指南

相关：：：：

  • gulp
  • 模块化打包
  • webpack(推荐)
  • Rollup
  • Snowpack
  • Parcel
  • grunt

八、CSS预处理

  • Sass(推荐）

Sass教程 Sass中文文档 | Sass中文网​www.sass.hk

  • PostCss
  • Stylus
  • Less

转载CSS 预处理器 sass,less,stylus优缺点

九、JS框架(没有好与不好，只有适不适合)

  • React(推荐）

官方文档 一定一定 要仔细的 从头到尾 多看 几遍 ！！！！

  1. Redux(redux-toolkit)
  2. React Hooks
  3. Mobx
  4. React-router Vue（推荐）
  5. Vuex
  6. Vue-router
  • Angular
  1. RxJS （异步优化）
  2. NgRx

十、CSS框架

  • Antd(推荐)
  • Element UI（推荐）
  • Material UI
  • Bootstrap
  • semantic UI
  • vant (移动端）

十一、CSS优化方案

styled-components(推荐)

import styled from 'styled-components'; 
const Wrapper = styled.section`
margin: 0 auto; 
width: 300px; 
text-align: center;
`; 
const Button = styled.button`
width: 100px; 
color: white; 
background: skyblue;
`; 
render(
    <Wrapper>
    <Button>Hello World</Button> 
    </Wrapper> 
);
  • CSS Modules（推荐）

Styled JSX

十二、性能

白屏、卡顿、页面加载失败、页面跳转慢、图片空窗、崩溃、耗电等问题一直都是用户频繁舆情反馈的痛点。

  • 性能指标
  1. 白屏时间
  2. 首屏时间
  3. 用户可操作时间
  4. 页面总下载时间
  5. 请求数量
  • RAIL模型
  • LightHouse指标
  • DevTools
  • PWA
  • Service Worker
  • 骨架屏（骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。）
  • gzip
  • 懒加载和预加载
  • 包分析工具（构建代码之后，明白到底是什么占用了那么多空间？可以使用 webpack-bundle-analyzer）
  • 防抖、节流（优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。）

十三、数据可视化

  • ECharts(推荐)
  • AntV
  • HighChat
  • ucharts(小程序)

十四、移动端应用（Android Studio / XCode）

  • React Native(推荐)

React Native 插件汇总：

  • react-native-linear-gradient 颜色渐变处理
  • react-native-login 视频界面登录
  • react-native-keyboard-aware-scroll-view 键盘显示处理
  • react-native-popup-dialog 弹窗
  • react-native-dropdownalert 一种非常漂亮的alert弹窗方式，从状态栏往下弹窗；
  • react-native-simple-radio-button 单选按钮；
  • react-native-swiper
  • react-native-macos macos桌面应用
  • react-native-wechat 集成微信相关SDK
  • react-native-modalbox 模态弹窗
  • react-native-touch-id 指纹登录
  • react-native-prompt 可输入文字的弹窗
  • react-native-sqlite-storage sqlite数据库存储
  • react-native-permissions 权限检查
  • react-native-progress-hud loading圈
  • react-native-snackbar 类似toast的弹窗模式
  • react-native-qrcode-svg 二维码生产工具
  • native-base UI组件
  • react-native-busy-indicator loading圈
  • react-native-fit-image 图片展示优化
  • react-native-timer 定时器管理
  • react-native-scrollable-tab-view 可以左右滑动的tab
  • react-native-zip-archive 解压工具
  • react-native-xml2js
  • react-native-spinkit 好看的loading圈
  • react-native-interactable 有很强交互效果的table视图
  • react-native-pull-to-refresh 下拉刷新效果
  • react-native-deck-swiper 不错的swiper效果
  • react-native-prefix-picker select效果
  • react-native-gesture-helper 手势 向上还是向下 还是向左
  • react-native-drawer-layout 抽屉效果
  • react-native-sortable-listview 可拖拽排序的列表视图
  • react-native-progress 进度条 长方形 圆形
  • react-native-splash-screen 启动屏处理
  • react-native-masked-text 指定格式的输入框
  • react-native-keyboard-manager 针对IOS 键盘遮挡的问题 俺可以这么用android:windowSoftInputMode="adjustResize"
  • react-native-beacons-manager 蓝牙处理
  • react-native-fetch-blob 文件获取
  • react-native-popup-menu 弹出菜单
  • react-native-pathjs-charts 图表
  • react-native-dates 日历日期选择工具
  • react-native-calendar-strip 一种简单的日历处理
  • react-native-simple-markdown 简单的markdown文本编辑器
  • react-native-image-progress 进度条
  • react-native-img-cache 图片缓存技术
  • rn-placeholder 在展示具体的文字和图片之前有个加载样式处理
  • react-native-pie-chart 饼状图
  • react-native-maps 地图
  • react-native-loading-overlay loading圈加载遮罩
  • react-native-progress 圆形进度条 react-native 圆形进度条
  • react-native-modal 弹窗插件 react-native-modal
  • react-native-extra-dimensions-android 安卓水滴屏获取屏幕高度 Sunhat/react-native-extra-dimensions-android

Weex(阿里巴巴旗下的跨平台移动开发解决方案) Flutter

十五、小程序

原生

  1. 微信

微信开放文档​developers.weixin.qq.com

2)支付宝

支付宝开放平台文档​opendocs.alipay.com

3)头条

跨端

  • Taro

原生

  1. 微信

微信开放文档​developers.weixin.qq.com

2)支付宝

支付宝开放平台文档​opendocs.alipay.com

3)头条

跨端

  • Taro
  • uni-app

十六：桌面开发

Electron （推荐）

十七：扩展学习

十八、代码检查

解决代码质量问题！

十九、调试工具

jest

Mocha

二十：前端周刊

Hello from React Status | React Status

奇舞周刊

avatar
文章
阅读
粉丝