前言:最近发现越学习问题越多,或者说很多问题不久之前刚搞懂,过一段时间就忘记了.根本原因自己没有理解.所以就想系统得学习和整理一下前端相关的东西.争取能更好得吸收现有的知识体系.
什么是宿主环境?
我们常说前端HTML、CSS、javascript这三者为前端三基佬,也就是说作为一个前端,就必须会这些,它们是前端的基础.但是,这三种语言都不是通用的计算机语言.也就是说并不是在哪儿都能解析的,它们需要在特定的宿主环境里才能被正确解读.
以js为例,它最常见的宿主环境是浏览器和node.
在以浏览器为例来解析宿主环境对于前端来说的作用.
浏览器是什么?
浏览器的全称是"网页浏览器",顾名思义.它的作用是需要给"用户",浏览网页,并保证其能进行必要的交互的工具.它由七个部分组成,但最核心的就五个部分.
------用户界面
------浏览器引擎(窗口管理、TAB进程管理等,其中window对象就是浏览器引擎的globalobject)
------渲染引擎(内核,负责渲染页面)
------JS引擎(js解释器)
-----数据存储(cookie、localStorage等各种数据)
对于前端来说,后四个为最需要了解的.比如,浏览器如何跳转页面,比如浏览器的渲染过程是怎么样的,比如js为什么是单线程等.这些问题其实都可以基于这些来解答.
不同宿主环境的影响
不同的宿主环境,环境变量也不一样.举个例子,我写了个html文件,然后引入一个js文件,在js中打印window.我采取两种方式去执行js文件,第一种,通过浏览器打开html,它能正确的打印出window,虽然我没声明,但是浏览器中本身就有这个对象.第二种,我用node 去跑这个js,把它当做node脚本去跑,就会告诉你window找不到.同理,当你在浏览器端需要使用node的模块时,就需要安装node,引入相关模块.
事件与变量
js中的事件和变量笼统来说分两类:自定义和非自定义.自定义的就是我在js中定义一个变量和函数,在js执行期间使用和存在,包括很多插件和工具提供的变量和函数都算是自定义的,只不过不是你定义的.非自定义的变量和事件来自宿主环境提供的,你不需要去定义,只要你在这个环境里,你就可以一直用它.
之所以提到这个概念,是因为我们平时或者面试的时候有时会提到"js原生事件"这个概念,很多人搞不清楚,容易和其他的函数搞混.我们在平时写js代码时常有的事件或者函数主要来自于三个方面.
1.window对象:
(1).我们平时在js代码中写的很多方法其实都是window的,只不过它支持省略"window."的写法.比如alert(),又比如setTimeout()等,
(2).另外还有一类事件并非是window自身的,而且它下面的对象的,比如document.getElementById(),oncick等,其中oncilck、onchange等会常被我们叫做事件,一般用于与交互.
2.ECMAScript
(1)js对象的函数:比如数组的join()、push()等,字符串的split()、fixed()等等,基本都是围绕着js的数据类型来安排的.具体可以去 w3school网站去看看,这里特别还要提一嘴ES6以后的Promise.
3.外部插件或者模块、框架等
这里的情况比较多,具体根据不同的插件会有不同的函数和对象.
所以如果js原生事件是指除去第三种情况外的,那所有1和2的情况都可以算,如果特指js,那就是第二种情况.如果是特指"事件",那就是window对象中DOM里面的相关交互事件.
注意点:1.我们要分清函数和对象的来源
2.注意setTimeout()等事件是宿主环境的,而Promise是js的.(这对后面理解异步有帮助)
