00:00
大家好,我是学习园地的特学讲师高洛峰,上节课呢,咱们看了如何用web派打包HTM资源,以及压缩和移空格这样的一系列的操作那。嗯,咱们学完了这一些,呃,GS的打包方式和而TML的打包方式,而TML呢,又结合呃GS以及咱们学多入口和多出口这样的一些操作,那前面呢,咱们都讲过了,现在呢,咱们用一个案例,咱们总结一下,也就是做一个这个打包多个HTM开发案例,什么意思呢?因为咱们现在是讲课只用了一个HTM文件,而我们真正在开发项目的时候,大家都知道会有很多个HTM文件。对吧,比如说我们做一个商城,那肯定有首页,有列表页,有商城有呃商品的内容页,以及购物车页面,对吧,那每个页面。加载不同的GS。每个页面加载不同的GS,那如果我们都加载相同的GS也不是不行,对吧。想象一下,那么访问每个页面的时候,都要把一大堆的GS代码拿回去,对吧?一是加载速度慢,另外运行速度也比较慢,所以呢,咱们需要把不同的GS,在不同应用页面中应用的GS给它拆开,分别打包,这才是我们使用的一个目的。当然各有优缺点,如果你都放到一个GS里边,那请求数量减少对不对?可以缓存,所以各有优缺点,那我们就来打包一下多个NTL的这样的一个开发案例。
01:23
咱们就用两个页面,一个呢商城的首页,比如说一个商城的首页,一个购物车页面,这两个页面就可以了。来,那我们把原来这些文件SS下边的我们先都删掉吧。这些。呃,都不需要了。咱们都重新写。重新写一下,规划一下,然后我的这个目录流转啊,那个删掉了对吧,那你比如说咱们现在,如果我现在只做呃,两个页面。那我需要在src里边建一个首页和一个购物车页面。比如说我这块首页呢,我就叫它inex.TML,这里边随便写上一句话啊,就不能把整个页面都给写完了,因为咱要知道讲的重点啊,这是商城的首页面。
02:11
换个号。对吧,就行了,你当然了,你想用he标题啊,那你都都可以使用对不对。那我这个边就不需要了,这商城的首页,那我在这里边再新建一个,新建一个RTM文件,比如说CR,我们就叫crt.html吧,这个就叫做,呃,也是用H1标签,这是购物。嗯。购物车页面。就写这两个页面,然后这两个页面呢,会用到GSGS呢,如果都放那个目录太乱了,那我们在这块,比如说放一个GS的一个目录在这里面,在这里边呢。嗯,需要用到什么呢?首页里边需要用到一个单独的一个GS。
03:00
这里边需要有这么几个啊,你比如说啊JS文件,这好,比如说首页里边用到一个JS文件对吧,那购物车页面里边也用到一个JS证件这块写上啊。直接打印码,这是首页用到的JS文件。Index GS。点rog。打印一下啊就可以了,然后呢。嗯,在这里边使用这就行了,当然你现在展示我们有包含关系啊。然后呢,我在这里边再写一个。GS文件我们叫做什么crt.gs文件?然后。这是购物车页面用到的JS文件,也就crt.gs。咱们也是直接打印。直接打印只能在控制台里边打印一下就行了,那这两个如果单纯包含这两个呢,也很容易,但是不管购物车写购物车还是GS,比如说他们都用到了什么,用到了一些通用的库,比如说几对吧,假设我就这里边就随便写吧。
04:10
嗯,这里边通用的库,通用的库也是JS文件,JS文件比如说用到了几块。这边当然了,你可以去下载几块啊。这是。Q解库。点你一下,然后呢,还有一个的。比如说啊通公共的方法这块里面有的,自己单独写的通用的对吧。在这里边,通常我们都包含这些文件,比如说Co Mon.JS。别说。这里面有通用的。嗯,Action object,这里面是对象和方法等等吧。只是模拟啊点OG好,那你看我们这几个文件。
05:03
咱们都写完了对不对,然后呢,在JS文件里边会用到什么,JS里边会用到JS文件和解块和通用库,购物车页面会用到购物车的JS j query不通入库,那我们这个时候就需要在入口文件这块。因为它是多个入口对吧,包含两个,最起码得有两个库或者三个库,对不对,在不同页面包含这里面包含一下对吧?而Java页面里边包含的是index,这个首页包含的是in和。他会把带点JSJ宽和common这三个打包在一起,购物车页面呢,会把嗯,购物车点JSJ宽和这个打包在一起,所以呢,咱们就组织一下。在这里边入口的时候呢,咱们就需要启动多个入口了,这个咱们给去掉。我在最下边去写一下。你看就得用到这种特殊的这个用法,En en这个那特殊用法呢,肯定是一个对象,对不对,这样的一个结构跟上面一样,首先呢,我们先把那两个通用的合在一起。
06:04
叫做window吧,通用的库尽量和咱们课件写的一样,然后呢,呃,入口文件是点斜杠,如果是直接你安装的几块啊,直接几块就可以了,这几块就行了,那个库里边,那咱们是自己模拟到src下边JS下边的对不对,然后里边有个解 Qe.JS这个。然后还有一个咱们呃,放在是src下边,GS下边有个com Mon.GS这两个把它合成一个cho对吧,打包成一个豌豆。就可以了,那这块打造一个,那咱们还有一个什么入口啊,咱们是不是首页和购物车各有一个GS的一个专门写特效的一个文件呢,对不对,所以呢,这块咱们首页咱们这个index几个名字。这里边咱们用点斜杠src,因为它就是一个嘛,一个入口文件嘛,所以呢,咱这也不用数组了,G目录下应带点JS,然后购物车页面。
07:00
咱们再写一个,咱们用入口点写个src下边JS下边的grt.js这样的话咱们就会形成三个chop,打包成三个文件,然后呢,文件名是这个,来看一下输出里边咱们这块什么名字,点JS是不是就会把它形成三个,来咱们试一下看看可不可以啊。当然我其他这些地方,我现在没有这些文件,我把它。继续。先把它做掉。来。你看在我们这个目录下,Build下边,你看是不是有这个对吧,这个购物车文件,它会购物车文件会把什么呢?会把购物车页面。呃,购物车页面单独的,然后index呢,你看是index的这个文件,然后这个window呢,它会什么,这是解库和通用库对吧。Com通用库这两个文件合到一起了,合成的三个文件,那现在咱们就要打包什么RT文件这两个作为模板,RTM文件用index的使用什么使用啊,Index库和这两个的合体,引入这两个对吧,让购物车呢,引入这两个这么去分开。
08:14
那我们看一下,那这该怎么写呢?那我们就需要用到打包TML了,因为我们是有两个。所以我们这两次。用两个对象,有几个页面你就用几个就行了。它数组里边嘛,就可以用两个对象,当然了,每一个你都可以单独压缩,对吧,每一个都可以单独压缩,或者不加这个不压缩都可以,你比如说这里边我们选择呃模板。那你比如首页这块,我们就是src下边的什么。In代的点,而TML对吧,那我们把它编译成什么呢?这个呃,先SI带这个模板,但是这没有相似啊,然后呢,把它变成index.tm。把它变成这个。啊。
09:00
如果我在这块。加上。这里边SR下边的叫什么?购物车cart.tm变成carrt.TML。那如果我现在保存,你看它会这三个文件会当然了,这会会给我们打包成两个页面到这里面去,对不对,那这两个页面也都会压缩,会一空格对不对,那比如说购物车页面,那我我就不压缩了。对吧,给你看看区别都可以写对不对,那他会怎么去结合这样的文件呢,连一下。你看啊。在build里边是不是有购物车点您带点TM了,那我们看一下购物车点T没有压缩,你看window点压缩了,您带的GS压缩了,是把三个默认全给我导进来了,但是我现在购物车页面里边需要首页的特效吗?不需要对不对?那index页面呢,这应边是压缩的了,它也将三个都导进来了,你看购物车的JS是别导进来了,那我怎么在这打包的时候应该指定使用哪个单呢?使用哪个呢?那我们在这里边需要使用的是这样,我们在这里边加上怎么加上cho chos指定你这里边,比如首页里边加个数组,让他用index的。
10:11
这个talk用这个以及和什么呢,还有我们的winter。V,故其中这两个那同样。在这个里边。我们需要。使用什么呢?使用购物车。加上文字这个就可以了,我们把被子删一下。啊,然后我们外边开运一下。成功,那我们再看一下。这里边还是这样的页面结构对不对,那我们看购物车这个你看清楚,你看是不是window和这个它有先后顺序的,你在这里边指定的时候。它从后又往前加载,先加载库,再加载你购物车了,因为购物车用到这个库,所以写要写前后顺序之后大家也要注意一下啊。在这里边就可以了,那同样,当然这个是压缩过的,你看里边还是先加载温库,再加载这个对吧,那如果把它改位置,它的位置也会变化,因为是先加载库对吧,因为这里有解在带的加,有可能用过解是这个意理。
11:13
这就是我们这节课内容,那通过讲这节课内容也把前边的对吧,咱们学过的,嗯,GS和TML这个怎么压缩打包对不对,以及多入口的这些呢,咱们都串了一下,听到了这节课的例子,好,谢谢大家,这节课我们就讲到这里。
我来说两句