课程介绍：前端代码架构设计能力强弱，是前端职业发展的分水岭。如果你拥有强大的代码架构设计能力，你可以轻松应对复杂的业务需求，而如果你不提升代码架构设计能力，很可能因一次小变更而导致程序崩溃。面对前端业务需求变化频繁和职业发展的挑战，如何更好的破局？这也是本课程的主旨重点。 这门课程会从真实的前端电商业务场景出发，带你从需求梳理到架构落地，并通过电商核心模块的全流程开发实践，组件封装及代码架构设计，最终教会你打造出高可靠性和强可维护性的项目。如果你也想突破困局，欢迎你加入这门课。从此，像架构师一样思考，开启你的卓越开发与财富创造之路！

 

第1章 课程简介
1 节｜9分钟

收起 

  •  

    视频：
    1-1 导学：学习本课程你可以获得什么?
    试看
    08:17
第2章 【代码架构之“技术选型”】移动端的技术选型，哪种最合适？
5 节｜44分钟

收起 

  •  

    视频：
    2-1 移动端 web 页面应用场景介绍-你可曾了解过自己常用的app的构造
    试看
    05:54

  •  

    视频：
    2-2 移动端 web 的业内解决方案：最常用的 Hybird
    试看
    11:09

  •  

    视频：
    2-3 移动端 web 的业内解决方案： 性能优越的 RN
    04:14

  •  

    视频：
    2-4 其他移动端 web 的业内解决方案 -存在即合理，总有一些应用场景你开发中可能会遇到
    06:36

  •  

    视频：
    2-5 资深工程师必备：如何去做移动端的技术选型【架构师面试必备】【白话+大厂装逼语言对比】
    15:19
第3章 【前端工程化和初始化项目】快速初始化并搭建高效、可维护的前端项目
11 节｜105分钟

收起 

  •  

    视频：
    3-1 前端工程化和构建工具【从行业实践出发，贴合实际好理解】【架构思维初步接触】【所见即工作中所用】
    12:22

  •  

    视频：
    3-2 Vite：下一代前端开发与构建工具 【快速入门无废话】【高频面试点】
    08:33

  •  

    视频：
    3-3 Vite：初始化项目并引入Vue、Ts【Vite 项目跑起来了】
    07:39

  •  

    视频：
    3-4 webpack 快速入门【四个常用核心概念Entry、Output、Loader、Plugin】【高频面试点】
    10:28

  •  

    视频：
    3-5 使用 webpack 初始化项目（一）更新版
    17:45

  •  

    视频：
    3-6 使用 webpack 新建项目二 集成图片【大厂实践版】
    13:03

  •  

    视频：
    3-7 使用 webpack 新建项目 三 样式配置【原理+代码=一学就会】
    10:47

  •  

    视频：
    3-8 使用 webpack 新建项目四 配置TS【原理+代码=一学就会】
    06:54

  •  

    视频：
    3-9 使用 webpack 新建项目 五 vue配置【先思路后代码】
    06:22

  •  

    视频：
    3-10 使用 webpack 新建项目 六 开发环境和生产环境配置【配置都搞完啦】【大厂实践】
    08:08

  •  

    视频：
    3-11 总结
    02:35
第4章 【封装请求数据 API 】实现数据的高效获取与交互，轻松应对复杂业务场景
9 节｜143分钟

