├─第1章课程简介
│ 1-1课程导读.mp4
│
├─第2章0-1搭建开发环境
│ 2-1 0-1搭建开发环境-工具安装.mp4
│ 2-2初始化一个React项目.mp4
│ 2-3徒手写一个button组件感受下.mp4
│ 2-4组件开发-引入storybook.mp4
│
├─第3章热身：完整的写一个Button组件
│ 3-1如何完善组件单测.mp4
│ 3-2使用sass写css.mp4
│ 3-3完整开发一个Icon组件.mp4
│ 3-4用copy的方式完成一个交互多一些的Tag组件开发(1).mp4
│ 3-5用copy的方式完成一个交互多一些的Tag组件开发(2).mp4
│
├─第4章工欲善其事必先利其器：组件库的工程化
│ 4-1脚手架框架搭建.mp4
│ 4-2制作标准化组件模板.mp4
│
├─第5章组件设计（Radio、checkbox、Input、Tex
│ 5-1组件基础理论.mp4
│ 5-2组件开发Radio-点击事件.mp4
│ 5-3组件开发Radio-受控组件非受控组件.mp4
│ 5-4RadioGroup开发.mp4
│ 5-5RadioGroup开发-补充.mp4
│ 5-6checkboxcheckboxgroup.mp4
│ 5-7Input组件开发-脚手架升级自动抓取css.mp4
│ 5-8Input组件受控功能演示.mp4
│ 5-9InputTextAreamaxLength-1.mp4
│ 5-10InputTextAreamaxLength.mp4
│ 5-11TextArea支持自动高度-1.mp4
│ 5-12TextArea支持自动高度-2.mp4
│ 5-13TextArea自动高度的另外一种思路-影子组件.mp4
│ 5-14受控非受控单测编写.mp4
│ 5-15Avatar开发.mp4
│ 5-16Switch开发-1.mp4
│ 5-17Switch开发-2.mp4
│
├─第6章组件设计（Affix、progress、Menu）
│ 6-1固钉Affix组件开发-1.mp4
│ 6-2固钉Affix组件开发-2.mp4
│ 6-3固钉Affix组件，第二种实现方法和优化思路.mp4
│ 6-4progress组件开发：用css3来开发进度条.mp4
│ 6-5circle类型progress：用css3来开发圆形进度.mp4
│ 6-6circle类型progress：用css3来开发圆形进度.mp4
│ 6-7Menu组件开发：UI结构还原-1.mp4
│ 6-8Menu组件开发：UI结构还原-2.mp4
│ 6-9Menu逻辑完善-缩进实现.mp4
│ 6-10Menu逻辑完善-高亮显示-1.mp4
│ 6-11Menu逻辑完善-高亮显示-2.mp4
│
├─第7章复杂组件设计-弹窗类
│ 7-1实现一个基础弹窗.mp4
│ 7-2完善弹窗基础事件.mp4
│ 7-3实现Overlay相对目标元素的定位计算-1.mp4
│ 7-4实现Overlay相对目标元素的定位计算-2.mp4
│ 7-5实现Overlay通用位置计算算法-1.mp4
│ 7-6实现Overlay通用位置计算算法-2.mp4
│ 7-7 快捷弹窗组件 Popup-1.mp4
│ 7-8快捷弹窗组件Popup-2.mp4
│ 7-9Tooltip文字提示组件的开发-1.mp4
│ 7-10Tooltip文字提示组件的开发-2.mp4
│ 7-11弹窗超出可视区域的自动订正-1.mp4
│ 7-12弹窗超出可视区域的自动订正-2.mp4
│ 7-13Dropdown组件的开发-1.mp4
│ 7-14Dropdown组件的开发-2.mp4
│ 7-15Dropdown组件的开发-3.mp4
│ 7-16Message组件开发-1.mp4
│ 7-17Message组件开发-2.mp4
│ 7-18Message组件开发-3.mp4
│
├─第8章复杂复合组件-表单
│ 8-1Form布局和数据获取-1.mp4
│ 8-2Form布局和数据获取-2.mp4
│ 8-3Form数据获取优化.mp4
│ 8-4Form表单校验.mp4
│ 8-5Form表单校验问题处理.mp4
│ 8-6Form使用现成的开源校验库.mp4
│ 8-7Form数据手动Reset和填充.mp4
│ 8-8FormReset的时候清空错误提示.mp4
│ 8-9Form通过api调用的方式提交、reset、fill数据.mp4
│ 8-10编译StoryBook，排查编译中遇到的commonjs.mp4
│ 8-11babel编译src到es5.mp4
│
└─课件.zip
有需要联系v；加客服窗口的联系方式
摘要：随着前端技术的发展，高级前端进阶者需要掌握自主打造高扩展的业务组件库的能力。本文从组件库的构建、设计、优化和实际应用四个方面，详细阐述了高级前端进阶必修自主打造高扩展的业务组件库的重要性及方法，旨在帮助前端开发者提升技能，提高工作效率。
1、组件库构建
组件库的构建是自主打造高扩展业务组件库的第一步。构建过程中，需要遵循模块化、组件化和复用性原则。首先，对现有业务需求进行梳理，明确组件库的功能定位和目标用户。其次，根据功能模块划分组件，确保每个组件具有独立的功能和良好的封装性。最后，采用合适的构建工具和框架，如Webpack、Vue或React，实现组件的自动化构建和打包。
在组件库构建过程中，还需注意以下几点：一是组件的命名规范，确保易于理解和记忆；二是组件的文档编写，详细描述组件的属性、方法和事件，方便开发者使用；三是组件的单元测试，确保组件的稳定性和可靠性。
此外，组件库的版本控制也是构建过程中的重要环节。通过Git等版本控制系统，实现组件库的版本管理和协作开发，确保组件库的持续迭代和优化。
2、组件设计
组件设计是自主打造高扩展业务组件库的核心环节。设计过程中，要充分考虑用户体验和易用性，确保组件符合设计规范和最佳实践。以下是一些组件设计的关键点：
一是组件的界面设计，遵循简洁、美观、一致的原则，避免过度设计；二是组件的交互设计，确保操作流畅、直观，降低用户的学习成本；三是组件的响应式设计，适应不同设备和屏幕尺寸，提升用户体验。
在组件设计过程中，还需关注以下几点：一是组件的扩展性，预留足够的接口和配置项，方便开发者根据需求进行定制；二是组件的兼容性，确保组件在各种浏览器和操作系统上正常运行；三是组件的性能优化，关注组件的加载速度和运行效率，提升用户体验。
3、组件优化
组件优化是自主打造高扩展业务组件库的重要环节。优化过程中，要关注以下几个方面：
一是组件的代码优化，通过代码重构、性能分析和工具辅助，提升组件的执行效率和可维护性；二是组件的内存优化，减少内存占用，提高组件的运行效率；三是组件的加载优化，通过懒加载、异步加载等技术，降低页面加载时间。
在组件优化过程中，还需关注以下几点：一是组件的兼容性测试，确保组件在各种环境下正常运行；二是组件的稳定性测试，通过压力测试、性能测试等方法，验证组件的稳定性和可靠性；三是组件的文档更新，及时更新组件的文档，确保开发者能够了解最新的组件功能和用法。
4、组件应用
组件应用是自主打造高扩展业务组件库的最终目的。在实际应用过程中，要关注以下几个方面：
一是组件的集成，将组件库集成到现有项目中，确保组件与项目架构和业务逻辑的兼容性；二是组件的定制，根据实际需求对组件进行定制和扩展，满足特定场景下的使用需求；三是组件的维护，关注组件的反馈和问题，及时修复bug和优化功能。
在组件应用过程中，还需关注以下几点：一是组件的版本管理，确保组件库的版本更新和兼容性；二是组件的社区建设，鼓励开发者参与组件库的讨论和贡献，共同提升组件库的质量和生态；三是组件的推广，通过技术博客、社区活动等方式，提高组件库的知名度和影响力。
总结：
高级前端进阶必修自主打造高扩展的业务组件库，是提升前端开发效率和团队协作能力的重要途径。通过组件库的构建、设计、优化和应用，前端开发者可以更好地应对复杂的项目需求，提高工作效率和产品质量。
本文从组件库构建、设计、优化和应用四个方面，详细阐述了高级前端进阶必修自主打造高扩展的业务组件库的重要性及方法，旨在帮助前端开发者提升技能，提高工作效率。
本文由nayona.cn整理
联系我们
关注公众号
微信扫一扫
支付宝扫一扫
