4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/22-尚硅谷-云尚办公系统-前端基础知识-模块化开发.mp4原创

各位同学大家好，下面呢，我们来学习前端中基础知识的下一个内容，模块化开发，首先给大家解释一下什么是模块化开发，那我们先说后端，因为这个各位更好理解，大家注意啊，我们后端开发中，你注意咱目前是不是建了很多的，包括control。Service是map，而里边它主要什么？就是接收数据，然后调用方法，最终反数据，Service里边是不是我们的具体的业务逻辑，Map里边来操作数据库，这个叫后端文化开发，它指的是你类与类之间，方法之间的调用。我这里边。调用这个类中的方法，这个类调那个类中的方法，或者说你有些公共类在里边进行调用，这样的话可以达到模块化的这个效果，它的优点也很明确，结构清晰，层次明确，维护更加方便，而前端也可以做到类似效果，那前画怎么来做？给大家画个图简单说明一下啊，大家注意前端开发中是不是会产生很多的JS文件，那咱怎么做？咱可以把JS文件进行分类。

比如说我这么来做啊，假如现在我写个JS文件里面，咱们一些就是公共的JS的方法。然后我现在比如说我有这么一个JS文件在这个里边的，比如现在我想要去调用这里边的方法，然后实现我们的具体功能，包括在别的G文件中也可以调这个公共JS中的方法实现功能，这个过程就叫前端模化，说的通俗点，那就是GS文件之间方法的调用，我通过这个GS调这个方法，通过它调这个方法，比如这里边写的都是公共方法，那其他GS中都可以调这方法实现咱们的具体内容，这就叫前端模块化，就是GS方法之间的调用。

那这个具体怎么来实现，下面给大家做个实现，咱这里边重点写的是ES6的写法，这里边有两种写法，咱们一个一个来看一下。那这里边我来做一个具体的操作。首先啊，我们在这里边先建个文件夹，然后把项目做个初始化，我们做个创建就叫。Model戴。把项目进行初始化，怎么初始化们应过啊，这该大家一下么，进行项目的初始化。是不是npinit？杠外回车，现在完成了初始化，然后初始化之后我们怎么做呢？在里边来做我们的具体内容，那咱做个操作啊，首先我们在里边，比如咱们现在我们先建一个文件，我们再建文件夹，然后里边写个JS文件，实现他们之间的调用啊，那我来写一下啊。

比如我现在建固件夹，我叫ES6。杠零一啊，就是第一种写法，然后我再建一个叫ES6杠零二，就是第二种写法啊，咱们一会儿分别进行演示，那我现在在零一里边，比如说我建两个JS文件，一个就叫1.js，另外一个咱们叫零二.js。这是我创建啊，然后怎么做，我在零一里边定义方法，零二中来调零一中的方法，就来做一个这之间的调用，咱做个演示，那咱们做个定义啊，这个定义的方法呢，我就从课件中直接复制了，把这个内容咱们过来，然后咱们看一下啊，什么意思。大家看啊。Function get list function是不是这么写，是咱定义方法，而你发现啊，前面多了一个东西叫export，那这什么意思？

大家想一下啊，这个名字它的含义是不是有导出的意思，给大家解释一下，各位可以这么理解，在咱们Java里边，它里边的变量函数都是私有的，别的文件不可见，比如我现在一个JS是没法调另一个论的方法，因为它方法都是私有的，那怎么让它可以被调用，那那方法前面加个表示它可以被被调用，你看我现在啊这么讲，这个get，这个可以被调用，这是我们的第一部分。然后这个之后在零二里边咱们进行调用，我加个注释啊，调用01点里边的方法。那咱们怎么来调用，首先写下步骤啊，第一步先引入01点这次文件。然后引用之后第二步调用方法，这是基本步骤，那咱写一下啊，先说怎么引入，加上一个叫引。

