00:01
好,咱们开始上课,那么咱们今天的任务呢,是要学习这个modular意思叫模块化的意思。呃,先给大家介绍一下,我这里边的东西,就发给大家的那个压缩包,解压了以后还是我桌面的这一个,点开了以后来分为这么几部分,第一部分code code里边这不用说了,是咱们课堂上要去整的代码,而这个field里边这有两个库,这个库到时候用的时候我会和大家说啊,这是我提前给大家下载好的,你们可以拿这个,如果说以后开发的时候啊,需要也能直接用它。那再往下,我这有个not modus备份,哎,这个备份呢,咱们应该是用不上,以现在的网速来说,我们可以去下载它。里面呢,有我们这些模块化所有的教程,到时候呢,大家就跟着这个教程走就OK。那这呢有一个思维导图,哎,我呢把这个思维导图打开,我们来看一下。
01:04
嗯。来,首先呢,我们先把它收起来。首先先看这,哎,我们要学的模块化是GS模块化一定要记住了,模块化这在现在是针对的是GS。好,那再往下来看理解,首先第一点我们要知道什么是模块预期模块化,来,我把这个打上。东西随便。先来看这一句,将一个复杂的程序依据一定的规范去分装成几个文件。并且最终要组合在一起,这叫模块化。这叫模块,什么意思呢?我们首先模块针对的是GS文件。那我们最早开发的时候,写所有的代码都是放到一个GS文件。哎,因为刚开始代码量还不是太大,你现在的网站要求越来越高,功能越来越复杂,那么你写的代码会越来越多。
02:08
那这个时候如果说把所有的GS代码都写在一个文件。就不太行,为什么。首先它的耦合度。高了。以耦合度高了是什么意思呢?就是说它关联性太强了,那这个时候就不方便我们后期的维护。不方便后期的维护,而且你都写在一个里面,功能点也不明确,到时候找的时候你都不好找。还有就是所有的东西写在一个文件,那么这个时候有一个问题,容易污染全局环境。容易污染全球环境。而我们现在这种做法是将接一个复杂的GS文件来拆分成多个GS文件。那这样的话,我们拆不是随便拆的啊,不是说多少行多少行去拆,而是说有针对性的,有目的性的去拆。
03:09
比如说我可以根据功能点来拆。哎,比如说第一个JS文件,这个里面我专门放置的是针对龙波图那个分装的功能函数。啊,下面这个板块呢,专门是去发请求的功能函数。这些呢,我们都可以去拆开,拆开了以后,首先哎,你对应的功能函数里边数据是私有的。数据是有的,而且关键点明确的话,你方便你去找到它,去维护它,并且我可以达到复用的效果。这是我们的思路,那么模块内部的数据既然是私有了,但是呢,你总得和其他的模块通信。你不可能最后每一个都是独立的。
04:01
所以我们最终组合在一起,那么这个时候呢,我们要向外去暴露一些接口。而接口通常说的是方法,有时候大家会看到别人说这个APIAPI通常指的也是什么方法。就是接口。好。来,我们往下看,看一下模块化的进化史。最早的我们写代码是这样写,这个大家应该能懂,咔咔上来就一个GS文件,想定义什么就往前整。那这样的话很容易污染城区环境。接下来再往下进化一点,他既他想的,既然我全部定义在全局的话,容易污染全局环境。那么我就想一个办法,我去定一个对象。把一部分数据抽取出来放到对象里面,最终通过对象点属性什么可以去操作这个数据啊。现在全局的变量少了,哎在呃。
05:04
某一某一个点上,它或许说,哎,我减少了全球的变量,避免了这个命名出错的问题。但是呢,你对象。他的数据我问他我能不能去修改它呢。我们完全可以通过对象点属性去操作这个数据,也就是意味着你现在的数据。不安全。好,现在又引申出一个问题,就不安全,那么接下来再去升级,就是我们所说的这个r fe模式,它呢又叫立题执行函数。首先我们得知道一点,立即执行,函数上来就执行。然后呢,我在全局能不能看到函数里面的数据。看不到你看不到你就操作不了人家。所以呢,我们把一些需要写的逻辑放到立即执行函数里面。
06:02
是相对来说是安全的。啊安全的,然后呢,再去升级一下,有时候我们写一个功能点的时候,你需要依赖于其他的。比如说对象,我们之前也讲过一个依赖对象的概念。它需要依赖其他的模块才能完成,那么这个时候我要依赖的模块是不是肯定要注入进来?而通常注入的形式就是以行参的形式注入进来。就叫引入依赖啊,比如说解块二的源码大家也看过,我问一下大家解块二的最外层是一个什么?注意过吗?源码里面最外层。对,它的最外层就是一个立即执行函数。有没有发现它在立即执行函数,在调用的时候传了个window进去。然后里面往出暴露东西,它利用window去暴露,因为window这个对象是不是在全局的任何位置我都可以看到它。
07:06
所以我们才能用温Dollar。还有一个。写query,哎,这是因为他把这两个属性添加给谁了温了。而这一种哎模式呢,就是我们现代模块的实现的一个基石。哎,这些图呢,哎,都给大家列出来。那么我们来看一下为什么要模块化,为什么要模块化?这复杂度解耦性其实它俩是一样的吧,首先它俩肯定都是想的是什么降低复杂度,提高解耦性,提高解耦性的意思就是说降低什么混合度吧。说白了,就是减少它们之间的复杂程度,之间的关联性。啊,然后呢,就是说部署方便,部署方便就是我刚才说的你功能点明确,那么那个时候比如说我这个GS模块专门针对的是龙波图这个功能,那有一个板块我就是没有龙波图的话,那么这个GS文件我完全没有必要去引入它。
08:16
完全没有必要。哎,这是我们为什么要模模块化的一些原因啊,那我们来看一下我们提出这个模块化的时候,哎,可能带来哪些好处。找你就这一步。这其实我刚才都给大家讲了。避免命名冲突,因为模块里面的数据都是私有的。然后呢,更好的分离,按需加载。就点对点功能明确当然了。我是不是可以复用。最后带给我们的好处就是高可维护性,就方便你维护。好,这是我们想的,然而来你看页面引入script是这样的。
09:01
这个应该能理解,你本来是一个GS文件,那个时候我是不是只需要用一个描写引用就行了,也就是意味着我只发一次HTVV请求就OK。那你现在做的操作是加一个GS文件,是不是拆分成多个了?比如说我加一个三月份就十个,也就是意味着我需要去写十个标签。那十个十个的标签意味着发十次请求。无形中,你的请求多了九次。再有就是如果说哎模块你说GS文件之间互相有依赖的话,你这个顺序不能换,一旦换了的话,你必然会报错。必然会报错。最简单的,你像解宽瑞还有核心库,还有它一在核心库的基础上扩展的第三方库,那我问你,我能不能在上边引入第三方库,下来再引入几块瑞呢?
10:05
这肯定不行。啊,那就是说我们提出模糊化的概念以后,带来的问题是什么?请求多,依赖模糊,最终导致难以维护。诶,可能有的同学说了,你这模块化的好处,一个是模块化的问题,一个高考维护,一个难以维护,这不是有矛盾吗。没有矛盾,这是说我们为什么要模块化,就是要带来这些好处,但是呢,你理想是丰满的,对吧。但是你现实中有点残酷。正是因为这些问题出来了,我们才有了模块化规范,利用规范去解决这些问题。扬长避短,把它的优点体现出来,这些讲法,哎,给他整整理掉。
我来说两句