前端共学会：学习|成长|工作|职业，综合服务社区

帮助每一位前端开发者少走弯路、摆脱迷茫，告别焦虑，轻松⼯作，持续提升

已完结难度专业时长 40小时学习人数 155 综合评分 10.00

立即购买加购物车

第1章什么是共学会？试看 2 节 | 5分钟

共学会整体介绍

收起列表
- 视频： 1-1 共学会整体介绍，来了解一下吧~ (04:27) 试看
- 图文： 1-2 购买查看，加群
第2章综合解决方案—导读 1 节 | 3分钟

以下章节为，综合解决方案视频学习，观看本章，帮助你，更好的进行后续的学习~

收起列表
- 视频： 2-1 综合解决方案导读 (02:24)
第3章解决方案—标准化大厂编程规范解决方案ESLint + Git Hooks(赠送) 11 节 | 82分钟

在一线大厂或明星开源项目中，对代码格式与 Git 提交均有严格的规范要求，不符合规范的代码将无法被提交到 git 仓库。想要晋升大厂高软，第一步先剔除你的“坏习惯”

收起列表
- 视频： 3-1 ：为什么需要编程规范？ (04:14)
- 视频： 3-2 ：大厂编程规范一：代码检测工具 ESLint 你了解多少？ (12:34)
- 视频： 3-3 ：大厂编程规范二：你知道代码格式化 Prettier 吗？ (03:18)
- 视频： 3-4 ：ESLint 与 Prettier 配合解决代码格式问题 (10:17)
- 视频： 3-5 ：大厂编程规范三：git 提交规范解析 (05:33)
- 视频： 3-6 ：Commitizen助你规范化提交代码 (14:42)
- 视频： 3-7 ：什么是 Git Hooks (03:46)
- 视频： 3-8 ：使用 husky + commitlint 检查提交描述是否符合规范要求 (15:19)
- 视频： 3-9 ：通过 pre-commit 检测提交时代码规范 (05:17)
- 视频： 3-10 ：lint-staged 自动修复格式错误 (05:05)
- 视频： 3-11 ：总结 (01:26)
第4章解决⽅案—企业级多端响应式适配方案 11 节 | 93分钟

1. 介绍响应式布局的概念和原理 2. 讲解不同设备分辨率下的适配方案 3. 使用CSS媒体查询、flexbox等技术实现响应式布局

收起列表
- 视频： 4-1 前言 (01:24)
- 视频： 4-2 响应式原理与移动优先原则 (08:37)
- 视频： 4-3 企业开发移动设备多分辨率场景分析 (03:13)
- 视频： 4-4 rem 移动端适配方案 (09:26)
- 视频： 4-5 viewprot 移动端适配方案 (04:50)
- 视频： 4-6 rem 和 viewport 总结 (00:45)
- 视频： 4-7 企业开发异形屏适配方 (12:50)
- 视频： 4-8 学以致用，基于所学实现一个响应性页面 (26:37)
- 视频： 4-9 企业级响应式框架解决方案 (06:15)
- 视频： 4-10 学以致用，基于响应式框架实现响应性页面 (16:53)
- 视频： 4-11 总结 (01:20)
第5章解决方案—Web性能优化核心解决方案 16 节 | 108分钟

1. 讲解前端性能优化的意义和原则 2. 分析网站性能瓶颈和识别优化点 3. 介绍常见的性能优化方案和技术，如：懒加载、CDN、浏览器缓存、减少HTTP请求、减少DOM操作等

收起列表
- 视频： 5-1 前言 (01:16)
- 视频： 5-2 为什么要进行性能优化，性能优化的标准是什么？ (10:30)
- 视频： 5-3 企业项目性能优化方案 (01:14)
- 视频： 5-4 创建待优化项目 (04:21)
- 视频： 5-5 构建数据懒加载业务场景 (23:44)
- 视频： 5-6 数据懒加载业务场景分析 (12:38)
- 视频： 5-7 实现数据懒加载解决方案 (03:04)
- 视频： 5-8 构建图片懒加载业务场景 (07:48)
- 视频： 5-9 图片懒加载业务场景分析 (05:21)
- 视频： 5-10 实现图片懒加载解决方案 (10:10)
- 视频： 5-11 构建打包体积过大的业务场景 (05:05)
- 视频： 5-12 打包体积过大的业务场景分析 (03:55)
- 视频： 5-13 实现打包体积过大解决方案 (04:32)
- 视频： 5-14 CDN 优化处理解决方案 (08:25)
- 视频： 5-15 其他优化方案 (04:34)
- 视频： 5-16 总结 (01:05)
第6章解决方案—企业应用渲染解决方案 10 节 | 71分钟

