参加工作三年多了, 最近业务不是很忙, 心里反而空落落的. 最近参与了一个公司 UI 库开发, 发现自己不懂的东西实在太多. 以此为契机吧:
1. 有必要把近两年的经验知识沉淀一下, 与标准和文档进行一一印证, 查漏补缺.
2. 工具不仅要会用, 用的好, 还要知道原理.
3. 即便是有些知识暂时用不到, 作为一名有点追求的工程师, 应该提前做一些知识储备.
写到此处惊觉自己这两三年在技术上还是成长了的, 2016 年我需要看着前辈们的分享, 大家说有用我就学, 听前辈的总没错, 2019 年我可以根据自己的经验和体会总结出该怎么去系统的学习了, 并且轻重缓急自己心里都有底.
现在返回到标题, 前端工程师应该学什么? 我写了一个大纲, 但里面的学习目标是对自己说的, 发出来一是为了跟大家分享一下, 共同学习; 二是希望你们帮我看看, 有没有遗漏下的.
我的自我定位并没有找准, 前端领域太广, 到底哪个点最适合自己, 并且值得深入钻研? 我不知道. 但先全学一遍, 查漏补缺总没错的.
我觉得自己仍然, 仍将, 一直都会是一名前端小学生.
本文没有劝退效果, 请放心阅读. 如果你是应届生, 找准自己的定位, 慢慢来.
前端工程师
一, 语言基础
html 相关
HTML 标准, 跟进了解最新的 HTML 标准更新.
HTML 标签语义化, 嵌套标准等.
可访问性.
学习目标: 重新梳理各标签关系. 面向国际, 未来的网页结构, 符合可访问性规范.
CSS 相关
CSS 标准, 跟进了解最新的 CSS 标准更新.
CSS 属性, 最新属性等.
CSS 编程, Houdini.
web Fonts
学习目标: 重新梳理 CSS 属性之间的关系, 更多的功能尝试使用 CSS 实现. 掌握关注最新的 CSS 发展.
JavaScript 相关
ECMAScript 标准, 最新提案等, 浏览器 DOM,BOM.
学习目标: 熟悉 JavaScript 的基础 API, 参数搞清楚. 掌握最新的 JavaScript 语言动向.
Node.JS 相关
Node.JS 全局 API, 原生模块等, 了解最新的 Node.JS 动向.
学习目标: 熟悉 Node.JS 基础原生 API 的作用和使用. 为学习服务端开发打下基础.
TypeScript(TS)
TS 大火, 成未来开发趋势.
TypeScript 的使用. 与 JavaScript API 的区别
学习目标: 熟练使用 TypeScript.
AssemblyScript(AS)
除了可以将 c\c++,Rust,Kotlin,Golang 等高级语言转译为 WebAssembly 字节码外, 一门全新的语言 AS 也可以. AS 是 TS 的严格子集, 可以一并学习为 WebAssembly 开发打下基础.
AssemblyScript 的语法和使用
学习目标: 了解基础语法, 可以将 AssemblyScript 文件编译成. wasm 格式. 有了它, 可以不用去复习 C/C++ 了.
Dart
Flutter 持续火热, Dart 作为开发基础, 应该掌握
Dart 的语法, 了解与 JavaScript 的区别.
学习目标: 熟练使用 Dart 语言.
Markdown
语法, 使用.
写文章, 写文档必备
学习目标: 熟练使用 Markdown 写文章, 项目文档等.
Shell 脚本
语法, 常用函数
学习目标: 可以使用 shell 编写出比较常见的程序.
SQL 语言
常用语法, 函数
学习目标: 可以写出常见的 CARD 查询的 sql 语句.
二, 计算机基础
数据结构与算法
经典算法的思路
常用的数据结构
学习目标: 熟练掌握经典的算数思想, 以便应用到业务代码中来, 会在合适的场景选择最优的数据结构.
计算机网络
HTTP 协议, TCP 协议, UDP 协议
- HTTPS,HTTP2
- DNS
- WebSocket
学习目标: 掌握并了解这些网络协议的原理, 可以用以实践.
电子计算机组成原理
进制
Unicode,ASCII,UTF-8 等编码
计算机工作原理
学习目标: 了解自己的伙伴, 为了解 "云" 主机, 虚拟主机奠定基础.
操作系统
计算机操作系统原理
Linux 操作系统的使用
学习目标: 了解操作系统是如何工作的, 可以自主使用 Linux 操作系统, 掌握常用的命令.
三, 进阶
工程化
webpack
rollup
babel 使用与原理, 可以用来与 ECMAScript 最新语法一一印证.
eslint,stylelint,prettier 等代码风格与语法审查工具的使用
unit test 库或工具的使用
Sass 编程, 语法
postcss 后处理器
uglify 原理与实现
多人 Git 协作流程
GitLab 的搭建与使用
- CI/CD
- Git hooks, husky,commitlint
文档输出, StoryBook,gitDoc,gitbook 等
NPM, lerna
yarn
Markdown render.Markdown 写的示例可在线执行
模块化, JS 模块化在 ECMAScript 和 Node.JS 已经学习过, 这里主要是指 CSS 模块化的几种方式
数据 mock
学习目标: 可以从无到有快速搭建起一个多人协作的现代化前端工程项目, 选择合适的工具提高开发效率, 保持团队成员代码风格统一, 并最大限度的利用工具保障代码质量.
组件化
- vue
- React
- WebComponents
浏览器兼容性, canIUse
学习目标: 熟练使用 Vue,React 进行开发, 了解组件化未来趋势 WebComponents. 掌握数据驱动思想, 掌握经典的双向绑定实现原理, 阅读源码, 深入了解. 掌握衍生产物如前端路由, 数据管理的设计思想和实现.
基于 Node.JS 的 Web 服务开发
koa
express
pm2
RESTFul 风格
进程管理
数据持久 MongoDB,MySQL 等
数据缓存 Redis 等
长链接服务
SSR
Docker
Nginx 配置, openresty
云主机, 共享主机等
学习目标: 可以独立完成 Web 服务的搭建和部署.
基于 Node.JS 的 CLI 开发
常用的 CLI 开发库和原理
比较流行的 CLI 库的设计思想, 实现思路
学习目标: 可以独立开发 CLI, 当有需求时, 可以快速定位到此方案.
桌面应用开发
Electron
NW.JS
学习目标: 了解一种基于 JavaScript 的桌面应用的开发, 当有需要时, 可以迅速定位到此技术方案.
移动应用开发
Flutter 及相关衍生技术
React Native 及相关衍生技术
PWA
WEEX
学习目标: 了解和掌握. 可以使用 Flutter 或 RN 开发一个移动 App. 了解 PWA.
第三方平台开发
微信小程序
支付宝小程序
百度小程序
快应用
- wepy
- mpvue
- taro
- ...
学习目标: 可以快速上手任何一种开发小程序. 了解小程序的实现方案. 了解业内流行的小程序开发库的实现思路.
插件开发
Chrome 插件 API
DevTool 扩展
VSCode 等 IDE 插件开发
学习目标: 了解插件可以做到什么, 当有需要时, 可以迅速定位到此方案来.
浏览器工作原理
排版引擎, 浏览器渲染原理
脚本解释引擎, 脚本运行原理, v8
headless 无头浏览器, puppeteer
学习目标: 掌握浏览器工作原理, 可以应用在性能优化和自动化测试上.
性能优化
RAIL 模型
硬件基础: 帧, 帧率, 显示器绘图原理
渐进式网页指标 (Progressive Web Metrics, 简称 PWM's)
常用的性能优化手段
学习目标: 了解性能优化手段, 写出性能优异的 Web 应用.
Web 浏览器安全
浏览器安全策略: 同源策略, 内容安全策略, 沙箱
常见的攻击方式: XSS,CSRF
其它: CRLF 攻击, DNS 劫持和 DNS 污染, 点击劫持, 浏览器插件漏洞攻击等
了解常见对称加密和非对称加密算法
学习目标: 了解常见的 Web 浏览器攻击手段, 避免写出有安全隐患的网站.
Web 服务器安全
常见攻击手段: 目录遍历, DDOS, 重放, 密码破解, SQL 注入
其它攻击手段: CC 攻击, 端口渗透
学习目标: 了解常见服务器攻击手段和原理, 避免写出有明显漏洞的 Web 服务.
监控统计
前端脚本错误监控: 错误堆栈形式, 实时监控实现方式
前端性能监控: 性能指标, 实现方案
服务端监控: 硬件监控, 系统监控, 应用监控, 网络监控, 流量分析, 日志监控, 安全监控, API 监控 (可用性, 正确性, 响应时间), 性能监控, 业务监控
学习目标: 掌握如何自主建设或搭建开源监控平台. 了解一些常见的监控指标的含义. 如性能相关的指标 TTLB,QPS 是什么意思, 业务相关的指标 PV,UV,CTR 等等代表什么.
可视化
canvas 进阶
svg 进阶
WebGL 基础
计算机图形学
常用库: ECharts, D3 等
学习目标: 这是面向未来的前端技术. 了解常见的可视化技术方案, 当有需求时可以迅速定位方案. 关注并可使用最新的技术开发酷炫的应用, 实现数据可视化.
SEO
搜索引擎爬虫原理
搜索引擎权重算法
与 SEO 相关的网页标签
学习目标: 了解搜索引擎的实现原理以及搜索结果的排序算法. 如果是对外的网站, 可以自主完成简单的 SEO, 使网站在搜索引擎中的排名尽可能高些 (不是花钱竞价排名哟).
开发与调试
浏览器脚本调试
Node.JS 调试
Chrome Dev Tools 进阶使用 (环境模拟, 渲染性能, 内存使用, 端点调试, 抓包, 控制台内置函数等等)
IDE
使用帮助开发的插件, 如拼写检查等.
学习目标: 熟练掌握 Chrome 调试工具的使用, 对于脚本开发, 性能优化都大有裨益. 掌握 Node.JS 服务的调试方法.
UI 库
UX 基础
色彩原理, 色光三原色, 网页色彩表示方法
网页色彩搭配原则, 色彩心理学
常用 UI 组件的实现
常见 UI 组件的使用和源码
学习目标: 具备一定的美感和用户体验关注度, 当没有设计师参与时, 可以自主设计一些交互方案, 了解常见 UI 组件代表的含义, 可以在合适的需求上使用合适的组件. 了解常用 UI 组件的设计与实现思路, 可独立开发 UI 组件库.
WebAssembly
原理
优势
简单应用开发
学习目标: 了解 WebAssembly 字节码的开发流程, 了解其在浏览器中的运行方式, 当需要时, 可以快速定位到此方案.
WebRTC
实时通讯方案
了解并进行可简单开发
学习目标: 了解并关注 WebRTC 技术, 了解其标准, 实现原理, 当需要时, 可以快速定位到此方案.
WebXR
使用 JavaScript 开发 VR 和 AR
了解 WebXR API, 跟进草案进程
学习目标: 了解并关注 WebXR 技术, 了解其标准, 实现原理, 当需要时, 可以快速定位到此方案.
WebAuthn
使用浏览器进行生物鉴权
了解 WebAuthn API, 并进行简单使用
学习目标: 了解并关注 WebAuthn 技术, 了解其标准, 实现原理, 当需要时, 可以快速定位到此方案.
来源: https://www.cnblogs.com/dongtianee/p/2019qianduan.html