这门课解决什么实际问题

很多前端开发者在面对复杂页面时，往往陷入两个极端：要么全盘照抄静态网页代码，维护成本极高；要么过度依赖第三方重型框架，遇到定制需求时无从下手。这门课的核心价值在于提供一套基于原生 JavaScript 的组件化开发思维。它不教你简单的页面堆砌，而是通过封装 H5ComponentBase 基类和 H5 内容组织类，解决“如何把页面模块复用”以及“如何让 JS 逻辑与 UI 结构解耦”这两个关键痛点。对于正在经历从“切图仔”向“前端工程师”转型的学员来说，理解这种自底向上的组件构建方式，比单纯调用 API 更能提升底层编码能力。资料包中的前期准备章节非常关键，尤其是第 1 章关于 Web 项目开发流程、角色分工以及产品设计与开发规划的讲解，这是建立工程化视野的第一步，务必先看。第 2 章的标注与切图部分可以快速略过，重点应放在第 3 章的 JS 类开发上，特别是 H5ComponentBase 的参数设置、事件监听（onLoad、onLeave）以及相对定位升级这几个节点，这是后续所有图表组件开发的基石。

适合什么基础，建议先看哪几块

本课程适合已经掌握 HTML、CSS 基础语法，并对 JavaScript 面向对象编程（如原型、继承、闭包）有初步认知的学习者。如果你完全不懂 JS 类概念，前几章的基类封装会显得比较吃力，建议先补充 ES6 Class 或构造函数相关知识。资料包中的前期准备章节非常关键，尤其是第 1 章关于 Web 项目开发流程、角色分工以及产品设计与开发规划的讲解，这是建立工程化视野的第一步，务必先看。第 2 章的标注与切图部分可以快速略过，重点应放在第 3 章的 JS 类开发上，特别是 H5ComponentBase 的参数设置、事件监听（onLoad、onLeave）以及相对定位升级这几个节点，这是后续所有图表组件开发的基石。

学完能独立做什么，资料怎么配合

完成课程后，你将能够脱离 jQuery 等库，使用原生 JS 独立开发结构化的全屏滚动 Web App，并具备封装散点图等数据可视化组件的能力。你可以独立将设计稿转化为可复用的 JS 类组件，实现样式、结构与行为的分离。在学习过程中，资料包中的 PSD 文件和 MarkMan 标注是还原 UI 的依据，而全栈式的视频讲解则是逻辑梳理的工具。建议采用“先听原理，再看代码，最后动手敲”的方式：先通过视频理解组件的生命周期和参数设计思路，再对照代码实现 H5ComponentBase，最后尝试独立复现散点图组件。这种练习方式能帮助你将抽象的面向对象思想转化为具体的工程实践技能。

课程目录

第1章 课程前期准备 试看 6 节 | 23分钟 1-1 课程介绍 (05:38).mp4
 1-2 课程安排 (01:37).mp4
 1-3 WEB项目开发流程介绍 (04:03).mp4
 1-4 开发角色缩写简介 (02:13).mp4
 1-5 产品设计 (03:49).mp4
 1-6 开发规划 (04:46).mp4
 第2章 前端开发简介及标注与切图 6 节 | 37分钟 2-1 前端开发内容介绍 (01:55).mp4
 2-2 标注简介 (02:20).mp4
 2-3 标注 (15:43).mp4
 2-4 切图（一） (09:16).mp4
 2-5 切图（二） (07:07).mp4
 2-6 MarkMan 标注 PSD 文件.mp4
 第3章 项目 JS 类开发 试看 

11 节 | 103分钟 3-1 静态页思路验证-fullPage.js搭建一个简单切换页面 (12:30).mp4
 3-2 静态页思路验证-组件切换 (14:05).mp4
 3-3 JS类规划 (05:55).mp4
 3-4 通用图文组件类-H5ComponentBase（开发准备） (05:44).mp4
 3-5 通用图文组件类-H5ComponentBase（参数设置） (16:28).mp4
 3-6 CSS样式规划 (03:34).mp4
 3-7 通用图文组件类-H5ComponentBase（接受 onLoad、onLeave事件） (09:02).mp4
 3-8 内容组织类-H5（addPage方法） (17:25).mp4
 3-9 内容组织类-H5（addComponent方法） (10:57).mp4
 3-10 内容组织类-H5（整合fullPage.js） (06:23).mp4
 3-