1. 介绍SPA（单页面应用）的特点和优势 2. 讲解前端路由的概念和原理 3. 介绍Vue-Router、React-Router等路由管理工具的使用方法

收起列表
- 视频： 6-1 前言 (01:31)
- 视频： 6-2 构建路由模式渲染服务 (24:20)
- 视频： 6-3 hash 模式在服务端的渲染呈现方案 (05:27)
- 视频： 6-4 history 模式在服务端的渲染呈现方案 (07:35)
- 视频： 6-5 hash 模式与 history 模式的渲染总结 (01:33)
- 视频： 6-6 CSR 客户端渲染原理 (05:24)
- 视频： 6-7 SSR 服务端渲染原理 (02:44)
- 视频： 6-8 SSR 服务端渲染企业实现方案 (15:02)
- 视频： 6-9 Prerender 预渲染针对企业非动态项目解决方案 (04:44)
- 视频： 6-10 总结 (02:06)
第7章解决方案—前端安全解决方案 8 节 | 82分钟

1. 介绍前端安全的重要性和常见攻击手段 2. 讲解XSS（跨站脚本攻击）和CSRF（跨站请求伪造）的原理和防御方法 3. 使用CSP（内容安全策略）等工具增强前端安全性

收起列表
- 视频： 7-1 前言 (01:12)
- 视频： 7-2 XSS（跨站脚本攻击）的原理与业务场景 (21:25)
- 视频： 7-3 XSS（跨站脚本攻击）致网站崩溃与防护方案 (17:40)
- 视频： 7-4 CSRF（跨站请求伪造）的原理与业务场景 (12:49)
- 视频： 7-5 CSRF（跨站请求伪造）篡改用户信息与防护方案 (12:58)
- 视频： 7-6 点击劫持（Clickjacking）的原理、业务场景 (05:39)
- 视频： 7-7 其他的安全防护方式 (08:10)
- 视频： 7-8 总结 (01:26)
第8章解决方案—可视化前置 svg 与 canvas 详解 9 节 | 92分钟

介绍 JavaScript 的设计原则、设计模式与优化技巧，包括：单一职责原则、最少知识原则、开放封闭原则、代码重构原则与方案解析、以及多个实际案例和应用场景以演示具体的代码实现和优化方式

收起列表
- 视频： 8-1 前言 (01:33)
- 视频： 8-2 SVG 的特性与原理 (08:01)
- 视频： 8-3 SVG 在企业项目中的使用方案 (05:12)
- 视频： 8-4 svg 访问注意事项 (06:13)
- 视频： 8-5 基于 webpack 渲染 svg 的企业解决方案 (32:19)
- 视频： 8-6 基于 vite 渲染 svg 的企业解决方案 (09:48)
- 视频： 8-7 可视化原理 - canvas 的特性与基本使用 (12:01)
- 视频： 8-8 基于 canvas 实现柱形图 (14:28)
- 视频： 8-9 总结 (01:48)
第9章解决方案—图表与数据可视化 13 节 | 139分钟

介绍数据可视化与大屏可视化的常见解决方案，包括：SVG、Canvas、ECharts、AntV、以及实战案例。

收起列表
- 视频： 9-1 前言 (01:06)
- 视频： 9-2 基于 vite 与 tailwindcss 创建大屏可视化项目 (17:17)
- 视频： 9-3 导入 echarts 与 axios ，获取大屏动态数据 (06:46)
- 视频： 9-4 绘制大区横向柱形图 (21:30)
- 视频： 9-5 绘制服务竖向柱形图 (10:26)
- 视频： 9-6 绘制报警风险雷达图 (15:29)
- 视频： 9-7 绘制异常处理双环形图 (22:47)
- 视频： 9-8 绘制数据传递关系图 (21:05)
- 视频： 9-9 绘制关键词条文档云图 (04:07)
- 视频： 9-10 绘制数据总览图 (09:36)
- 视频： 9-11 地图可视化分析与时间轴图表绘制 (04:54)
- 视频： 9-12 大屏数据展示组件库 DataV (01:46)
- 视频： 9-13 总结 (01:58)
第10章解决方案—WebGL 和 3D 渲染 12 节 | 97分钟

