很多前端开发者在写出第一个业务组件后，会陷入一个误区：认为“组件化”就是写几个独立的 UI 片段。但当项目规模扩大，组件开始依赖全局状态、复杂的交互逻辑以及统一的样式规范时，孤立的片段就会变成维护噩梦。这门课直指这个痛点，它不是教你堆砌 API，而是带你从底层逻辑构建一套可复用、高扩展的业务组件库。对于刚接触前端基础设施的中级开发者来说，这是填补“代码能跑”到“架构稳健”之间巨大鸿沟的关键一步。

这门课适合那些已经熟练掌握 Vue 或 React 基础语法，但缺乏大型项目架构经验，或者从未深度参与过团队公共库建设的开发者。如果你目前只能应付单体页面的开发，对“受控与非受控组件”、“依赖注入”、“样式隔离”以及“组件生命周期管理”感到陌生，那么这里的每一个环节都是为你准备的。它不要求你精通所有高级设计模式，但要求你具备扎实的 JavaScript 基础和良好的工程化意识。课程从模拟成熟设计系统的构建思路入手，剖析如何将零散的业务逻辑抽象为标准化的模块，这一过程对于理解前端工程化的本质极具价值。

建议优先关注组件的封装规范与状态管理部分。不要跳过那些关于“如何设计 Props 接口”以及“如何处理异步数据加载”的细节章节。很多开发者在构建组件库时，最容易出问题的地方往往不在 UI 还原，而在于边界情况的处理和数据流的稳定性。通过反复练习这些核心章节，你能建立起对代码健壮性的直觉。学完这套体系，你应当能够独立负责一个中等规模团队的基础设施搭建，不仅能设计出符合团队规范的通用组件，还能编写清晰的文档、自动化测试用例，并解决跨项目复用的兼容性问题。你不再只是“写界面的人”，而是“制定规则的人”。

在学习过程中，务必利用配套资料包中的源码示例进行深度拆解。不要只盯着视频里的演示结果，要试着把代码复制到本地，故意制造一些错误场景（比如移除错误边界、改变状态更新顺序），观察组件如何响应，以此验证你对底层机制的理解。这种“破坏性实验”比单纯照抄代码有效得多。同时，尝试将课程中的组件应用到你自己的实际项目中，替换掉原有的简单实现，对比两者在可维护性和扩展性上的差异。只有当你能清晰地向他人解释“为什么这里要用发布订阅模式而不是直接回调”，以及“为什么样式需要穿透封装”，才算真正内化了这门课的核心价值。拒绝浅尝辄止，把每一个组件的逻辑推演到底，才能从“使用者”转变为“构建者”。

课程介绍

高级前端进阶必修：自主打造高扩展的业务组件库视频课程，。前端项目到一定的规模，基本上都会沉淀本身组件库——组件库服务于整个团队，是每个项目的底座。如果可以开发满足团队市场需求的组件库，或许你已是团队的核心主力了。该课程由大厂前端专家讲课，从高级前端开发的角度做一套类似于AntD的组件库，在这过程中讲透优秀组件库的构建思路及实现方式，让你快速具备构建前端基础设施的关键能力。

课程目录

