48.尚硅谷_JS高级_复习.avi原创

啊先我们还是来简单的把上一次课讲的东西呢给它过一下啊，上一次课讲的东西不多，我们快速的过一下啊。啊，上一课呢，我们主要是去讲了一下线程机制与事件机制，其实说的是差不多一个东西啊，但首先呢，第一个问题，他其实在说的一个两个概念，一个叫线程，一个叫进程。嗯，大家稍微的要了解一下啊，我们真正去使用就编码去写很少。懂吗？譬如说我们编码的方式去创建一个进程，是不是大家也没做过呀，因为在JS里面也不做这种事情啊，OK，但是呢，这些概念大家理解，对大家以后的学习呢，很有帮助啊，这个我就不要一个一个的去给大家去说了啊，下面一个浏览器内核模块组成，这个大家还是要去重点看一看，因为通过这些模块大家应该需要去知道一个什么东西呢？知道一个浏览器如何来去将一个网页文本。

展示在界面上面。那也就是说我们打开浏览器看到了一个界面，看到一个界面，它实际上是不是有一个过程呢？啊，假设就以这个界面为例，这是一个界面对吧？那这一个界面最先的最先它是一个什么呀？它不就是这样的一个文本吗？对不对，那这些文本怎么才能最终显示成这样一个样子啊，它其实是有一个漫长的过程的。而这个漫长的过程其实就涉及到这些拈。啊OK，这里面有几个，我大家再过一下啊，这些模块呢，有主线程运行的，也有什么分线程运行的，在主线程运行有第一个GS啊引擎，也就是说为什么我们的GS，我们写的JS是在主线程运行的。

是因为是不是它的引擎来去解析执行我们的代码吗？那如果它的引擎是在主线上运行的，是不是就能说明我们的GS代码是在主线运行的？啊，但前提啊，我们没有用那个webwork对不对。嗯。JSS引擎他负责两个事情啊，负责两个事，一个是首先他第一步先要将我的代码进行什么是编译啊，你说我怎么没看见呢，这个不需要你看见啊，这个变异发生在什么时候？变异发生在什么时候？你你我们有做什么操作去编译了吗？没有，他是在运行之前动态进行编译了，他跟我们有的人可能学过Java，你就知道啊，如果你是Java代码，那就是说会生成一个点Java的文件，这一个文件他不能解析执行，它必须先编译成什么呢？Java c好像是什么class啊。

编译成class文件啊在才能解释执行，而我们呢，GS代码它不太一样，它是将编译和解析和运行放在什么，是不是一起做的呀，都由谁来做，是不是引擎来帮我们做呀，啊就是这么回事。好，下面涉及到一些模块，HTMCS文档解析模块，也就是说用这些模块来干嘛呢？简单来说就是来去读取并分解我这个页面文件。

你他要拆解嘛，因为这些文件是不是都有一个特定的格式。你想最终我们这些是不是都会被分解出来啊，因为只有分解以后，我才能进一步的去读取它内部的数据吧。我要分解这个文本，那怎么读你内部的数据呢？啊，这是这一个。下面一个就是这个。也就是他啊DOM和CS模块，他要干嘛呢？他要将我们刚才分解的一个一个的小串啊，把我们整个大的文件，刚才已经被分解成了很多个小的块。那要根据下面要跟这些小块去干嘛，生成对象。也就是说，我们最终假设我们这里要有一个P标签，那是不是要去生成一个P标签的M的对象？也就是元素对象对不对。能不能懂啊，这个一定要能懂啊，就是一个P元素对象，也就是说我们内存里面，我们经翅说多姆，它是一个什么什么对象叫是不是DOM数对象。

是个动数吧，啊，什么叫数，而且它是个倒立数，什么叫倒立数，它先有一个根对项。我们讲叫做document可以吧，可以，而document下面有什么啊，他的第一个孩子，他的直接孩子是谁？是不是我那个标识我的HTM标签的那个animal的对象啊？是不是这个一定要懂啊，这个结构一定要非常懂，好，接着它的下面有什么，是不是有hand是吧？Hand是不是也会生成一个标签对象，还有什么玻璃，每一个标签都会生成一个对象，而且对象里面是不是有一些特定的数据。啊，OK，而这些数据从哪来？就读它读出来了呗，好，下面那也就是说有了这个模块执行后，我的对我的内存里面是不是生成了N多的光源对象。

啊，那现在显示出来了吗。有没有显示出来，没有那一个P标签，一个div，怎么样显示出来了。首先得确定它的位置和它的尺寸。能不能懂得确定它显示的位置，以及它的尺寸，我们这个东西叫什么，是不是叫布局啊，能理解吧，还有一个下面有了布局还没有出来，你最终要做一个操作，就什么渲染，有时候也叫什么绘制。这个会议就是譬如说我的这个吊边有没有被颜色呀，是不是有可能有。能理解吧，啊OK。