主要涉及如何在前端项目中使用 WebGL 技术来实现 3D 渲染效果。具体内容包括 WebGL 的基本概念、渲染流程、顶点缓冲对象、片元着色器、纹理、光照等方面的内容，通过 threejs 进行实现、以及实战案例。

收起列表
- 视频： 10-1 01：前言 (02:25)
- 视频： 10-2 02：canvas、OpenGL、WebGL 到底都是干嘛的 (03:10)
- 视频： 10-3 03：WebGL 框架 three.js 初体验-理论篇 (07:58)
- 视频： 10-4 04：WebGL 框架 three.js 初体验-实战篇 (14:25)
- 视频： 10-5 05：threejs 配置解码器载入 glb 格式 3D 模型 (25:22)
- 视频： 10-6 06：添加控制器，让模型支持 360° (05:34)
- 视频： 10-7 07：添加材质，并基于 RGBELoader 为 3D 模型增加环境贴图 (14:59)
- 视频： 10-8 08：根据 GridHelper 设置网格动态效果 (07:53)
- 视频： 10-9 09：构建车轮模型组，让车轮转起来 (04:27)
- 视频： 10-10 10：监听选择器的变化，修改车身配置 (04:14)
- 视频： 10-11 11：创建阴影贴图，让场景更加真实 (05:18)
- 视频： 10-12 12-总结 (01:08)
第11章解决⽅案—模块化与打包工具 11 节 | 84分钟

介绍如何使用现代前端工具，例如：模块化规范、webpack 打包与优化、Rollup 打包与优化、Vite 打包与优化、并介绍每个工具的具体特点和优缺点

收起列表
- 视频： 11-1 01：前言 (01:50)
- 视频： 11-2 02：前端模块化背景与对应方案解析 (06:47)
- 视频： 11-3 03：Node 模块化规范 - CommonJS（CJS） (05:50)
- 视频： 11-4 04：浏览器模块化规范：ES6 Modules (ESM) (08:28)
- 视频： 11-5 05：模块打包工具：webpack、rollup、vite 优缺点与特性对比 (09:57)
- 视频： 11-6 06：vue-cli 构建原理与@vuecli-service (10:08)
- 视频： 11-7 07：configureWebpack 与 chainWebpack (07:44)
- 视频： 11-8 08：plugin、loader 的区别与构建方案 (15:19)
- 视频： 11-9 09：vite 为什么快？深入预构建 (07:38)
- 视频： 11-10 10：esbuild 是什么？它如何使用？ (07:21)
- 视频： 11-11 11：总结 (02:07)
第12章解决⽅案—JavaScript 库开发 11 节 | 64分钟

介绍了如何使用 JavaScript 编写自己的库，包括：代码组织结构、构建、测试、发布、维护、社区、以及一个通用库的演示

收起列表
- 视频： 12-1 01：前言 (04:02)
- 视频： 12-2 02：构建一个开源库-打包 (07:11)
- 视频： 12-3 03：构建一个开源库-发布与开源 (07:46)
- 视频： 12-4 04：使开源库支持更多的模块化方案 (08:22)
- 视频： 12-5 05：简化开源库的体积 (03:55)
- 视频： 12-6 06：测试开源库的基本实现 (07:02)
- 视频： 12-7 07：验证测试覆盖率与组合测试 (05:48)
- 视频： 12-8 08：模拟浏览器环境的测试 (07:57)
- 视频： 12-9 09：开源协议、文档与统计 (06:06)
- 视频： 12-10 10：社区协作、编码规范与分支处理 (03:42)
- 视频： 12-11 11：总结 (01:49)
第13章解决⽅案—包管理器分析 5 节 | 24分钟

介绍目前常用的包管理器，以及它们的特性。包括：npm、yarn、cnpm、pnpm