收起 

  •  

    视频：
    4-1 大厂职场必杀技【程序员保命秘籍】【那些年我在大厂如何保护自己】【少加班的秘密】
    18:23

  •  

    视频：
    4-2 请求API封装设计第一步：明确目的，明确代码思路
    08:45

  •  

    视频：
    4-3 请求API封装设计第二步：深思熟虑，评估各种实现方式： 使用axions封装 实战一
    21:39

  •  

    视频：
    4-4 请求API封装设计第三步：深思熟虑，评估各种实现方式： 使用axions封装 实战二
    10:12

  •  

    视频：
    4-5 使用 axios 封装 三 (完）【介绍大厂常用的埋点】
    26:32

  •  

    视频：
    4-6 使用 fetch 进行封装实战 一
    19:07

  •  

    视频：
    4-7 使用 fetch 封装请求 API 二【API 封装第二步 代码实战】
    12:32

  •  

    视频：
    4-8 使用 fetch 封装请求 API 三 （完）【API 封装第三步 代码实战】
    12:04

  •  

    视频：
    4-9 请求封装最后一步 总结分析【代码技巧】【封装技巧】【架构师思维】
    13:26
第5章 【本地 Mock 数据】开发不受数据接口限制，高效构建项目雏形
6 节｜45分钟

收起 

  •  

    视频：
    5-1 5分钟讲清楚 mock 数据的原理【正反向代理】
    05:29

  •  

    视频：
    5-2 【vite】配置使用 mock 数据【基础实践，一般场景够用了】
    07:56

  •  

    视频：
    5-3 【Vite】配置使用 mock 数据优化【大厂实践】
    13:12

  •  

    视频：
    5-4 【webpack】配置使用 mock 数据【跟随官方文档来写代码】
    06:26

  •  

    视频：
    5-5 配置 mock 数据总结【Vite VS Webpack 代码每一步实现的对比】【白话】【技术选型的重要考量】
    06:15

  •  

    视频：
    5-6 请求数据 API 封装的技术总结【技术选型大厂通用话术版】【从目的的角度看技术实现方法】
    05:33
第6章 【开发常用组：Page组件】构建复杂页面结构，学习组件代码架构设计方法
5 节｜68分钟

收起 

  •  

    视频：
    6-1 Page 组件封装思路解析【组件封装第一步： 深思熟虑，明确组件的功能需求】【大厂常用实践埋点的具体介绍】
    14:03

  •  

    视频：
    6-2 loading 特效【组件封装第二步： 逻辑抽象与分层， 定义每个模块内容】【纯CSS绘制Icon】【Css3 动画】
    19:09

  •  

    视频：
    6-3 请求失败处理 一【组件封装第二步： 逻辑抽象与分层， 定义每个模块内容】【高性能的组件异步加载】
    11:48

  •  

    视频：
    6-4 5.4 请求失败封装 二【完善方案设计，选择最优的代码实现方案】【高性能的组件异步加载】
    18:42

  •  

    视频：
    6-5 Page 组件封装总结【白话 VS 大厂专业话术来讲组件封装架构设计思路】【我来教大家怎么适合大厂】
    04:16
第7章 【开发常用组：Menu组件】学习如何将组件的逻辑拆分为通用组件
11 节｜156分钟

收起 

  •  

    视频：
    7-1 Menu 组件（ 一） 封装解析【基于大厂的业务特点， 代码应该如何写】【电商的千人千面师如何设计实现的】
    12:08

  •  

    视频：
    7-2 Menu 组件封装 代码 一【新建组件】
    11:40

  •  

    视频：
    7-3 Menu 组件的封装 二【移动端常用左右滑动翻页动画 html 和 css 部分】
    09:16

  •  

    视频：
    7-4 Menu 组件封装 三【移动端常用左右滑动翻页动画 js 部分 一】
    15:10

  •  

    视频：
    7-5 Menu 组件封装 四 【移动端常用翻页动画 js 部分 二】
    18:24

  •  

    视频：
    7-6 Menu 组件封装 五 （Carousel 组件完）【移动端常用翻页动画 js 部分 三】
    17:26

  •  

    视频：
    7-7 Menu 组件封装 六【组件数据整理】【TS 定义数据类型】
    22:01

  •  

    视频：
    7-8 Menu 组件封装 七 Link 组件封装 一【常用的基础组件】【从架构师的视角来分析代码思路】【开发环境和上线环境的代码不同应该如何处理】
    17:52

  •  

    视频：
    7-9 Menu 组件封装 八 （Link 组件封装 二）【封装埋点上报功能】
    18:52

  •  

    视频：
    7-10 Menu 组件封装 九【细节美化】【封装完成】
    08:26

  •  

    视频：
    7-11 Menu 组件封装 十 总结【组件逻辑拆分的方法】【架构设计中如何降低复杂度】【架构师的代码思路分享】
    04:15
第8章 【开发常用组：Banner 组件】学习组件的逻辑抽象过程
4 节｜38分钟

收起 

  •  

    视频：
    8-1 Banner 组件封装 一 封装思路解析【封装图片的原因】【回流和重绘】【提高移动端性能的常用方法–占位加载】
    05:41

  •  

    视频：
    8-2 Banner 组件封装 二【新建组件】【图片的加载过程】
    16:24

  •  

    视频：
    8-3 Banner 组件封装 三【移动端设备宽度不定场景下如何高保还原设计稿的图片占位加载】
    06:00

  •  

    视频：
    8-4 Banner 组件封装 四 完【其他代码】
    09:33
第9章 【开发常用组：轮播组件】1:1复原，学习如何完美实现组件的复用性
6 节｜75分钟

收起 

  •  

    视频：
    9-1 轮播组件封装思考解析
    05:59

  •  

    视频：
    9-2 轮播组件封装 （ 二 ）
    17:29

  •  

    视频：
    9-3 轮播组件封装 （ 三 ）
    19:40

  •  

    视频：
    9-4 轮播组件封装 （ 四 ）
    17:34

  •  

    视频：
    9-5 轮播组件封装 （ 五 ）
    09:03

  •  

    视频：
    9-6 轮播组件封装总结
    05:02
第10章 【发常用组：商品列表组件】1:1 复刻，通过真实的需求来理解代码架构的作用（上）
8 节｜117分钟

收起 

  •  

    视频：
    10-1 商品组件封装导读【组件开发第一步： 深思熟虑，明确组件的功能需求】
    03:51

  •  

    视频：
    10-2 商品列表组件封装 一【电商行业的代码知识】【移动端俩栏瀑布流布局】
    15:41

  •  

    视频：
    10-3 商品列表封装 二【移动端俩栏瀑布流布局 二（完）】
    12:41

  •  

    视频：
    10-4 商品组件封装 三【通过电商业务知识，了解大厂真实场景的业务复杂度】【新建商品组件】
    14:07

  •  

    视频：
    10-5 商品组件封装 四【无架构版商品组件代码 一】
    14:14

  •  

    视频：
    10-6 商品组件封装 五 直播icon【真实业务+代码实现】【无架构版商品组件代码 二】
    26:59

  •  

    视频：
    10-7 商品组件封装 六 商品标题【真实业务+代码实现】【无架构版商品组件代码 三】
    13:27

  •  

    视频：
    10-8 商品组件封装 七 n天最低价【真实业务+代码实现】【无架构版商品组件代码 四】
    15:44
第11章 【发常用组：商品列表组件】1:1 复刻，通过真实的需求来理解代码架构的作用（下）
7 节｜120分钟

收起 

  •  

    视频：
    11-1 商品组件封装 价格封装【真实业务+代码实现】【无架构版商品组件代码 五】
    08:29

  •  

    视频：
    11-2 商品组件封装 描述行【真实业务+代码实现】【无架构版商品组件代码 六】
    14:51

  •  

    视频：
    11-3 商品组件封装 商品缩小需求演示【通过真实需求，了解真实的开发过程】【无架构版商品组件代码 七】
    26:36

  •  

    视频：
    11-4 商品组件封装 架构优化 一【一步一步做架构】【在线拯救屎山代码】
    15:35

  •  

    视频：
    11-5 商品组件封装 架构优化 一【一步一步做架构】【在线拯救屎山代码】
    15:39

  •  

    视频：
    11-6 商品封装 架构优化二【一步一步做架构】【在线拯救屎山代码】
    19:37

  •  

    视频：
    11-7 商品组件封装 架构优化 三【一步一步做架构】【在线拯救屎山代码】
    18:40
第12章 【语法总结和代码规范】最快速提升代码能力，拥有大厂架构师的漂亮代码
4 节｜34分钟

收起 

  •  

    视频：
    12-1 Vue 3 setup script 语法总结 上【总共20分钟总结 vue3 setup script 语法】
    12:40

  •  

    视频：
    12-2 vue 3 setup script 语法总结 下【总共20分钟总结 vue3 setup script 语法】
    06:55

  •  

    视频：
    12-3 开发规范【为什么你的代码过几天就不认识了】【从大厂职业发展角度看开发规范】【开发规范俩个核心，代码立马95分以上】【10min】
    09:17

  •  

    视频：
    12-4 代码规范【限制代码行数】【架构能力】【逻辑的抽象与分层的本质】【5min】
    04:39
    隐藏内容
    本内容需权限查看
    • 普通用户: 1金币
    • VIP会员: 免费
    • 永久会员: 免费
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。