00:00
下面我们来实现style。塞罗呢,之前讲过,它就是通过动态创建style标签,将我们处理好的样式塞入到标签内生效。那么下面我们就来写一个这样的一个style。来新建一个in。OK,我们写一种最简单的方式啊,他要处理是CS文件。来,我们待会来写,他会接收到这个CS文件内容,那么我们需要做的事就是这样的。来我们呢,要做的就是动态创建一个style标签。Document。Crazy elements。
01:00
创建一个style标签。好,创建好了之后呢,接下来我们需要把它传递过来的样式代码插入到页面中生效。所以就是要点一呢。H6啊,那么就等于传过来的数据,那么传过来数据呢,要转换成字符串,那么才能够呃使用啊,所以我们用JA追法把它转换成这种格式,我们才能够使用。最后呢,我们把它插入到页面中,生效document。Head。They open the child。将咱们的这个样式呢给插入进去,让其生效。好了,所以这就是style要做的事啊,动态创建style标签,然后呢将我们的样式代码塞到style标签里面,然后再塞,再把style标签塞到页面中生效,那么我们只要返回一个这样的代码给咱们的JSJS呢就会自动加载这个代码,而加载代码的时候,它就会把样式呢插入到页面中生效了。
02:13
那么现在呢,我们这3LOAD可以单独运行,不需要三,我们可以看效果。来去掉后面的啊,我们直接去loads下面找我们的style loader这里呢,并没有用loader下面我们打包一下看效果。NPS外派,好,这时候我们运行打包后的结果啊,一起看。好,这个时候的页面还是没有东西啊,没有东西,我们看一下这个标签,看有没有插入进去,OK,那么我们发现呢,Style标签这些内容是的确插入到页面中生效了。那为什么页面没有显示呢?原因是因为它的图片资源呢,他没办法处理。也就是说咱们的这个三楼的目前写法呢,就是它能处理样式。
03:03
但是如果样式中引入了其他文件,比如说字体、图标,比如说图片,比方说其他样式文件,那么它就处理不了了。所以这就是我们现在写这个style的一个问题。所以我们这里必须要clo clo呢能够帮助我们啊,解析我们这个C文件中的各种依赖,并且把这些依赖项呢也引进来。然后呢,我到再去处理的话,那么就更方便了。所以我们这里呢,啊关c no的呢,它的确能处理,但是他只能处理普通的样式,一旦遇到其他组员没法处理。所以我们还是要加上C的。帮助我们去解析对吧,其他的一些资源的引入。好,加上C能我们再打吧,我们看效果。OK,那么我们直接刷新页面,那么这时候还是没有没有东西。原因就是我们来看一下它这个插入的这个代码。
04:00
他在样式这里插入了一段JS代码。那么这个JS代码是怎么来的呢?很显然,我们现在写的这个规则顺序呢,是先执行CS load,再执行style,因为它现在都是normal。那么所以style load接收load值就是c load的返回值,C load的返回值就会传给style load,作为style load的一个第一个参数。那么也就是说C呢,他的确处理的这些资源,你看他把这些资源呢,都给你处理好了。然后呢,他通过JS的方式把它处理好的东西呢,给默认暴露了出去。你看报道的内容呢,就包含了我们用的这些样式啊,包括各种资源。但是这是一段JS代码,我们如果把GS代码直接插入到L标签中,Style标签并不能解析,JS才能解析。所以如果我们想做这个工作的话,我们现在需要怎么样呢?需要拿到这个可能,这个可能是咱们的C传递过来的,我们要执行这段JS代码,得到它的返回值,然后再把它暴的返回值动态插入进去,那么这样就行了。
05:09
但是这样做比较麻烦。这样做比较麻烦啊。来,我们先说一下现在我们遇到了什么问题。首先第一种。好,直接使用我们定的。他只能处理,只能处理啊,当一些样式的问题。不能处理。样式中引入其他的资源。不能处理这个。所以我们需要借助CS的。帮助我们去解决啊这个。解决这个样式中引入其他资源的问题。
06:02
好,呃,第一种方式呢,我们现在用法呢,是这样的,我们use里面只传了我们这个的。第二种用法呢,是这两种都用了,但是又产生了新的问题。那么问题是,C的暴露的是个JS代码。Sal的需要。需要执行这个G代码得到。返回值在。动态创建对吧,大标签。插到页面上。那么这个这个做法呢,不好做啊,不好操作,这个执行JS不好操作。
07:05
那到底该怎么办呢?这个时候呢,我们可以看一下我们已经下载过style的这个代码了。我们可以下载看一下model的源码,看看人家是怎么实现的。当我们去实现内容的时候,我们完全可以借鉴现有的一些内容去类似的去实现。Sal的这里面用了一个P方法。看三的定义这个函数,注意这个函数呢,什么也没有。函数上面定义的个P方法,然后呢,报的就是我们这个啊load API。我们前面讲过,这是normal load,这是pitch load,它在执行的时候会先执行pitch load,再去考虑会执行normal load的方法,而且一旦pitch load里面有return,那么它会直接中断no的执行,返回到上一个load的一个情况。那么用的是P使用方法去解决的。好,那么用PH方法又怎么解决这个问题呢?
08:03
诶,我们这里就来看啊,所以最终我们是style的。使用PH的方式。我们一起洗时代嘛。来一下写下啊最终的做法。我们首先呢,我们也定义这个P的,那么这个函数呢,就啥也不需要做啊,这个函数做空函数就好了。我们关键是往上面暴露一个P方法。PH方法呢,接受了三个参数,但是我们目前只用上第一个remaining。这个remaining request代表什么呢?我们可以打听看效果。它代表的是。还未啊,剩下的load剩下还需要处理的。
09:04
那么这里大家需要知道它的一个执行流程啊,我们是在三这里绑定的P方法。所以它执行过程是先执行loadad的P方法。然后呢?再去执行C的,但是如果C4的没P就不执行了,好,接着再从右往左依次执行他们的正常的normal方法。所以如果它全部都执行的话,是先执行的pitchach,再执行load的normal load,再执行sal load到到此结束。是这样的一个执行顺序。所以他一上来就会执行这个P方法,我们可以打印这个remaining request,而这个remaining request代表的就剩下还需要处理log法,那么自然就是我们的CS log的log方法和style log的log方法,因为这两个方法是还没有执行的。我们打我们NPS把他打包一下。
10:00
好,现在报错没关系啊,我们主要是看这个打印的结果,诶这个就是打印的结果。我们来看一下它是怎么回事啊。呃,这一个是一个我们接下来我们正在处理的样式资源的一个绝对路径。那么用感叹号跟load的要处理load的分开,然后接下来呢,这里就是剩下的要处理的CS load啊啊单前就是三楼不算啊,那么现在就是一个CS load的一个卷路径。就代表剩下的还有一个C需要工作的。感叹号是分隔符,代表他们要分开。所以我们应该怎么办呢?我们应该去想办法得到cso的执行的结果。如果能得到这个C的一个执行结果的话,那么我们就可以去做干活了。如果可以得到啊,那么我们就可以干这个活了。那么怎么得到CS的一个执行结果呢?
11:00
我们来看,我们要处理一下,首先我们要把这个C的路径和这个index要处理的文件路径,我们要由绝路径改成相路径。因为待会我们处理的时候,它只能识别相对路径。所以第一步。我们需要将。来,我们先写完了,大家再一起总结一下。我们需要将这个remaining request中的绝路径改成相对径。那么因为。后面啊,只能使用相对东西去去操作啊。好,那么怎么改呢?注意这里有两个路径啊,一个是CS log要处理,一个是这个,呃,Indexs要处理,所以我们根据感叹号去切割。
12:01
按照感叹号去切割。切入下来呢,它就会生成一个数组,一左一右两个数组,左边是C的绝路径,右边是这个啊,应该S的一个绝路径。然后呢,我们要把它变成一个相对东西,这里呢,我们可以用map方法对这个数组的内容做处理。好,怎么把它变成相对路径呢?我们前面说过啊,处理这个路径的时候,我们最好是使用这个load中自带的一个工具方法去处理,用pass去处理的话,可能你这个路径会出问题。啊,这里是个绝路径,我们可以叫abut pass。我们可以用this上面有一个方法加S。好,这里要注意啊,这个this呢,我们要指向这个load的this,所以我们这里必须要用箭头函数,这里要特别注意这个this指向。我们用上一个处理相对东西的方法,叫con c。Content提法,然后呢,它呢,首先你相对路径相对于哪里呢?我们传一个con。
13:05
这呢就是当前load的一个,当前运行这个log的一个一个目录。然后呢,再相对于什么呢?相对于你这个绝路径就好了。他就会把这个绝路径啊,相对于咱们这个目录去走这个路径,相对于当前这个log的目录去走这个路径,相当于是这个意思。所以它这里最终会返回一个相对路径。啊,他就是以这个路径。对吧。以这个路径为基准,看怎么能找到这个路径。以这个路径为基准,看怎么找到这个路径,好,这些就是当前load所在的这个目录,对吧,我在我当前这个目录下,我怎么找到你的路径,那么返回值就会返回一个这样的一个相对路径。好,返回下面路径之后呢,我最终还是要把它拼成一个这个样子啊,所以最终我希望它变成什么样子呢?我希望它变成这个样子。
14:05
相对路径呢,我们来看当前的一个相对路径啊。当前我在这里,我得回退一层到load。对吧,大概是,其实大概意思就是回对层啊。先回退一层,是在这个三的回退,然后再回退一层。然后呢,就到布去找这个CS这个,然后这里呢,也是要回退。这两层。回两层,然后找到src,然后再找SSC下面东西,我们希望变成一个这样的下面东西。所以通过这样处理,我们最终就会变成这样的相同路径,然后呢,要把它拼在一起啊,最终还要通过装运方法。把它们再次拼接在一起,通过感叹号再次连接在一起,那么这样呢,返回的就是一个相对路径了。
15:03
诶,我们可以看一下这个相的东西。来NPS外派。往上走,那么这个就是我们处理好的路径。处理好的一个路径啊,呃,他最终呢,是这个意思,他最终会去自己找这个C啊,咱们这个路径可能也有些小问题,这样就够了啊。找这个S就好了,然后呢,再去找这个s load的去处理当前的这个S就好了,因为这个S已经加载到这个派里面了。就长这个样子就够了。好,上面这个我就去掉了啊。那么有了这个相对路径之后呢?那么下面我们就可以去写上这套代码了。我们同样的就是要做的就是这样的,我们的流程大概是还需要走一步。
16:05
引入C楼的处理好的处理后的资源。对吧,然后呢,在动态。上街。三号标签。啊,将内容插入到页面中事项。大概是这样的,那么怎么引入C处理后的资源呢?我们可以通过引入。因为我们前面打印的时候,不知道大家有没有留意到啊,它是通过。呃,这里已经没了,可能我多次打包啊,还是通过export default是默认暴露的,所以我们引入可以通过import去引入。引入我们想要的style from什么呢?From这个路径就好了。那么这里呢,用的是in赖的用法,当我们引入一个资源的时候,比如引入CSSOK可以,但是一旦前面加了个感叹号,那就说明我们先要用这个C的处理好的这个资源之后,再把处理好的资源引入进来,所以是这个样子。
17:13
啊,咱们这个relative是一个是一个具体的,就是具体的一个路径啊,咱们不能这样写。那么这句话呢,就是引入啊,这句话其实就是引入咱们处理好的一个资源。OK,引入之后呢,咱们就可以把样式呢塞到这里面让其生效了。OK,这样就够了,但是这样做就有问题,就是。他做完之后呢,因为这是P方法,做完之后他接下来又会去呃。执行剩下的内容。执行剩下的load的做法,我们不想啊,所以我这里写的return return的话呢,会熔断。就是终止后面的logo执行。
18:06
是这个,所以后面漏的呢,就像后面的这个。CF的这个方法。Normal方法,还有这个三的normal方法就不会再执行了,因为这里烫了,所以后面的就不会再执行了,但是光这样写还是不够,这里必须要加两个感叹号。这两个感叹号的作用就是我们终止后面的这个,就是当它用这个C的去处理完了之后,它会它会自动的去走这个normal load的一些用法,因为它现在走完load又会走normal load的用法,虽然我这里return了,但是我这里return的是这个批方法,它不往后面走了,但是并不代表我们这个引入这里面不往这这里面不往后面走。所以我们这里已经通过c load的处理好,我想得到的就是C的处理后资源加了两个感叹号之后呢,他就不会再走剩下的这个c normal方法,还有这个三的normal方法,就不会再走剩下的一些处理了。
19:01
所以我们通过两个感叹号啊,终止剩下的logo执行,这样才能最终达到效果。我们来预习一下,再打包。OK,现在打包成功了,我们这个时候再去看页面资源刷新,哎,你看他就已经成功了,因为他这时候引入的是这个C的处理后的资源,那么资源地址都是正常的。诶,这里就是我们这个style的真正定义,我们用上了这个P方法去做的。原因就是一开始呢,我们需要处理一些CS中的一些其他的模块的一些依赖,那么我们需要借助clo的帮我们去解析,大家一旦用Co的呢,C的报的这个内容是一段GSM。我们如果走正常的log log流程呢?不好去处理。所以我们用的PH方法去处理。P方法怎么做到呢?诶,首先通过这个参数呢,得到我们接下来要处理的资源,还有这个要处理的load,也就是c load,然后呢,我们可以直接通过import方式把这个东西引入进来,这里的用法是咱们的line load的用法。
20:09
当然前提是这个路径要改成相对路径才能用,绝路径,它会直接报错的。那么这样引入的话,有个问题就是他用了C的处理之后,他还会走C和S流程。如果你不想走别的流程的话,我们需要加两个的啊。这个呢,在最早我们去讲这个一拉no的时候讲过啊,它在加一个人的号,这个是终止,这个终止一些no,这个no的执行,什么杠杆叹号终止这个pre normal的执行,两感叹号呢,就终止终止pre normal,还有post no的所有执行。所以两格后的管理上漏的全都终止了。对吧,确保万无一失,然后这样的话呢,它就只会经过的处理。只会经过cso的处理,然后呢,将处理后的资源引进来,在创建标签,插到标签中,再插到页面中让其生效。
21:03
好,所以这个过程中呢,你会发现啊,好像乍一看的这个c load的normal方法好像没执行,但实际上是在这一句话依赖这里执行的。那么大家可以想象一下,那我既然是这样写的话,那我能不能不写C呢?也就是说我们在配置这个logo的时候,我能不能在这里不写C行不行呢。我们可以在给大家五秒时钟时间去想象一下啊,不写三道的行不行?好,答案呢,是不行的啊,因为我们这里要用上这个remaining request,它代表是剩下的load要处理的一些,如果后面我们没写c load的,那么这里就拿不到clo。就没法做了。没法做了。所以这里面呢,它和c load是配合的啊,虽然它不会就是走了P方法之后,后面的no load的方法不执行的,但是因为这个引入的关系,用的那里漏漏还是执行了C的代码。
22:11
好了,那么这以上呢,就是我们sal的一个定义了,它呢是所呢做起来是比较麻烦的。那么大家呢,想提升更多的load的功能呢,对吧?建议大家可以把一些开发中常用的load,它怎么实现的去看看源码。然后呢,关注它核心流程,一些小的细细枝末节的,你可以先放一放,那么这样的你可以大概搞懂一个load是怎么去完成的,慢慢的你就会对logo的执行流程怎么去定义,会越来越熟悉,从而呢,将来你可以在开发中自己写上你写要的东西。好了,那么接下来大家可以尝试写一写吧这个style。
我来说两句