收起列表
- 视频： 13-1 前言 (02:01)
- 视频： 13-2 npm 包管理工具与特点分析 (11:15)
- 视频： 13-3 yarn 包管理工具与特点分析 (03:04)
- 视频： 13-4 pnpm 包管理工具与特点分析 (05:43)
- 视频： 13-5 总结 (01:11)
第14章解决方案—第三方工具方案 8 节 | 46分钟

介绍国内常用的第三方工具，比如：统计类（友盟、百度统计）、云服务（阿里云、七牛云）、快速搭建工具（蓝湖、飞冰）、UI组件库（阿里的 Ant Design、蚂蚁金服的 NG-ZORRO、饿了么的 Element UI、京东的 J-UI、百度的 San、有赞的 Vant 等）、Mock数据平台（easy-mock、rap2）、验证服务（极验验证）、数据爬取（...

收起列表
- 视频： 14-1 01：前言 (00:46)
- 视频： 14-2 02：统计类工具分析与企业应用 (07:24)
- 视频： 14-3 03：云服务工具分析与企业应用 (13:11)
- 视频： 14-4 04：UI 组件库工具分析与企业应用 (05:30)
- 视频： 14-5 05：Mock 数据平台分析与企业应用 (06:05)
- 视频： 14-6 06：验证服务工具分析与企业应用 (06:33)
- 视频： 14-7 07：设计协作工具分析与企业应用 (04:08)
- 视频： 14-8 08：总结 (01:59)
第15章解决方案—前端工程师职业发展 6 节 | 35分钟

通过更多的实际案例和经验分享，帮助同学了解前端工程师的职业发展路径、工作技能要求和职业规划等，为职业发展提供有益的指导。

收起列表
- 视频： 15-1 01：前言 (01:06)
- 视频： 15-2 02：前端技术学习路径 (12:05)
- 视频： 15-3 03：在校大学生，如何规划自己的职业生涯 (05:05)
- 视频： 15-4 04：开发者如何把控自己的职业 (07:37)
- 视频： 15-5 05：简历制作技巧 (08:33)
- 视频： 15-6 06：总结 (00:25)
第16章解决方案—课程总结 1 节 | 1分钟

课程总结

收起列表
- 视频： 16-1 总结 (00:48)
第17章社群资料 6 节 | 3分钟

社群中的一些精华贴、面试预约、社群资源等等。

收起列表
- 视频： 17-1 社群资源-精华 (00:24)
- 视频： 17-2 社群资源-面试预约 (00:34)
- 视频： 17-3 社群资源-社群资料 (00:15)
- 视频： 17-4 社群资源-学习交流 (00:26)
- 视频： 17-5 社群资源-一对一咨询 (00:33)
- 视频： 17-6 社群资源-职场交流 (00:25)
第18章简历优化、模拟面试：历史记录试看 2 节 | 64分钟

简历优化、模拟面试

收起列表
- 视频： 18-1 如何才能写好一份简历？我看了上千份简历之后，才明白这些道理 (09:40) 试看
- 视频： 18-2 如何高薪入职心仪的公司 (54:09)
第19章书籍讲解——Vue.js设计与实现 22 节 | 182分钟

讲书

收起列表
- 视频： 19-1 书籍导读 (02:53)
- 视频： 19-2 框架的设计本质上是一种权衡的艺术 (12:30)
- 视频： 19-3 框架设计的核心要素都有什么 (09:32)
- 视频： 19-4 Vue.js 3 的设计思路是什么 (08:04)
- 视频： 19-5 响应系统的作用与实现 - 上 (10:03)
- 视频： 19-6 响应系统的作用与实现 - 下 (12:20)
- 视频： 19-7 非原始值的响应式方案 (09:15)
- 视频： 19-8 原始值的响应式方案 (06:16)
- 视频： 19-9 渲染器设计 (12:37)
- 视频： 19-10 挂载与更新-上 (12:15)
- 视频： 19-11 挂载与更新-下 (08:01)
- 视频： 19-12 diff 算法的作用 (11:45)
- 视频： 19-13 vue3 中的 diff (08:04)
- 视频： 19-14 乱序处理 (11:07)
- 视频： 19-15 组件的实现原理 (07:04)
- 视频： 19-16 异步组件和函数式组件 (04:36)
- 视频： 19-17 内建组件和模块 (09:07)
- 视频： 19-18 编译器核心运行流程 (05:37)
- 视频： 19-19 parse 解析模块 (06:02)
- 视频： 19-20 transform 转化模块 (03:34)
- 视频： 19-21 generate 生成模块 (05:49)
- 视频： 19-22 同构渲染 (04:56)
第20章书籍讲解——红宝书 27 节 | 179分钟