11 升级 H5ComponentBase 类支持相对定位.mp4
 第4章 图表组件-散点图组件开发 5 节 | 30分钟 4-1 图表组件开发介绍 (03:22).mp4
 4-2 散点图原理分析 (03:02).mp4
 4-3 散点图开发(散点图的比例值、颜色设置) (15:50).mp4
 4-4 散点图开发(位置设置) (07:38).mp4
 4-5 H5ComponentPoint 动画效果修改.mp4
 第5章 图表组件-柱状图组件开发 5 节 | 42分钟 5-1 柱图开发简介 (02:41).mp4
 5-2 水平柱图开发（HTML的DOM搭建） (18:41).mp4
 5-3 水平柱图开发（CSS样式编写） (08:27).mp4
 5-4 水平柱图开发（生长动画制作） (11:16).mp4
 5-5 H5ComponentBar扩展，垂直柱图实现.mp4
 第6章 图表组件-折线图开发 9 节 | 70分钟 6-1 折线图搭建折线图组件环境 (05:12).mp4
 6-2 折线图画布 (05:37).mp4
 6-3 折线图绘制网格线 (11:45).mp4
 6-4 折线图画点 (10:16).mp4
 6-5 折线图连线绘制数据 (07:12).mp4
 6-6 折线图绘制阴影 (05:38).mp4
 6-7 绘制项目名称 (08:36).mp4
 6-8 折线动画 (11:30).mp4
 6-9 项目名称动画 (04:08).mp4
 第7章 图表组件-雷达图开发 4 节 | 40分钟 7-1 雷达图开发（设计说明） (03:08).mp4
 7-2 雷达图开发（背景层开发） (17:51).mp4
 7-3 雷达图开发（数据层开发） (08:17).mp4
 7-4 雷达图开发（项目文本修正、生长动画） (10:06).mp4
 第8章 图表组件-饼状图开发 5 节 | 30分钟 8-1 饼图开发（绘制饼画准备） (06:13).mp4
 8-2 饼图开发（绘制饼图） (10:17).mp4
 8-3 饼图开发（绘制饼图动画） (03:43).mp4
 8-4 饼图开发（项目文本注入） (09:33).mp4
 8-5 H5ComponentPie 扩展，环图实现.mp4
 第9章 项目前端页面整合开发 9 节 | 86分钟 9-1 前端整合开发介绍 (03:41).mp4
 9-2 前端整合开发准备 (09:15).mp4
 9-3 图文组件页开发（首页整合开发） (13:44).mp4
 9-4 图文组件页开发（整合内容填充） (11:10).mp4
 9-5 图文组件页开发（尾页整合开发） (14:33).mp4
 9-6 图表组件页整合开发（一） (08:38).mp4
 9-7 图表组件页整合开发（二） (09:08).mp4
 9-8 图表组件页整合开发（三） (09:38).mp4
 9-9 图表组件页整合开发（四） (05:25).mp4
 第10章 课程扩展 8 节 | 86分钟 10-1 Loading 效果（简介） (04:39).mp4
 10-2 Loading 效果（HTML 结构搭建及 CSS 样式设置） (09:46).mp4
 10-3 Loading 效果（JS 脚本编写） (16:11).mp4
 10-4 饼图文本重排（简介） (08:19).mp4
 10-5 饼图文本重排（相交判定） (12:53).mp4
 10-6 饼图文本重排（重排） (14:09).mp4
 10-7 Ajax 获取 JSON 数据(上) (05:54).mp4
 10-8 Ajax获取 JSON 数据(下) (13:32).mp4
 第11章 大任务-综合实战 1 节 | 11-1 实现一个完整的手机端数据展示报告.mp4