这单词都认识啊，是导入，然后导入之后怎么做，加个大括号，加上你的方法名字，就是你要调的方法名字，方法名字多个用逗号隔开，然后from，加上文件的路径，那咱们来写一下啊。大括号加上方法第一个方法get等。拿过来。逗号第二个，然后加上from，加上你文件的路径啊，写下路径。对这个路径啊，有这么一个特点。我先这么写啊，给大家说一下什么特点，比如说啊，你看啊，零一和零二他们是不是都在同一个文件夹下，理论上其实我们这么写是不可以了，但是有的时候这么写他可能找不到，所以你加个点杠，但是有些同学呢，可能基于他的系统等原因，这么写还找不到，那你就把它那个绝对路径，就是带盘符路径给它加上就可以了。另外还有一点，这里边的点JS可以不写，因为它默认就是去导入这次文件，咱为了各位看到明确我把它写上，就注意这个路径啊，如果你实在找不到，写它这个带盘符路径就可以了，这是第一部分。

然后这个之后我们来调方法，第一个方法get list，第二个方法叫save，现在就完成了，因为两个方法我在里边是不是都做了输出，这是我们写的，就是第一步，第二步我再重复一遍啊，第一步操作。在零一里边定义两个方法啊，当然可以是三个方法或者四个方法，然后在方法前面加个is po表示方法可以被别的宅子调用，然后第二个在零二里边引入JS文件，然后调方法，注意引入时候刚才说这个径问题啊，这个注意，所以现在这个写法就完成了，完成之后我们做个测试，试一下它对不对啊。

怎么测试在ES6杠零一里边用终端打开，注意别打开错路径啊，然后咱们用nos no02.gs注意这个测试方式啊，因为咱是0201，你不能测零一这里没效果，要测02no02.gs然后咱们回车。大家注意啊，我回车之后，你明显发现出了一个问题，什么问题，是不是挨着出错了，他告诉我们什么错，这里提示啊，他说这个东西。他不认识，不知道这个什么含义啊，他没法解析，他不知道这个到底要做什么事情，那这里边解释一下啊，什么意思，大家看我课件里边啊，就这句话。我特别加了一个注意。就是因为咱们现在是ES6的写法，注意啊，ES6的模块化在node中是没法直接运行的，注意这句话别理解错啊，不是ES6不能用，是它里面的模块化不能用，咱们需要用过工具叫Bible或者叫Bible，然后把它成ES5之后才能执行，所以它里面有这个特点，ES6的模块化在note中不能用，就要用这个Bible把它转成ES5之后才能运行。

啊，所以里边有这么一个特点，所以咱下面做转换，但是这个转换呢，大家了解一下，因为后面咱们用框架这个过程已经给我们做过了，已经封装好的，但现在主为了演示这个效果，就把这个背包给它引进来。那咱们继续来看一下啊，首先我们需要安装这个背，我直接就复制了啊n PM install加一个杠杠global表示全局安装，咱把它给它装下啊，我在里边直接复制。

呃，稍等啊，没复制过来，我再复制一下啊，把这句话咱们先拿过来。先掉啊，然后在里边把它安装上。直接。退车。就是Bible在乱啊，或者叫Bible啊，得看您都是一样的啊，然后这个之后我们继续来看啊。下面呢，安装之后，我们用杠杠version看一下它安装的版本，看对不对啊，咱们看一下。这里看一下。这有啊，你这里提示，因为我之前应该是已经装过了啊，默认是没有的，你给它装一下，我之前装过，它提示我说这个已经存在了啊，之前装过了，现在这完成，完成之后我们继续来看啊，在这里边呢，注意在它的根定下，咱们建个配置文件叫BARC啊，注意文件名字是固定的，不要写错啊，在根定下就这个位置。我们建一个文件叫点BRC，在里边加上这段内容，因为咱用这个ES5转成它才能执行啊，因为默认E6它不能用，之后呢，再装一下ES2015的转码器就可以了，把这个我们再装一下，这个过程各位自己试的时候，按照我课件把这个直接复制就可以了。

啊，咱们做一个安装回车。等它装上啊，你这个联网下载稍微会慢一点啊，稍微等一会儿现在完成了啊，你看里边有这个VIVO2015。然后之后呢，最后一步，那咱开始进行转换，那怎么转呢？看我这过程啊，先建个文件夹，用背包指定目录，就是这句话什么意思，先看课件啊，把S2C里面那种转成ES5，放到DISS1里面去。那现在我来做个转换啊，先这么来做，一会儿我会再总结一遍啊。我在这里边先建个文件夹叫。