├── 第1章课程简介/
│ ├── [ 68M] 1-1课程导读.mp4
├── 第2章0-1搭建开发环境/
│ ├── [ 45M] 2-10-1搭建开发环境-工具安装.mp4
│ ├── [ 49M] 2-2初始化一个React项目.mp4
│ ├── [ 97M] 2-3徒手写一个button组件感受下.mp4
│ ├── [150M] 2-4组件开发-引入storybook.mp4
│ └── [ 131] README.md
├── 第3章热身：完整的写一个Button组件/
│ ├── [114M] 3-1如何完善组件单测.mp4
│ ├── [ 88M] 3-2使用sass写css.mp4
│ ├── [ 96M] 3-3完整开发一个Icon组件.mp4
│ ├── [108M] 3-4用copy的方式完成一个交互多一些的Tag组件开发(1).mp4
│ └── [ 55M] 3-5用copy的方式完成一个交互多一些的Tag组件开发(2)-.mp4
├── 第4章工欲善其事必先利其器：组件库的工程化/
│ ├── [ 57M] 4-1脚手架框架搭建.mp4
│ └── [113M] 4-2制作标准化组件模板.mp4
└── 第5章组件设计/
├── [ 55M] 5-10Input&amp_TextAreamaxLength-.mp4
├── [111M] 5-11TextArea支持自动高度-1.mp4
├── [ 97M] 5-12TextArea支持自动高度-2.mp4
├── [ 95M] 5-13TextArea自动高度的另外一种思路-影子组件.mp4
├── [ 39M] 5-14受控&amp_非受控单测编写.mp4
├── [144M] 5-15Avatar开发.mp4
├── [ 72M] 5-16Switch开发-1.mp4
├── [ 65M] 5-17Switch开发-2.mp4
├── [ 97M] 5-18affix开发-1.mp4
├── [ 85M] 5-19affix开发-2.mp4
├── [ 26M] 5-1组件基础理论.mp4
├── [ 48M] 5-20affix第二种实现方法和优化思路.mp4
├── [ 83M] 5-2组件开发Radio-点击事件.mp4
├── [107M] 5-3组件开发Radio-受控组件&amp_非受控组件.mp4
├── [ 88M] 5-4RadioGroup开发.mp4
├── [ 30M] 5-5RadioGroup开发-补充.mp4
├── [119M] 5-6checkbox&amp_checkboxgroup.mp4
├── [ 58M] 5-7Input组件开发-脚手架升级自动抓取css.mp4
├── [ 80M] 5-8Input组件受控功能演示.mp4
└── [ 50M] 5-9Input&amp_TextAreamaxLength-1.mp4
├── 第6章组件设计（Affix、progress、Menu）/
│ ├── [137M] 6-10Menu逻辑完善-高亮显示-1.mp4
│ ├── [ 77M] 6-11Menu逻辑完善-高亮显示-2.mp4
│ ├── [ 97M] 6-1固钉Affix组件开发-1.mp4
│ ├── [ 84M] 6-2固钉Affix组件开发-2.mp4
│ ├── [ 47M] 6-3固钉Affix组件，第二种实现方法和优化思路.mp4
│ ├── [144M] 6-4progress组件开发：用css3来开发进度条.mp4
│ ├── [108M] 6-5circle类型progress：用css3来开发圆形进度.mp4
│ ├── [ 82M] 6-6circle类型progress：用css3来开发圆形进度.mp4
│ ├── [174M] 6-7Menu组件开发：UI结构还原-1.mp4
│ └── [ 88M] 6-8Menu组件开发：UI结构还原-2.mp4
└── 第7章复杂组件设计-弹窗类/
├── [139M] 7-1实现一个基础弹窗.mp4
├── [142M] 7-2完善弹窗基础事件.mp4
├── [103M] 7-3实现Overlay相对目标元素的定位计算-1.mp4
├── [114M] 7-4实现Overlay相对目标元素的定位计算-2.mp4
├── [130M] 7-5实现Overlay通用位置计算算法-1.mp4
├── [120M] 7-6实现Overlay通用位置计算算法-2.mp4
│ ├── [ 85M] 7-7 快捷弹窗组件 Popup-1.mp4
│ ├── [128M] 7-8快捷弹窗组件Popup-2.mp4
│ └── [132M] 7-9Tooltip文字提示组件的开发-1.mp4
│ ├── [114M] 7-10Tooltip文字提示组件的开发-2.mp4
│ ├── [103M] 7-11弹窗超出可视区域的自动订正-1.mp4
│ ├── [102M] 7-12弹窗超出可视区域的自动订正-2.mp4
│ ├── [123M] 7-13Dropdown组件的开发-1.mp4
│ ├── [142M] 7-14Dropdown组件的开发-2.mp4
│ ├── [124M] 7-15Dropdown组件的开发-3.mp4
│ ├── [159M] 7-16Message组件开发-1.mp4
│ ├── [157M] 7-17Message组件开发-2.mp4
│ ├── [ 79M] 7-18Message组件开发-3.mp4
└──第8章复杂复合组件-表单/
├── [143M] 8-10编译StoryBook，排查编译中遇到的commonjs.mp4
├── [127M] 8-11babel编译src到es5.mp4
├── [178M] 8-1Form布局和数据获取-1.mp4
├── [177M] 8-2Form布局和数据获取-2.mp4
├── [175M] 8-3Form数据获取优化【更多it资源 www.】.mp4
├── [205M] 8-4Form表单校验.mp4
├── [ 75M] 8-5Form表单校验问题处理.mp4
├── [141M] 8-6Form使用现成的开源校验库.mp4
├── [122M] 8-7Form数据手动Reset和填充.mp4
├── [ 57M] 8-8FormReset的时候清空错误提示.mp4
└── [161M] 8-9Form通过api调用的方式提交、reset、fill数据.mp4
└── 资料代码/