这是这两个叫布局渲染拈，他们负责我们页面的布局以及效果的绘制，这个绘制是根据什么来绘制的？就是根据我们内存中各个动物元素对象来一个一个对应绘制的。这是大家懂的，非常关键啊，你想嘛，你就专门研究这个东西的，你连他的一个基本行为，基本流程都搞不清楚的话，其实是很很恐怖的。好，下面有一些啊，这一次我们要研究的一些东西，就是它有一些分线的执行的拈，我们都把它称为什么模，是不是一些管理拈，对吧？啊，我们学了两个，一个叫定时器的管理模块，还有一个是什么，是不是什么世界多姆世界。能不能理解啊，OK，他们也就是说我们真正的定时器要想能够去定时执行，我们的动物世界要想能够触发，没有他们行吗？不行，我们这些事件，我们这些对应的一些东西，是不是都有一个概念叫回调函数啊，回调函数它是不是异步执行了，是的。

啊，这个地方一定要知道，我们这里说的异步执行是什么概念，其实很简单，它就不是我们的初始化代码，我们说过了，我们执行的顺序是先执行初始化代码，再执行什么回调函数，而且那个债是有可能才有可能，对不对，也就是说要到了一定的时机或者事件触发的时候，是不是才执行呢？啊这种我们称为一个异步的。好，这个先搞清楚了，搞清楚以后呢，下面我们要说GS的线程JS是一个什么单线程执行的，这里面强调的就是回调函数，也是在哪个线程执行主线程。

这个说的是我们H5出来之前啊，确定之前在H5里面呢，它提供了一个多线程的实现方案啊，名称呢，取了一个统一的概念叫works。啊，这个要知道这个概念，因为别人一说你不知道。那也不行啊，虽然说现在在工作中用的少，但是因为它是个新出来的东西嘛，所以说有时候面试的时候，由于问题。好，这是这一个那里面的，其实具体语法其实并不是说特别特别重要，下面有一个东西。这里面有一个最终的概念，只能是主线程来更新界面，那也就是说，即使有了web bos，有了分线程，分线程能更新界面吗？不能。如果你能知道为什么可能更好一点啊，是你能跟人说清楚，为什么它就设计成只有主线程的更新界面，而不设计成分线程也可以更新界面呢？

对吧，你就想如果分线程可以更新界面，那是不是说明了可以有多个线程去更新界面。那这个时候就容易出现问题，你把那个例子举出来，我跟大家举个例子嘛，就两个线程去操作那个P标，P标签是不是一个线程去更新，一个线程去删除。那就有可能出现操作错误的情况。啊，这是这一个下面呢，有一个定时器的问题，首先我们知道定时器能真正完全保证定时吗？不能，那什么时候就会被延迟呢。对吧。你现在总结一下啊，什么时候就会延迟啊。对吧，当我的那个当我首先我第一步我假设启动了定时器，我先定下代码，启动了一个定时器可以吧，什么叫启动定时器，写写什么代码启动定时器，你把我这句话转换为代码怎么转。

是不是set time out呀？如果启动定时器之后，如果后面的程序的主线程上面执行的初始化代码执行的时间超过了。超过了我的定时器指定的延迟时间，譬如说我直接延时时间是100毫秒，但是我后面的程序需要200毫秒。那你说最终我的生日太是多长时间才执行？是300 200 300。我set timeout是100对吧，但是呢，我后面要执行200毫秒，请问最终它执行的时间是100，是200还是300。

这不白学了吗？到底多少？300来怎么来的，200加100这很正常嘛，是吧，就200加100就300嘛，小学生都算得出来是不是。这是200，本来他应该是在100以后执行的，对不对，由于我执行了100，执行完了吗。果100后面的100毫秒执行完了，是不是就刚好可以，如果我后面要执行的时间是100，有影响吗？我后面的代码要执行100毫秒，有没有印象？没有那不刚好吗？对不对，那就刚好。

你不要被那个我们我们那时候说过alert alert也不一样啊，我没有去讲那个alert对不对，Alert它因为它如果有lert的话，那就不一样了，对吧，因为热的做了一个什么事啊，暂停计时。我刚刚才没说这个概念吧，没有去说这个概念能不能理解啊，OK，那如果刚好是100，那刚好不止不完，对不对，那如果我这个。我这一个100，我100个不要，我这50，那是不是50秒，50毫秒就执行了是吗？如果我就要，我就只有执执行50就到了，他是不是变成50啊不是至少是100。能不能理解，至少是100，如果你后面的消耗的时间超过了我的100。那就按在你的时间之后了，这很正常嘛。