零一啊就叫他了，然后咱们进行转换，怎么转换呢，在跟路径下。用这个啊，应该SS啊用这个。ES6。杠零，一，杠D加上D4的零，一，就表示把这个路径下的所有内容转成ES5放到第四定义里面去。然后咱们退车。啊，注意啊，这里报了一个错，大家看什么问题应该很明显看到啊，这单词写错了啊。Be。单词写错了啊，会抄。各位看现在就成功了，然后你看第次零一里边有两文件0102，这两文件中转之后的就是ES5的写法啊，就是它里面这个写法可以了解一下，然后咱在这里边做个测试可以了，我这里来最终试一下啊。

咱们来测试一下。No。零二.gs你看这两句话是不是就输出了啊，就是里边的。这两句话，一个获取数据列表，一个保存数据。以上就是我们演示的文化开发的第一种写法。给各位总结遍这个写法啊，首先我们的第一步建立文件夹，也在601建两文件零一里边定义两方法零二中引入，然后调用，但是执行的发现它会出错，因为ES6的模块化在noe中不能直接运行，咱需要转成ES5，那怎么转？我们按照课件中的过程安装相关的这个插件啊，最终进行转换，做完之后有0102，咱们再执行就正确了。这是我们说的第一种写法，这个咱们就说到这里。大家把这个自己来看一遍就可以了，后面项目中因为会涉及到给咱们特别演示了一遍。

然后之后呢，在这个模块化写法中，还有第二种写法。第二种怎么做呢？就是比第一种更加简化一点，为什么简化，咱先看一下啊，大家看第一种写法里面啊，有一些缺陷，或者有一些缺点。你看啊，第一个。我这里边就是表示方法可以被别的人调用，然后在引入的时候看这位置。这什么意思啊，是不是加上方法名字啊，而这里边比如说我现在啊，我这J里边有十个方法，我这里是不是就写十次，但是调的时候我可能只掉其中的两个方法，所以它并不是特别方便，在这种情况下，它就出现了另一种写法，那我下面给大家快速写一下啊，ES6的下一个写法。咱们加一个文件001点啊，为了区分再来个文件002.js。

然后在001里边我们来做个定义，这定义跟刚才有点区别啊，我这里就直接复制了啊，因为这个代码比较简单，大家看一下啊，他该怎么去写。我们加上ist里边加上方法，表示这两个方法可以被别的这词调用，这就是第一部分，然后之后呢，在零二里边还是引入啊，咱给它起个名字，比如我叫。From加上路径点杠零，01点。这就引入，而引入过程中你发现这个位置我是不叫user，这怎么理解呢？就类似于咱们va中的一个对象啊，只是他写的是user，而刚才是写方法，而最终调用怎么做，用user里边的点上这个方法名称进行调用，加上一个。现在就可以了，这就是第二种线法，咱这么来做，比刚才你发现啊，是不是稍微简化一点啊，特别是这个位置就是简化，而最终运行，同样你需要用这个背包转成ES5再进行运行，那咱给它转一下啊。

因为环境都有了，我叫零二。然后在里边我做过。转换啊。写下命令。这个。ES6杠零二。然后杠D第四套零二回车。大家看啊，这里边是不是有这个内容，然后最终我们来测试。NO002点宅。你看结果是不是出来了，我结果中对我的一个二啊，就为了刚才区分一下。所以现在啊，这个模块跨开发我们就验证完成了，然后最后强调啊，各位重点记什么呢？就是它里面那个研六的写法，比如第一个第一种写法中怎么设置被别的调用，然后怎么引入，第二种写法中如何设置，然后它如何引入调用，把这两部内容重点记住，后面项目中会用到。

所以咱们啊，大家看到这里呢，咱就把简单中的基础知识给各位就说完了，为了满足咱们后面项目使用，所以各位把这些自己好好去看一看。