书籍讲解

收起列表
- 视频： 20-1 什么是 JavaScript.mp4 (02:48)
- 视频： 20-2 HTML 中的 JavaScript.mp4 (05:48)
- 视频： 20-3 语言基础.mp4 (13:07)
- 视频： 20-4 变量、作用域与内存.mp4 (08:04)
- 视频： 20-5 基本引用类型.mp4 (07:24)
- 视频： 20-6 集合引用类型.mp4 (08:07)
- 视频： 20-7 迭代器与生成器 (04:49)
- 视频： 20-8 对象、类与面向对象编程 (07:47)
- 视频： 20-9 代理与反射 (05:58)
- 视频： 20-10 函数 (06:05)
- 视频： 20-11 期约与异步函数 (05:49)
- 视频： 20-12 1BOM (05:15)
- 视频： 20-13 客户端检测 (06:34)
- 视频： 20-14 DOM (07:07)
- 视频： 20-15 DOM 扩展 (04:43)
- 视频： 20-16 DOM2 和 DOM3 (07:48)
- 视频： 20-17 事件 (08:42)
- 视频： 20-18 动画与 Canvas 图形 (04:03)
- 视频： 20-19 表单脚本 (06:24)
- 视频： 20-20 JavaScript API (12:34)
- 视频： 20-21 错误处理与调试 (05:01)
- 视频： 20-22 处理 XML + 23：JSON (03:11)
- 视频： 20-23 网络请求与远程资源 (07:41)
- 视频： 20-24 客户端存储 (04:48)
- 视频： 20-25 模块 (06:57)
- 视频： 20-26 工作者线程 (07:21)
- 视频： 20-27 最佳实践 (04:51)
第21章书籍讲解——程序员大脑 14 节 | 46分钟

程序员大脑

收起列表
- 视频： 21-1 程序员超强大脑介绍 (01:10)
- 视频： 21-2 剖析程序设计之惑 (04:47)
- 视频： 21-3 快速阅读代码 (03:22)
- 视频： 21-4 快速学习编程语法 (03:16)
- 视频： 21-5 阅读复杂的代码 (03:11)
- 视频： 21-6 深入理解代码 (06:51)
- 视频： 21-7 更好地解决编程问题 (05:09)
- 视频： 21-8 错误的思维方式 (03:45)
- 视频： 21-9 提高命名的质量 (03:28)
- 视频： 21-10 避免低质量代码和认知负荷-两种框架 (01:16)
- 视频： 21-11 提高解决复杂问题的能力 (03:28)
- 视频： 21-12 编程活动与任务 (03:31)
- 视频： 21-13 设计与改进大型系统 (00:44)
- 视频： 21-14 对新程序员进行适岗培训 (01:23)
第22章书籍讲解——软技能-代码之外的生存指南 18 节 | 57分钟

软技能-代码之外的生存指南

收起列表
- 视频： 22-1 前言 (05:40)
- 视频： 22-2 经营自己的职业生涯就像经营一家企业 (03:31)
- 视频： 22-3 给自己设定职业目标 (02:35)
- 视频： 22-4 拓展自己的人机交往能力 (03:10)
- 视频： 22-5 破解面试之道 (03:23)
- 视频： 22-6 程序员的职业发展路径 (06:13)
- 视频： 22-7 专业化很重要 (03:21)
- 视频： 22-8 如何获取晋升 (02:18)
- 视频： 22-9 不要陷入对技术的狂热之中 (03:11)
- 视频： 22-10 如何辞职并开始为自己工作 (03:54)
- 视频： 22-11 如何成为自由职业者？ (05:45)
- 视频： 22-12 关于创业 (00:53)
- 视频： 22-13 打造个人品牌 (02:39)
- 视频： 22-14 如何创建大获成功的博客 (03:18)
- 视频： 22-15 创建自己的视频专栏 (01:27)
- 视频： 22-16 为他人增加价值 (03:04)
- 视频： 22-17 学习篇 (01:34)
- 视频： 22-18 其他 (00:57)

