00:00
下面呢,咱们继续往下来学习,下面咱们来讲解啊,前端的叫模块化的开发,来讲解这个内容,首先解释一下什么叫模块化开发,我在图里边给各位同学来画一下。缩小这里。模块化开发,首先我说明啊,咱们目前开发中是不是有前端和后端呀,咱们先说后端。模块化开发,然后再来介绍前端模块化开发,咱们分别说一下他们是什么意思。首先我们说后端,其实后端这个过程呢,咱之前都写过,各位同学应该都有感受,大家想一下啊,咱们做后端开发的时候,我们把代码是换成了不同的包,主要咱应该是有这么几层,第一层是那个CTRL部分,然后第二层是我们的service部分,第三层是不是咱们的micro部分,这是咱做到的,就是咱们给它划分成了这个。
01:00
三层这么一个结构,然后三层中我们是怎么做的呢?大家应该知道我们的做法就是controller。调用咱们的service。然后是不是要调用我们的map呀,这是我们后端模化的特点,比如说咱们说的通俗点啊,什么叫后端模化,就是你的类与类之间,或者说对象之间的这么一个调用。写到这里啊,就是类与类之间。与类之间。或者说对象之间的这个方法的一个调用,这个叫后端模块化,而咱这么写,它的优点很明确,层次是很分明,每一层就做自己应该做的事情,然后每层就做它具体实验的某个地方,然后咱们互相调用,利于代码的维护,层次更加分明,更加清晰,这个叫后端模块化,而前端跟它类似,那什么是前端模块化?说的通俗点啊,前端指的是你的JS文件之间的这个方法的调用。
02:16
什么意思?说一下,比如说咱现在按这种结构,前端也分成很多层,然后每个层里边都写了JS文件。假如说啊,我们这个场景,比如说啊,我第一个问题咱们就叫这个。Service JS,假如就要这个名字,然后第二个文件,比如说我叫这个do.js,但是现在比如说啊,在do里边呢,我们有一个JS的方法,这个方法假如说叫A的方法,而在S里边,比如现在S里边呢,我想要去调用。Do中的A的方法想做一个调用,但这调的过程中默认JS里面的方法都是私有的,别的J调不到,咱们现在要让它调到,就需要按照模块化的方式进行操作,所以这就叫做前端的模块化。具体指的就是JS文件之间方调用一个文件调另一个文件中的方法,比如说我现在service宅子里边调Du里边的方法进行调用,默认它是私有的,不能调到,咱需要按照我们特有的方式能完成这个调用。
03:25
比如说后端里边咱们注入调用,前端也有它里边的相关的操作,所以以上就是解释了模块化的特点,而模块化的优势很明确,然后大家看这张图里边啊,这张图其实看的很明确,如果不是模块化,这种场景特别的混乱,什么都找不到,你要找一个东西特别不方便。而用模式化之后,前端包括后端也好,结构更加清晰,代码更于维护,所以说不管是前端和后端开发中,我们都是用模块化的方式进行实现。
04:00
这是关于概念上的一个说明,大家反正知道,然后下面咱就来具体演示模块化在前端中到底该怎么去用,这里边呢给各位同学演示两种方式。我写一下啊,就是第三个,一个是ES5的这个写法,另外一个是这个ES6的这个写法。我说明啊,为什么咱们演示两种写法,咱之前曾经提到过ES6它有一个缺点,浏览器兼容性比较差,而这个时候呢,大家看我课件中啊,有段话。咱们看里边的这段话。这里写的很明确啊,这里写到ES6的模块化在node中无法直接执行,你需要转成ES5才能执行,就是通俗来说note中不能用E6模块画,需要ES5才能做啊,所以这个咱后面会说怎么来转,但这句话你要正确理解啊,它指的是ES6的模块化不能运行。
05:04
六的别的功能是能用的,只是模块化需要转,别的不需要转是可以使用的,这个你知道,所以下面我就分别用ES5和ES62种写法给各位演示前端模块化的开发。这个啊是关于我们对概念一个介绍,然后下面呢,我们就具体来做一个演示,看一下最终效果怎么样,咱们先看ES5的模块化。那我们来做一下啊,咱该怎么做。首先第一步我在里边呢,建个文件夹,我就叫model DEMO就模块化的操作,然后创建之后,注意啊,这个项目首先咱要做第一个事情,把项目先进行初始化,就是init。你只有初始化之后功能才能用,如果你不初始化,很多功能都做不到,这是必须做的事情,所以首先我们做了初始化,然后初始化之后在里边呢,比如说我这么做啊,我在这位置,我就建这么一个文件夹。
06:08
啊,这件文件夹这里,啊,文件夹起个名字我就叫ES5,为了咱操作方便,然后ES5里边我建两个文件,一个就叫零一.js。另外一个我们叫零二.js把两GS文件进行创建,这是我们做到的,然后创建之后我这么来做,在零一里边定义方法,零二中进行调用,那零一中的方法我从课件中复制了,我就把这两方法直接拿过来。咱看一下很简单啊,第一个方法是相加,第二个相减这个方法,但是我加完之后,注意默认情况下方法是私有的,别的文件调不到,但是我们怎么让它调到,咱需要做个设置才可以,所以我现在在里里边做个设置。写到这里啊。设置哪些方法可以被其他的给他调用,你需要做一个设置,它一个不设置都是私有的,那怎么设置用里面一个关键字叫做model。
07:11
Model点上export。然后等于大括号里边加上可以被调的方法名字,咱们有两个方法,我复制一下,第一个叫sum。第二个是这个相减的这个方法,把这个复制这样的话就可以了,这么设置之后,别的JS就能调到你的sum,还有这个相加降减的方法。这是我们做一个设置,是ES5的写法,然后我强调啊,这两个关键字不要写错,如果你怕写错的话,那你从我课件中直接复制就这两个关键字。啊,当然可以这么写,咱就直接用简写方式实现了这个啊大家知道,然后这个完成之后,我在零二里边要去掉零一中的方法,那怎么调写一下啊,首先第一步我们先引入你的零一。
08:10
这个JS文件先给它引入进来,然后引入之后再进行方法的调用。咱们来写一下啊,咱应该怎么引入,引入方式呢?加个关键字,关键字叫蕊块require。关键字里边加上你文件的路径,大家看啊,0102是在移动目录下,其实理论上我写个零一.gs就可以了,但是这个引入我们必须加上一个,前面叫点杠,表示当前路径,不加点杠可能会有问题啊,这个注意啊,这比较特殊一点,或者说你加上这个文件那个完整就是带盘符的路径也可以啊,都可以做到。然后引入之后,咱给他起个名字,比如叫咱就叫这个M,这M就类似于Java中咱这个对象,然后这个选完之后,通过M点上方法进行调用,比如第一个相加啊,咱写两只,比如一个一一个二。
09:10
然后第二个相减,我们写两值,比如一个三一个一,现在就完成了,完成之后呢,它有一个返回值,咱们给它输出一下啊,比如加个抗,这个我们叫V。然后再加个constant,这个叫VR。最后我把这个V1和V2,咱们做一个输出就可以了,最终看一下这个效果啊,一个是V1。然后另外一个叫。We are。所以现在我们就完成了ES5模块化的写法,这个就做到了,咱再看一点啊,最终做个测试,首先零一里边定义两个方法,设置哪些方法可以被别的这些调用,你这里不设置,别的调不到,然后我两个都做设置,设置之后零二里面调用怎么调用,先引入,然后再调用,最后输出,引入的时候别忘记加个点杠,或者说加上文件这个带盘符的绝对路径都可以。
10:11
现在就完成了啊,完成之后我们最后做个测试,咱们在ES5里边用终端打开,呃,注意别打错位置啊,ES5里边,然后你用no加上文件。这各位应该知道怎么测试啊,咱测试的话是不是执行这个零二.gs因为零二是调的过程,然后我现在回车。大家看啊,两只输出了一个三一个二,就是它们相加和相减的结果,所以以上就是咱说的前端模块化的开发的并写过程,咱是通过ES5的写法把这个就完成了,你把这个过程给他要牢牢记住,特别是里面这些关键字,各位同学在自己测试的时候一定不要写错啊,比如你别多个S少S这问题,不要犯这种低级问题。
11:02
这个咱们就演示到这里。
我来说两句