前端学习方法

模块一

前端知识架构:构建你的前端知识体系

  1. 两种高效的前端学习方法
  2. 建立前端体系架构
  3. 明确前端工程师的发展方向

JavaScript语言:掌握JavaScript的核心功能和设计思路

  1. 学习JavaScript语言知识
  2. 建立对JavaScript语言的文法、语义、运行时的整体认知
  3. 掌握JavaScript的核心功能和设计思路
  • JavaScript运行时
  • JavaScript词法
  • JavaScript语法
  • JavaScript对象机制
  • 脚本与模块
  • 函数
  • 语法与声明
  • 表达式
  • 标识符与直接量

HTML、CSS语言:掌握HTML应用,理解CSS语言、排版、绘制和动画

  1. 理解HTML语言
  2. 掌握基本语法和主要标签语义
  3. 掌握HTML语言继承自SGML和XML的各种机制
  4. 掌握运用HTML开发网页所需要的知识
  5. 学习CSS语法和基本机制,以及重要的CSS属性的使用
  6. 掌握用CSS完成网页视觉和交互效果的技能
  • HTML语义:学习如何用 HTML 说话
  • HTML 与 SGML:DTD、entity 等来自 SGML 的设施
  • HTML 与 XML:namespace、标签封闭
  • HTML 的扩展:SVG、MathML、Aria
  • CSS 语法
  • CSS 机制:Media Query、Viewport、其他 at-rule、选择器、伪类、伪元素
  • 排版:盒模型、正常流与文本、Flex、Grid
  • 绘制:颜色、背景图片、投影、圆角、滤镜、Counter
  • CSS 动画

浏览器工作原理和 API:动手实现一个简易浏览器,梳理 Web 核心 API 及背后机制

  1. 用 JavaScript 实现一个简化版的模拟浏览器
  2. 理解浏览器的整个工作过程
  3. 学习 DOM 和 CSSOM API 等浏览器的核心 API
  4. 掌握在浏览器上开发交互效果的基本能力
  • HTTP 协议的解析
  • HTML 语法与词法
  • 实现 CSS 计算
  • 实现排版
  • 实现渲染和绘制
  • 基础 DOM 树操作
  • 浏览器的事件机制:冒泡与捕获
  • CSSOM、CSS 的对象模型以及与显示相关的对象模型
  • 其他 API

编程与算法训练:12 个案例提升你的编程内功

  1. 训练与语言和运行环境无关的基础编程实例
  2. 训练与 JavaScript 和 Web 相关的编程实例
  3. 解决具体问题,提升编程能力
  • 基础:TicTacToe /井字棋(递归)
  • 基础:寻路问题(搜索)
  • 基础:出现最多的 50 个字符串(哈希树/排序结构)
  • 基础:判断点击区域(计算几何)
  • 基础:括号匹配(栈)
  • 基础:wildcard(贪心)
  • 应用:Promise 与异步编程
  • 应用:正则表达式与文本处理
  • 应用:Proxy 与双向绑定
  • 应用:使用 Range 实现 DOM 精确操作
  • 应用:使用 CSSOM 实现视觉交互
  • 应用:解析一个四则运算的表达式

组件化:掌握组件化核心开发思想和工程实践

  1. 理解组件化的概念、应用场景和基本思路
  2. 了解组件化的历史与现状
  3. 提升对组件化这一工程手段的认知
  4. 设计一套组件的基础设施,揭秘 React/Vue 风格的组件原理。
  • 组件化基础知识
  • 实现一个轮播组件
  • 抽象出手势库
  • 抽象出动画库
  • 为组件添加 JSX 语法
  • 其他组件
  • 轮播组件的继续改造:生命周期
  • 轮播组件的继续改造:状态、属性、特征
  • 轮播组件的继续改造:事件机制
  • 新组件 Tab:容器型组件
  • 新组件 List:数据机制
  • One more thing:Vue 风格的 SFC
  • 组件体系的设计

工具链:从零设计并实现一套符合大厂要求的工具链

  1. 完整实现一套可以用于实际开发的工具链模型
  2. 理解工具链的各个方面
  3. 从零开始设计一套包含初始化、构建、调试、测试的工具链,学习大厂如何通过工具链保证代码风格、环境统一,保障基本质量。
  • 整体理解一个工具链的设计
  • 目录结构与初始化工具
  • 设计并实现一个构建工具
  • 设计并实现一个调试工具
  • 设计并实现一个单元测试工具

发布与持续集成:通过发布和持续集成保证前端团队代码质量

  1. 实现一个持续集成和前端发布体系
  2. 学习如何用持续集成保证前端代码质量
  3. 从零开始搭建一套极简的线上服务和与之搭配的发布系统,基于这个发布系统完成前端的持续集成体系,学习如何用持续集成保证前端代码质量。
  • 实现一个线上 Web 服务
  • 实现一个发布系统
  • 持续集成:如何使用 Git Hook
  • 持续集成:如何使用 Lint 工具
  • 持续集成:如何使用无头浏览器
  • 持续集成:如何实现 DOM 树的检查
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vam的金豆之路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值