前端高手成长课:从业务深挖到代码架构设计方案落地

从0到1,资深架构师带你攻克复杂电商业务,实现前端架构设计与代码落地,你也可以打造卓越项目!

已完结
|
难度:中级
|
时长:共 20 小时
新课榜第 10 名
优惠到手 269
原价¥299.00
满599减100 满299减30
立即购买
加购物车
  • 从业务到架构一课全掌握
  • 收获一套BAT大厂生存法则
  • 具备攻克前端技术难题能力
  • 轻松学会设计代码架构方案
  • 6+组件封装10+技术方案
  • 深刻理解每一行代码的意义
试看本节课 08:17
试看本节课 05:54
试看本节课 11:09
1-1 导学:学习本课程你可以获得什么?
2-1 移动端 web 页面应用场景介绍-你可曾了解过自己常用的app的构造
2-2 移动端 web 的业内解决方案:最常用的 Hybird
前端代码架构设计能力强弱,是前端职业发展的分水岭。如果你拥有强大的代码架构设计能力,你可以轻松应对复杂的业务需求,而如果你不提升代码架构设计能力,很可能因一次小变更而导致程序崩溃。面对前端业务需求变化频繁和职业发展的挑战,如何更好的破局?这也是本课程的主旨重点。 这门课程会从真实的前端电商业务场景出发,带你从需求梳理到架构落地,并通过电商核心模块的全流程开发实践,组件封装及代码架构设计,最终教会你打造出高可靠性和强可维护性的项目。如果你也想突破困局,欢迎你加入这门课。从此,像架构师一样思考,开启你的卓越开发与财富创造之路!

本章介绍:

介绍移动端的应用场景,最常见的开发方式,技术选型的原则,以及大厂技术选型的方式和话术。

第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

本章介绍:

了解前端工程化和构建工具的的知识,从 Webpack 和 Vite 的快速入门开始,使用其初始化工程和进行初始配置。

第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

本章介绍:

通过大厂请求开发的真实案例,了解请求封装的思路和会遇到的真实问题。通过 Axios 和 fetch 分别封装请求 API, 在对比中学习编程思路,了解架构师的工作内容,了解架构师的编程思维。

第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

本章介绍:

学完本章,掌握本地 Mock 数据技巧,打破开发对真实接口的依赖,独立推动项目快速迭代;轻松模拟各种复杂数据场景,为开发降本增效。

第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

本章介绍:

通过 Page 组建的需求分析和代码过程,为大家展示组件架构设计的方法。也会为大家白话方便理解的版本和大厂通用专业的版本。让大家技能学会如何写代码,也能学会如何像大厂一样专业。

第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

本章介绍:

通过大厂的业务实践,来讲解业内的通用实践和Menu 组件的需要实现的功能点。也会为大家演示如何将组件的逻辑拆分为通用组件。 通过常变的业务逻辑和基本不变的基本组件,组合成扩展性非常强的大厂实践版组件。

第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

本章介绍:

最核心的内容是移动端设备宽度不固定的情况下,如何高保真的还原设计稿的角度,实现图片的占位加载。另还会详细讲解图片组件的逻辑抽象过程,完成大厂实践版图片和 banner 组件。

第8章 【开发常用组:Banner 组件】学习组件的逻辑抽象过程
4 节|38分钟
展开
  • 视频:
    8-1 Banner 组件封装 一 封装思路解析【封装图片的原因】【回流和重绘】【提高移动端性能的常用方法--占位加载】
    05:41
  • 视频:
    8-2 Banner 组件封装 二【新建组件】【图片的加载过程】
    16:24
  • 视频:
    8-3 Banner 组件封装 三【移动端设备宽度不定场景下如何高保还原设计稿的图片占位加载】
    06:00
  • 视频:
    8-4 Banner 组件封装 四 完【其他代码】
    09:33

本章介绍:

比照真实的电商网站1:1复原,跟着通过代码来体会如何实现组件的复用性。通过实战与总结,可以使得架构能力进一步提升,掌握如何拥有代码掌控力的方法。

第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

本章介绍:

1:1 复刻真实的商品列表,对照京东、淘宝和拼多多讲解真实业务。在此过程中会为大家带来非常实用的移动端无限下来瀑布流的实现方式。另外还通过有无架构的代码对比,以及再次基础上做真实的需求来理解架构的作用。升级架构思维。

第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

本章介绍:

1:1 复刻,通过真实的需求来理解代码架构的作用(下)

第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

本章介绍:

将课程中使用的语法进行总结,没有 Vue 等知识的基础的同学,可以在本章系统学习对应的语法知识。通过大厂职场遭遇,真实代码演示来讲解代码规范。通过核心俩件事,就能最快速提升代码能力,拥有大厂架构师的漂亮代码。

第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
本课程已完结
适合人群
工作几年发现自己的技术成长遇到瓶颈,迫切想要提升技术深度
写了很多年的代码,但代码为什么这么写却不了解,只是随大流式的写得和大家一样
技术储备
已经掌握HTML&CSS基本用法
已经掌握JS基本用法
环境参数
Vue 3.3
ts 5.7.3
木 易
木易 Web前端工程师
现就职于微软亚洲互联网工程院。京东商城黄金流程组四年半,曾任前端负责人。黄金流程组是负责京东 App 商品详情, 购物车, 结算, 收银台这些核心流程的团队。 有非常多的从 0 到 1 的大型项目经历。在移动端和 PC端都有非常多的实战经验。经历9个 618/双11, 作为核心团队成员提供技术支持。从0到1从设计到代码实现多种内部系统,例如配置系统,监控系统等。负责过重点项目有京东APP收银台重构,京东阿波罗系统。
不为别的,只为提升面试通过率
尽管课程时间很长,
但没关系,我们有老师的陪伴,
还有同学之间互相鼓励,彼此帮助,
完成学习后,还能获得慕课网官方认证的证书。
立即购买
数据加载中...
《前端高手成长课:从业务深挖到代码架构设计方案落地》的真实评价
内容实用:
10.00分
通俗易懂:
10.00分
逻辑清晰:
10.00分
综合评分:10.00分,共 人参与
篇幅原因,只展示最近100条评价

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号