就是在B站和抖音上，经常看到袁老师的短视频，感觉讲的很好；然后就加了他们一个教学助理的微信，然后就领了免费的大师课看了。

课程内容确实挺好的，大概有9个小时多。我昨天(2024.02.04)看了一天，走马观花的看完了。

下面记录一下每节课印象最深的东西。

事件循环

事件循环，还有浏览器渲染，这两节课，主要是说明js，html，css代码，是如何在浏览器中运行起来的。

浏览器是多进程，多线程的程序。

进程是内存空间，线程是执行代码的人。

js代码执行在浏览器的渲染主线程上，所以是单线程运行的。渲染主线程通过【消息队列】（或叫【事件队列】）调度任务。

很多异步任务就受到消息队列调度的影响，比如：setTimeout,setInternal,XHRFetch,addEventListener。

浏览器渲染

主要是说明，浏览器解析html到最终画出页面的步骤。

音乐播放器和购物车实例

这两节课，主要是通过两个例子，说明写前端程序的一般流程，怎样一步一步的把程序写出来。总体的套路和我的基于页面的编程模型类似。

1.布局，样式。屏幕一边放代码，另一边看浏览器效果，边写边调。

2.js，关注数据，数据方法，最后绑定事件。一个技巧是：UI用的数据都放在UIData中，原始数据也作为一个字段放里面。

3.心态上慢慢分析，编写，打印调试，才快。

属性描述符

这个，算是vue框架的前置知识吧。

Object.definedProperty，js可以利用这个方法，帮助实现构造函数，get/set访问器，让代码更稳固；这个方法在框架中经常会用到。

VUE简介

主要是介绍vue最核心的特点：数据响应式。

0.var vm = new Vue({el:'.container'});//表示让vue来控制这部分html,我们只关心数据即可。

1.界面数据插值，形如{{count}}

2.动态属性，例如 :class="{active:count>0}"

3.计算属性，例如computed;{

　　count:function(){

　　}

}

4.指令，例如v-for。

5.其他的，感觉侦听器也很重要；再其他的，就从简介和实例中学习吧：https://cn.vuejs.org/guide/introduction.html

总结

最主要的就是3方面内容：

1.js,html,css代码是如何在浏览器中运行起来的。主要靠浏览器渲染主线程通过【消息队列】对任务进行的调度。

2.怎样一步一步的写前端程序。可以按照：布局，样式，初始化数据，数据方法，绑定事件，这样一个过程来做。

3.vue框架的特点是：数据响应式。

翻译

搜索

复制