从零搭建可复用的 Web 页面结构

这门课不教你怎么画图，而是教你如何用 JavaScript 的面向对象方式，像搭积木一样把网页拆解成一个个独立的组件，最后拼成一个功能完整、结构清晰的单页应用。对于想搞懂 Web 开发底层逻辑的自学者来说，这是绕不开的一环：它解决的是“如何从零开始，不依赖现成框架，自己造一个能用的页面骨架”的问题。你需要先理解什么是前端开发流程，熟悉切图和标注，才能进入代码编写阶段。

适合有 HTML/CSS 基础，想掌握组件化思维的人

这门课主要面向已经掌握了 HTML 标签和 CSS 基本样式的读者，适合那些想从“写死页面”进阶到“写可维护代码”的人。建议先从第 01 章的课程介绍和项目流程开始看，建立全局观；随后重点学习第 03 章的 JS 类开发，这是全站的基石。如果你对静态页面的布局已经非常熟练，第 02 章的前端简介和标注部分可以快速略过，直接进入核心的组件类开发章节。学完之后，你应该能独立编写出通用的图文组件类，并理解如何组织页面结构。

配合资料包，先拆解组件再拼装页面

资料包里提供了课程讲解和配套的代码片段，建议下载后先运行第 03 章的代码，理解“H5ComponentBase”和“内容组织类 H5”是如何通过 addPage 和 addComponent 方法来管理页面的。在练习时，不要急着去写复杂的图表，先尝试复刻基础的图文组件。等到静态页面逻辑跑通，再引入第 04 章的散点图开发，通过修改比例值和位置设置来理解图表组件的原理。核心在于理解组件的参数设置和事件处理，而不是照抄代码。

课程目录

第01章 课程前期准备
1-1 课程介绍.mp4 22.74M
1-2 课程安排.mp4 1.38M
1-3 WEB项目开发流程介绍.mp4 6.42M
1-4 开发角色缩写简介.mp4 2.77M
1-5 产品设计.mp4 8.71M
1-6 开发规划.mp4 11.53M
第02章 前端开发简介及标注与切图
2-1 前端开发内容介绍.mp4 2.74M
2-2 标注简介.mp4 8.63M
2-3 标注.mp4 84.43M
2-4 切图（一）.mp4 53.26M
2-5 切图（二）.mp4 41.45M
第03章 项目 JS 类开发
3-01 静态页思路验证-fullPage.js搭建一个简单切换页面.mp4 67.26M
3-02 静态页思路验证-组件切换.mp4 81.00M
3-03 JS类规划.mp4 5.91M
3-04 通用图文组件类-H5ComponentBase（开发准备）.mp4 24.38M
3-05 通用图文组件类-H5ComponentBase（参数设置）.mp4 67.60M
3-06 CSS样式规划.mp4 22.29M
3-07 通用图文组件类-H5ComponentBase（接受 onLoad、onLeave事件）.mp4 75.19M
3-08 内容组织类-H5（addPage方法）.mp4 61.25M
3-09 内容组织类-H5（addComponent方法）.mp4 60.39M
3-10 内容组织类-H5（整合fullPage.js）.mp4 48.07M
第04章 图表组件-散点图组件开发
4-1 图表组件开发介绍.mp4 3.41M
4-2 散点图原理分析.mp4 3.02M
4-3 散点图开发(散点图的比例值、颜色设置).mp4 88.60M
4-4 散点图开发(位置设置).mp4 49.49M
第05章 图表组件-柱状图组件开发
5-1 柱图开发简介.mp4 2.81M
5-2 水平柱图开发（HTML的DOM搭建）.mp4 102.67M
5-3 水平柱图开发（CSS样式编写）.mp4 45.28M
5-4 水平柱图开发（生长动画制作）.mp4 73.80M
第06章 图表组件-折线图开发
6-1 折线图搭建折线图组件环境.mp4 22.17M
6-2 折线图画布.mp4 21.11M
6-3 折线图绘制网格线.mp4 46.22M
6-4 折线图画点.mp4 56.83M
6-5 折线图连线绘制数据.mp4 35.58M
6-6 折线图绘制阴影.mp4 35.66M
6-7 绘制项目名称.mp4 51.67M
6-8 折线动画.mp4 97.55M
6-9 项目名称动画.mp4 31.15M
第07章 图表组件-雷达图开发
7-1 雷达图开发（设计说明）.mp4 3.80M
7-2 雷达图开发（背景层开发）.mp4 85.28M
7-3 雷达图开发（数据层开发）.mp4 48.69M
7-4 雷达图开发（项目文本修正、生长动画）.mp4 56.28M
第08章 图表组件-饼状图开发
8-1 饼图开发（绘制饼画准备）.mp4 25.41M
8-2 饼图开发（绘制饼图）.mp4 60.31M
8-3 饼图开发（绘制饼图动画）.mp4 19.13M
8-4 饼图开发（项目文本注入）.mp4 60.98M
第09章 项目前端页面整合开发
9-1 前端整合开发介绍.mp4 31.08M
9-2 前端整合开发准备.mp4 73.82M
9-3 图文组件页开发（首页整合开发）.mp4 116.71M
9-4 图文组件页开发（整合内容填充）.mp4 82.03M
9-5 图文组件页开发（尾页整合开发）.mp4 132.58M
9-6 图表组件页整合开发（一）.mp4 72.56M
9-7 图表组件页整合开发（二）.mp4 105.41M
9-8 图表组件页整合开发（三）.mp4 111.22M
9-9 图表组件页整合开发（四）.mp4 55.13M
第10章 课程扩展
10-1 Loading 效果（简介）.mp4 24.41M
10-2 Loading 效果（HTML 结构搭建及 CSS 样式设置）.mp4 87.61M
10-3 Loading 效果（JS 脚本编写）.mp4 111.93M
10-4 饼图文本重排（简介）.mp4 21.88M
10-5 饼图文本重排（相交判定）.mp4 67.68M
10-6 饼图文本重排（重排）.mp4 74.29M
10-7 Ajax 获取 JSON 数据(上).mp4 34.24M
10-8 Ajax获取 JSON 数据(下).mp4 104.75M
project.rar 19.13M
mksz015-Web App用组件方式开发全站/
1-3 WEB