这个大家应该要知道啊，好，下面就要去说到我们的事件处理机制，其实就是那个图啊，首先我们得把代码分成两部分对不对？哪两部分？一个叫初始化执行的代码，一个叫什么回调代码，那回调代码是不是就是回调函数中的代码，那回调函数是不是在初始化代码中指定的？能不能懂在初始化代码里面指定代表那个回调函数执行的吗？没有，也就是说我在太码out，我假设延迟的时间是零，是代表我的函数回调函数题立即执行吗？不是必须保证什么初始化代码先执行完，才有可能去执行毁掉代码。这是一个固定的逻辑。

永远不会变啊。只是说初始化代码里面有一些特别的代码，可以说绑定动时间，监听，设置定时器，包括我们后面要说的一个东西，发送和请求啊，这个里面都会去指定一个概念叫毁掉函数。那这些里面毁掉函数的代码就是毁掉代码啊，他们是亦不执行的。啊，刚才已经说过了，流程下面我在那个模型里面最重要的两个部分，还记了一个图吧，我们再给大家画一遍，整体就是整体结构啊，就是左侧有一个，就下面有一个，你就记住大先把整体结构搞清楚，这个部分实际上指的是我的两个结构，一个堆一个什么在。还记得吧，而这个右边是什么？是不是管理模块，而我们现在是不是学了两个管理模块，一个多姆事件的管理模块，一个什么，是不是定时器的管理模块啊，OK，下面是什么回调队列是不是一个容器啊，它队列有个特点叫什么？

对应列的特点是什么？先进先出，也就是说我从这边进来，是不是每次都放到后面了，那哪边出去是不是左边出去啊？那不就是先进先出吗？也就是说我事件一发生，定时器到时了，它的管理模块是不是就会将回调函数塞到这个队列里面来塞，是不是有先后顺序的，先塞的应该什么先执行，这很正常的嘛，这就应该嘛，是不是？这个里面所有的回调函数是不是都是待处理的回调函数，你待处理也有个先后优先级嘛，优先顺序嘛，对不对，谁先进来谁优先，就这么个事嘛，对不对，能不能懂好，但是我们说过了，我们首先得要执行什么是初始化代码，执行完了以后才能去循环便利，我们这个回调队列里面所有待处理的回调函数执行吗？而且是一个接一个的执行，对不对，对的吧。

啊，这个里面啊，这个结构我们是不是以前学过是吧，而新的两个结构，一个是管理模块，个是我们回调队列啊。它的基本流程其实非常简单，执行初第一步执行初始化代码，在这个过程中，有可能需要将事件回调函数交给对应的模块进行什么管理。

好，下面一个，当事件发生时，我们的模块就会将回调函数以及数据放哪去回到队列里面，当初始化代码执行完后，记住了，只有这一个，执行完后可能是不还需要一定的时间，对吧？财会干嘛去？有个概念叫什么电力，那个英文单词怎么说的还记得不？对，Loop。记单词大家最好能认识。啊，变异读取回调证件中的回调函数去执行，其实想明白了，很简单的，说实话并不难，你说有多复杂也不至于。我还是说这语言，尤其是像这种，嗯，上层的语言啊，封装性比较好的，譬如Java JS啊，甚至是甚至说更更简单，就是XTCSS啊，对吧？啊，这些东西大家都是用点心思肯定都能学会的，再花点时间大家就能成为大神。

大家不要笑啊，大神你们不远是吧二。好好来，最后有一个就是H5的外呼，这个呢，其实基本上在面试中才有可能被问到啊，工作中用的少，当然扩展一下自己的眼界还是可以的，就知道可以去用它来去实现什么多线程，其实它的API特别简单啊，无比的简单。首先有一个构造函数叫什么worker，它的实例呢，可以调用两个方法，一个叫什么on message，用来接收。数据的毁掉函数是吧？还有一个是什么post message干嘛呢？发送数据，也就是说既然是多线程嘛，那就涉及到一个线程向另外一个线程什么发送数据，发送数据它是不是要记啊，记完了以后，它处理完了是不是要返回，返回你这边是不是要要记啊，那也就说你既要发消息，还有什么接收消息，我要发消息用什么方法post message，我要接收消息了，On message，还有一个我怎么样取到里面的数据呢？Even呢？点什么date，其实说来说去。

测起来四个API对吧，四个东西构造函数吗。这是一个对不对，一个啊post麦一个，还有一个就是even的点什么，这还是很简单的。至少说我们学到这个程度是比较简单的。好，下面说work类的代码，也就是分线的执行代码，能操得动吗？为什么？为什么？其实非常简单的一句话，他看不到所window，你想想看，连window都看不见，它怎么可能更新界面呢？界面是不是丢在窗口里面，连窗口都看不见，你想看，你还能操作窗口里面东西吗？

不可能就一句话就能搞定的事。好，下一个呢，就不是所有浏览器都支持这个新特性，对吧，还有这个呢，大家以后可能接触过跨域可能会更清楚了，现在可能还不是特别特别清楚，到时候我们会讲的啊，主要是这两点大家需要知道。行，那这个呢，嗯，我们就先讲到这里啊。