00:00
Hello,大家好,这个条件呢,我们来先探究一下Excel的由来。就是我们所使用的这个Excel。这个哥们儿,他到底是怎么创建出来的?我们把这个问题来研究一下。好,那么首先的话,我们先点开Excel的目录结构。我们从源码开始分析,首先这个包它的入口文件在这儿。啊,就是点杠Le Excel。那这个路径指的是哪个文件呢?它其实指的是这个文件Excel GS。所以说我说呢,这个Excel GS这个小写的A啊,它才是整个包的。较为正统的一个入口文件。那好。那接下来的话呢,我们就开始对这个代码呢,先做一个大致的解读。在首先上边这一部分都是对一些相关的文件做导入。
01:03
比如说工具函数导入。函数导入。Excel构造函数文件导入。配置对象合并这个函数导入,以及默认配置对象的一个导入。所以以上这些都是对其他模块的一个导入。然后下边这里呢,是一个create instance的函数。然后呢,这里varce的create instance,诶,这是我们第一次看到了CE这个对象。再往下看。excel.excel等于xce哇,这个词好绕是吧?啊,不过的话大家注意啊,前边一个是小写,后边这个都是大写,所以这个操作是在往对象身上添加属性。这个也是如此,后边这些都是如此。啊,最后暴露一下Excel。这个代码是我自己加的啊,window.x等于X。
02:03
因为这行代码一执行全局,就会出现一个Excel啊这样一个变量,变量的一个对象。大家同学可能会想说,哎,你这个代码是自个儿加的,如果你自个儿不加,那是不是全局就没有呢?啊,不会的,为什么呢?因为打包工具在打包的时候也能够将Excel在全局,然后创建。所以说我在这里啊。相当于就是。用手动的方式在全局做一个暴露,方便大家去理解和认识。所以说Excel是怎么来的,它是通过create instance创建而来的。那下边我们就来去看一看create instance当中它是怎么去运作的。这里为了方便大家去认识整个的过程。我呢用页面去引入了自己打包的XL文件啊,这个是有中文注释的。
03:01
一起来看一看。好,通过浏览器打开。刷新页面。然后呢,因为呢,这里边儿有map,大家第一次打开可能看不到啊,然后呢,我来给他演示一下,点开它,点开它。啊,然后呢,你可以看到这儿,他说south map detected。我们这个时候只需要按一下CTRL加P。去找那个文件就可以了,就是这个Excel小写A的文件,点开它。点开它之后。这个文件内容跟刚咱们咱们在代码编辑器里边看的内容是一模一样的啊,然后我们这个时候把这个地方打一个断点。啊,我们就要看一看CE这哥们到底怎么来的。好,我们右键刷新一下。刷新。好到这儿了。到这儿之后呢,我们开始进入这个函数啊,Step into进来。进来之后,他先做的第一个事情,那就是去进行一个实例化,好我们去看看实例化里边做了什么事情,点击。
04:05
此时我们进到另外一个文件,大家注意观察。Excel大写A这个文件。在这个文件里边呢,有他。构造函数。所以说呢,我们new的时候是可以实例化的执行里边代码。this.defaults等于instance config,这个config是哪来的呢?其实这个config就是在创建实例的时候呢,那个配置对象。大家看这。啊,往里边传了一个对象,然后呢,传给了他,传给他之后又传给了他,所以说刚才在CE实例化的时候,这里有一个instance config,这其实就是啊,通过调用create。Instance函数传递进去的。那么这个default值它等于什么呢?这个defa值其实就是Excel的默认配置对象。然后在这我们可以看一眼它的值。
05:02
啊,大家可以看一下啊,有这么几个属性。啊,有这么几个属性,Timeout等于零,然后呢,Headers adapter啊,这些属性都有。好,然后咱们接着继续往下看。这里的话是this.intercepts。在干什么呢?在添加拦截器的属性。大家应该记得啊,我们在演示拦截器的时候呢,有这么一个东西。点开这个使用的时候。来7CE their interceptors。这个属性哪来的,这个属性其实就是在拗。CE的时候,往实例对象身上加了一个属性,叫intercepts。而其中有两个属性,一个叫request,一个叫response,你可以看这我们可以去使用response,也可以去使用request。至于柚子方法,这里还没有提及,先别急啊,我们后边再去细细的讨论它层级,不要一下子太探太深,探太深的话容易迷路。
06:04
你就知道此时运行到这块之后,实例对象身上就已经有了defa和intercepts这两个属性了。其实上面这个default呢,就是我们之前用的Excel的默认配置。大家看这。excel.defaults哎,用的就是这个属性,由来就是在这儿。创建的。好,这一步在完成之后,我们需要对Excel这个文件要再做一次的勘测。打开文件,我们去瞅一眼。好,然后。点开这个大写的Excel。就是他。把它放到这边来。注意观察这个文件,其实跟在这个文件是一模一样的啊,因为在这看的更加清楚一些,所以说我就用编辑器打开了。在这个构造函数文件当中。他呢,往原型对象上面加了一些方法。
07:03
这里面包括request的方法。除了request之外,大家注意还有什么呢?Get uri方法。除此之外,还有你看这里。有一个S点。这个其实它的作用是用来。啊,是用来遍历数组的。遍历完数组之后呢,你先别管别的,你先看这。有一个excel.pro type method。这其实也是在向Excel原型对象上面再加方法。加什么方法呢?加delete,加get had options加这些方法。所以说,这些代码在运行完毕之后,Excel原型对象上面就多了许多方法。还有下边这个post postage也是如此,所以说运行完这个文件之后,Excel啊,这个显示原型对象上面就多了许多方法。
08:05
既然显示圆形对应上面有许多方法,那么这个时候xcel的实例对象就可以调用这些方法。这是原型的基础知识。构造函数显示原型上面的方法实例出来,对象是可以直接去调用的。好,所以说当这一步在运行完毕之后。啊,就是context啊,它在运行完毕之后。他的对象身上其实是有许多方法的。看这。Delete get get your eye head options touch on post put。所以说,你会发现这个地方有了许多方法。这也是为什么在使用Excel的时候,我们既可以拿它当函数句时,又可以呢去调用它生产方法的原因。它这我们可以去调用post,可以去调用这个request,为什么呢?原因就在于此。
09:04
啊,就是这个文件当中。函数对象的显示原型上面加上了这些方法。所以在实例对象身上,我们是可以使用这些方法的。好了,这一步完成之后,咱们接着继续往下看。下边的话是进到这行代码,Instance等于。我们说了啊,半的这个函数作用与函数原型上面那个半的方法作用是一样的,它会返回一个新的函数。所以instance这里它其实是一个函数。而这个函数呢?它的内容与excel.proper type request内容是一模一样的,作用是一模一样的。注意啊,Instance与request。这个方法的作用是一模一样的。
10:01
那么这个方法有什么作用呢?这个方法是用来发送请求的。有request。来去触发请求,然后由他再去调用那个dispatch。大家应该还有一些印象啊。由他去调dispatch。看这。看这。由他去调它,然后dispatch再去调谁啊,调那个XHR或者是HTTP.gs所以说dispatch request如果是小老板的话,而Excel的request就是那个大老板。哎,就是那个大老板啊,是这么一回事,所以说现在instance在运行完毕之后,它的作用跟request是一样的,它也可以来发送请求。这里呢,还修改了这个方法在运行时的类似指向啊,指向到谁啊,指向到这个实例对象的身上。
11:01
OK啊,你先先别管this了,因为这个时候呢,THIS1进来的话容易搞懵,你就知道instance是函数,Content是实例对象,实例对象身上它有一些方法是可以去啊发送请求的,而instance它本身只是一个函数,它可以呢单独去发送请求。好,接下来精髓来了,注意往下看。You点。咱们说一下这个方法它有什么作用,它可以将对象的方法进行复制。啊,它可以对对象方法进行复制,这个方法的作用是可以将目标对象上面的方法复制到我们的这个对象当中去。也就是说现在做现在要做的事情是我要把excel.pro。也就是显示圆形上边的方法。
12:02
都给它放到instance身上,你注意instance此时只是一个什么呀?只是一个函数。看这。Instance此时只是一个函数,而Excel的pro身上,它可是有许多方法的,我们点开一起来看一看。看这。Access显示原型对象,上边有request get UR,有什么delete get head等等等等内容,它有很多。所以说这行代码在运行完毕之后,你可以再看看instance就不一样了啊,不再是单纯的一个函数了,它呢,身上多了许多方法。看这。这个时候,U tools就华丽转身了。啊,转身了啊,那下边的话你再看这,然后呢,Contact contact谁呀,Contact是那个实例对象,这个实例对象上有什么?实例对象身上有两个属性,一个是defaults,一个是intercepts。
13:03
也就是那个默认配置对象以及拦截器这个属性。好,现在你把这两个属性也给我加进来。给我instance。你可以看instance,此时是没有default的,看这也没有intercepts,但是运行完这行代码之后,你再来看instance就不一样了。有了,有了intercepts。好,最后再返回instance。你现在再想一想instance它长什么样子?首先它是一个函数。所以说它可以直接当函数去使用,加括号加对象就可以呢,去发送请求。啊,因为它的作用呢,跟request作用是一样的,就这。啊,所以它可以直接当函数去用。另外一点,它为什么还能够当对象去使呢?你想此时instance不再是单纯的函数了,它身上还多了什么呀,Delete get had option pass post等等一些方法,所以说这个access还能够当函数,还能当对象,都要方法去使用。
14:14
至于下边这些操作,都是锦上添花的一些东西,就是在往Excel这个这个对象当中再去添加额外的属性来完善它的结构,最终在全局做一个暴露。这样一来,在代码当中我们就可以去使用。发送请求了。好。这个小节关于Excel的一个由来,我们就先说这么多啊,重点大家需要知道这个东西它是怎么创建而来的,这一点值得我们去学习,就好比几query。为什么这哥们既可以当函数时,又可以调方法呢?其实原理是一样的,它先造一个函数出来。
15:06
然后在函数身上再去添加对应的方法以及属性,形成最终的结构。OK,这个小节我们就先到这儿。
我来说两句