收藏

揭秘一线互联网企业前端JavaScript高级面试

BAT工程师讲解前端JS高级面试考点:虚拟DOM、Vue、React、Hybrid实现原理

前端跳槽必备 一线互联网公司高级前端JavaScript面试

已完结 难度 高级 时长 16小时 学习人数 1621 综合评分 9.94
  • 第1章 课程介绍 试看 3 节 | 16分钟

    本章主要介绍课程的知识大纲,每个章节的解决顺序和主要内容。

    收起列表

    • 视频: 1-1 导学 (04:44) 试看
    • 视频: 1-2 课程重要提示 (01:40)
    • 视频: 1-3 架构 (08:44)
  • 第2章 ES6 语法 18 节 | 140分钟

    本章主要讲解工作中最常用的 ES6 语法,包括 Module Class Promise 等语法,还会介绍使用 babel webpack rollup 来搭建 ES6 编译环境。

    收起列表

    • 视频: 2-1 开始 (03:34)
    • 视频: 2-2 模块化 - 语法 (05:45)
    • 视频: 2-3 模块化 - babel-new-part1 (09:30) 试看
    • 视频: 2-4 模块化 - babel-new-part2 (01:48) 试看
    • 视频: 2-5 模块化 - webpack (08:44)
    • 视频: 2-6 模块化 - rollup介绍 (05:22)
    • 视频: 2-7 模块化 - rollup安装 (10:29)
    • 视频: 2-8 模块化 - 总结 (06:16)
    • 视频: 2-9 class - JS构造函数 (06:09)
    • 视频: 2-10 class - 基本语法 (14:02)
    • 视频: 2-11 class - 继承 (14:19)
    • 视频: 2-12 class - 总结 (02:54)
    • 视频: 2-13 promise-callback-hell (07:14)
    • 视频: 2-14 promise - 语法 (09:17)
    • 视频: 2-15 promise - 总结 (01:01)
    • 视频: 2-16 常用功能 - 语法演示 (11:51)
    • 视频: 2-17 常用功能 - 代码演示 (19:11)
    • 视频: 2-18 常用功能 - 总结 (01:50)
  • 第3章 -原型 12 节 | 68分钟

    本章将结合 jQuery 和 zepto 源码来讲解原型的实际应用。通过源码来分析 jQuery 和 zepto 是如何使用原型的,以及通过它们的插件机制,讲解原型的扩展性。

    收起列表

    • 视频: 3-1 开始 (02:23)
    • 视频: 3-2 实际应用 - jQuery使用 (08:32)
    • 视频: 3-3 实际应用 - Zepto - 1 (07:04)
    • 视频: 3-4 实际应用 - Zepto - 2 (08:13)
    • 视频: 3-5 实际应用 - Zepto - 3 (00:55)
    • 视频: 3-6 实际应用 - jQuery-1 (04:33)
    • 视频: 3-7 实际应用 - jQuery-2 (07:09)
    • 视频: 3-8 实际应用 - 总结 (01:55)
    • 视频: 3-9 扩展性 - 插件机制 (10:29)
    • 视频: 3-10 扩展性 - 代码演示 (08:38)
    • 视频: 3-11 扩展性 - 总结 (04:19)
    • 视频: 3-12 总结 (03:23)
  • 第4章 -异步 27 节 | 177分钟

    本章全面讲解了 JS 异步的知识点。先从原理开始,讲解什么是单线程、什么是 event loop ;然后讲解 jQuery 中解决异步的 Deferred 以及 jQuery 初次展示出来的 Promise 的用法;最后再讲解 ES6 中 Promise 的用法和标准。

    收起列表

    • 视频: 4-1 开始 (03:43)
    • 视频: 4-2 单线程 - 介绍-1 (05:09)
    • 视频: 4-3 单线程 - 介绍-2 (01:46)
    • 视频: 4-4 单线程 - 异步-1 (07:26)
    • 视频: 4-5 单线程 - 异步-2 (04:51)
    • 视频: 4-6 单线程 - 总结 (03:22)
    • 视频: 4-7 event-loop - 演示 (16:04)
    • 视频: 4-8 event-loop - 代码演示 (09:51)
    • 视频: 4-9 event-loop - 总结 (04:54)
    • 视频: 4-10 jquery-deferred - 介绍 (11:08)
    • 视频: 4-11 jquery-deferred - 介绍演示 (07:19)
    • 视频: 4-12 jquery-deferred - 应用-1 (09:18)
    • 视频: 4-13 jquery-deferred - 应用-2 (06:50)
    • 视频: 4-14 jquery-deferred - 应用-3 (06:06)
    • 视频: 4-15 jquery-deferred - 应用-4 (04:11)
    • 视频: 4-16 jquery-deferred - 总结 (02:40)
    • 视频: 4-17 promise - 语法回顾 (10:38)
    • 视频: 4-18 promise - 捕获异常-1 (04:00)
    • 视频: 4-19 promise - 捕获异常-2 (03:19)
    • 视频: 4-20 promise - 串联 (06:21)
    • 视频: 4-21 promise-all-race (06:49)
    • 视频: 4-22 promise - 标准总结 (10:48)
    • 视频: 4-23 promise - 总结 (03:18)
    • 视频: 4-24 async-await-1 (06:09)
    • 视频: 4-25 async-await-2 (05:13)
    • 视频: 4-26 async-await - 总结 (01:35)
    • 视频: 4-27 总结 (13:46)
  • 第5章 虚拟 DOM 21 节 | 132分钟

    本章分析了虚拟 DOM 的使用场景、常用 API、以及 diff 算法的代码框架。通过学习和了解虚拟 DOM ,为后面的 vue 和 React 学习打好基础。

    收起列表

    • 视频: 5-1 开始 (06:05)
    • 视频: 5-2 什么是 vdom - 开始 (08:43)
    • 视频: 5-3 什么是 vdom-jquery-1 (04:17)
    • 视频: 5-4 什么是 vdom-jquery-2 (09:59)
    • 视频: 5-5 什么是 vdom - 总结 (05:30)
    • 视频: 5-6 使用 vdom-snabbdom-1 (03:24)
    • 视频: 5-7 使用 vdom-snabbdom-2 (08:11)
    • 视频: 5-8 使用 vdom-snabbdom-3 (10:42)
    • 视频: 5-9 使用 vdom - 重做demo-1 (09:52)
    • 视频: 5-10 使用 vdom - 重做demo-2 (04:05)
    • 视频: 5-11 使用 vdom - 总结 (01:59)
    • 视频: 5-12 Diff算法 - 开始 (06:55)
    • 视频: 5-13 Diff算法 - 命令演示 (04:36)
    • 视频: 5-14 Diff算法 - vdom 为何要使用 Diff (06:38)
    • 视频: 5-15 Diff算法 - 实现-1 (07:20)
    • 视频: 5-16 Diff算法 - 实现-2 (07:23)
    • 视频: 5-17 Diff算法 - 实现-3 (07:45)
    • 视频: 5-18 Diff算法 - 实现-4 (08:45)
    • 视频: 5-19 Diff算法 - 总结 (02:48)
    • 视频: 5-20 总结 - part1 (04:55)
    • 视频: 5-21 总结 - part2 (01:35)
  • 第6章 MVVM 和 vue 28 节 | 207分钟

    本章首先介绍了 jQuery 开发方式和框架开发方式的区别,引导学生进入框架开发的思路转变。然后通过 MVC 模式引入 MVVM ,在两者比较让学生更快熟悉 MVVM 。最后结合实例,详细讲解 vue 的实现原理,包括响应式、模板解析、渲染这三大要素。...

    收起列表

    • 视频: 6-1 开始 (06:17)
    • 视频: 6-2 从jQuery到框架 - jQuery (07:55)
    • 视频: 6-3 从jQuery到框架 - Vue (08:22)
    • 视频: 6-4 从jQuery到框架 - 区别 (09:50)
    • 视频: 6-5 从jQuery到框架 - 总结 (02:33)
    • 视频: 6-6 如何理解 MVVM - MVC (05:41)
    • 视频: 6-7 如何理解 MVVM - MVVM (05:22)
    • 视频: 6-8 如何理解 MVVM - 总结 (02:23)
    • 视频: 6-9 Vue三要素 (05:16)
    • 视频: 6-10 响应式 - 介绍 (08:59)
    • 视频: 6-11 响应式 - defineProperty 演示 (10:36)
    • 视频: 6-12 响应式 - 模拟 (10:22)
    • 视频: 6-13 响应式 - 总结 (01:39)
    • 视频: 6-14 模板解析 - 开始 (03:08)
    • 视频: 6-15 模板解析 - 模板是什么 (07:09)
    • 视频: 6-16 render函数 - with的用法 (07:00)
    • 视频: 6-17 render函数 - 讲解1 (05:18)
    • 视频: 6-18 render函数 - 讲解2 (09:01)
    • 视频: 6-19 render函数 - 讲解3 (07:51)
    • 视频: 6-20 render函数 - 讲解4 (11:11)
    • 视频: 6-21 render函数 - 讲解5 (20:55)
    • 视频: 6-22 render函数 - 讲解6 (06:09)
    • 视频: 6-23 render函数 - 讲解7 (06:27)
    • 视频: 6-24 总结 (02:55)
    • 视频: 6-25 整体流程-1 (10:39)
    • 视频: 6-26 整体流程-2 (11:03)
    • 视频: 6-27 整体流程 - 总结 (03:37)
    • 视频: 6-28 总结 (08:38)
  • 第7章 组件化和 React 23 节 | 186分钟

    本章先带领学生做一个 React 的实例,熟悉 React 开发环境、以及组件化的概念。然后,通过实例来讲解 React 的实现原理,包括 JSX 的本质、虚拟 DOM 和 JSX 的结合、以及 setState 。最后,对比 vue 和 React ,分析两者的异同。

    收起列表

    • 视频: 7-1 开始 (05:55)
    • 视频: 7-2 todolist-demo-1 (10:11)
    • 视频: 7-3 todolist-demo-2 (13:41)
    • 视频: 7-4 todolist-demo-3 (06:14)
    • 视频: 7-5 todolist-demo-4 (06:13)
    • 视频: 7-6 什么是组件 - 组件封装 (03:32)
    • 视频: 7-7 什么是组件 - 组件复用 - 总结 (06:01)
    • 视频: 7-8 JSX本质 - 语法演示 (13:06)
    • 视频: 7-9 JSX本质 - 解析成JS (12:32)
    • 视频: 7-10 JSX本质 - 标准 (11:38)
    • 视频: 7-11 JSX本质 - 总结 (02:32)
    • 视频: 7-12 JSX 和 vdom - vdom 回顾 (09:38)
    • 视频: 7-13 JSX 和 vdom - 何时patch (09:51)
    • 视频: 7-14 JSX 和 vdom - 自定义组件的处理 (11:44)
    • 视频: 7-15 JSX 和 vdom - 示例演示 (09:16)
    • 视频: 7-16 JSX 和 vdom - 总结 (04:07)
    • 视频: 7-17 setState - 异步-1 (07:46)
    • 视频: 7-18 setState - 异步-2 (03:48)
    • 视频: 7-19 setState - 回顾 vue 修改属性 (03:08)
    • 视频: 7-20 setState - 过程 (07:16)
    • 视频: 7-21 setState - 总结 (03:14)
    • 视频: 7-22 总结 (07:01)
    • 视频: 7-23 React 和 Vue对比 (16:29)
  • 第8章 hybrid 14 节 | 104分钟

    本章主要介绍 hybrid 的原理和应用。hybrid 基础部分要讲解 file 协议、webview、更新上线流程;另外,通过 h5 和 hybrid 的对比,来了解两者的异同和使用场景;最后讲解前端 JS 和客户端的通讯,包括通讯原理和 JS-bridge 的代码封装。...

    收起列表

    • 视频: 8-1 开始 (06:20)
    • 视频: 8-2 hybrid是什么 - 开始 (10:56)
    • 视频: 8-3 hybrid是什么 - webview (06:52)
    • 视频: 8-4 hybrid是什么 - file协议 (11:19)
    • 视频: 8-5 hybrid是什么 - 具体实现和总结 (05:23)
    • 视频: 8-6 hybrid更新流程 (10:38)
    • 视频: 8-7 hybrid 和 h5 的比较 (05:34)
    • 视频: 8-8 JS和客户端通讯 - 开始 (10:46)
    • 视频: 8-9 JS和客户端通讯 - schema协议-1 (05:51)
    • 视频: 8-10 JS和客户端通讯 - schema协议-2 (05:53)
    • 视频: 8-11 JS和客户端通讯 - schema封装-1 (06:53)
    • 视频: 8-12 JS和客户端通讯 - schema封装-2 (09:23)
    • 视频: 8-13 JS和客户端通讯 - 总结 (03:16)
    • 视频: 8-14 总结 (04:45)
  • 第9章 课程总结 3 节 | 25分钟

    本章介绍一些面试加分项,结合我自己的经验,介绍如何看书、写博客和做开源。最后,再次总结整个教程的知识框架,回顾所有的知识点。

    收起列表

    • 视频: 9-1 不讲nodejs (04:34)
    • 视频: 9-2 如何热爱编程 (12:04)
    • 视频: 9-3 总结 (07:48)
本课程已完结


讲师

双越 Web前端工程师

骨灰级前端工程师,BAT架构师,PMP,项目技术负责人,开源编辑器 wangEditor的作者。多年讲课经验,深受同学们喜爱,深入浅出是他的金字招牌。出的面试课已成功将很多同学送入大厂。乐于分享,博客流量过百万。

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

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

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