本课程已完结

试看

全部试看小节

讲师

Sunday 全栈工程师

高级技术专家，曾就职于国内一线互联网公司，统筹过的多个大型项目用户数已过千万级。致力于研究大前端技术，多次受邀参加国内前端技术分享会，如：2018 年Google 中国技术分享会。

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定

重新观看

意见反馈帮助中心 APP下载

官方微信

热搜

最近搜索清空

前端共学会：学习|成长|工作|职业，综合服务社区

帮助每一位前端开发者少走弯路、摆脱迷茫，告别焦虑，轻松⼯作，持续提升

前端共学会，学习/成长/工作/职业，综合服务社区

第1章 什么是共学会？ 试看 2 节 | 5分钟

第2章 综合解决方案—导读 1 节 | 3分钟

第3章 解决方案—标准化大厂编程规范解决方案ESLint + Git Hooks(赠送) 11 节 | 82分钟

第4章 解决⽅案—企业级多端响应式适配方案 11 节 | 93分钟

第5章 解决方案—Web性能优化核心解决方案 16 节 | 108分钟

第6章 解决方案—企业应用渲染解决方案 10 节 | 71分钟

第7章 解决方案—前端安全解决方案 8 节 | 82分钟

第8章 解决方案—可视化前置 svg 与 canvas 详解 9 节 | 92分钟

第9章 解决方案—图表与数据可视化 13 节 | 139分钟

第10章 解决方案—WebGL 和 3D 渲染 12 节 | 97分钟

第11章 解决⽅案—模块化与打包工具 11 节 | 84分钟

第12章 解决⽅案—JavaScript 库开发 11 节 | 64分钟

第13章 解决⽅案—包管理器分析 5 节 | 24分钟

第14章 解决方案—第三方工具方案 8 节 | 46分钟

第15章 解决方案—前端工程师职业发展 6 节 | 35分钟

第16章 解决方案—课程总结 1 节 | 1分钟

第17章 社群资料 6 节 | 3分钟

第18章 简历优化、模拟面试：历史记录 试看 2 节 | 64分钟

第19章 书籍讲解——Vue.js设计与实现 22 节 | 182分钟

第20章 书籍讲解——红宝书 27 节 | 179分钟

第21章 书籍讲解——程序员大脑 14 节 | 46分钟

第22章 书籍讲解——软技能-代码之外的生存指南 18 节 | 57分钟

试看

讲师

课程预览

邀请好友学习

微信邀请

链接邀请

海报邀请

限时优惠 ￥429.

学习咨询

第1章什么是共学会？试看 2 节 | 5分钟

第2章综合解决方案—导读 1 节 | 3分钟

第3章解决方案—标准化大厂编程规范解决方案ESLint + Git Hooks(赠送) 11 节 | 82分钟

第4章解决⽅案—企业级多端响应式适配方案 11 节 | 93分钟

第5章解决方案—Web性能优化核心解决方案 16 节 | 108分钟

第6章解决方案—企业应用渲染解决方案 10 节 | 71分钟

第7章解决方案—前端安全解决方案 8 节 | 82分钟

第8章解决方案—可视化前置 svg 与 canvas 详解 9 节 | 92分钟

第9章解决方案—图表与数据可视化 13 节 | 139分钟

第10章解决方案—WebGL 和 3D 渲染 12 节 | 97分钟

第11章解决⽅案—模块化与打包工具 11 节 | 84分钟

第12章解决⽅案—JavaScript 库开发 11 节 | 64分钟

第13章解决⽅案—包管理器分析 5 节 | 24分钟

第14章解决方案—第三方工具方案 8 节 | 46分钟

第15章解决方案—前端工程师职业发展 6 节 | 35分钟

第16章解决方案—课程总结 1 节 | 1分钟

第17章社群资料 6 节 | 3分钟

第18章简历优化、模拟面试：历史记录试看 2 节 | 64分钟

第19章书籍讲解——Vue.js设计与实现 22 节 | 182分钟

第20章书籍讲解——红宝书 27 节 | 179分钟

第21章书籍讲解——程序员大脑 14 节 | 46分钟

第22章书籍讲解——软技能-代码之外的生存指南 18 节 | 57分钟

限时优惠￥429.