day04【项目前端相关基础知识二】/11-尚硅谷-谷粒学院-前端技术-模块化操作（es6写法）

咱们先来演示ES6模块化这个代码该怎么去写啊，给大家下午先演示这个内容，那我在里边写一下啊。咱们用这个叫ES6的这么一个模块化它的这么一个代码的写法啊，这是我们要演示的第一个，那这个写法中啊，有一个特点给大家要特别说明啊，咱们往下看，就是我们的这个课件中，第八个课件中往下边呢，我在课件中啊，特别标注了一句话，这句话我先解释一下啊，就这句话我写这个注意。我把这句话啊给大家复制过来，然后说一下这句话什么意思啊，就这里写到说注意说这时程序是无法运行的，为什么不能运行，就是因为ES6的模块化无法在node JS中执行，你需要用这个东西叫bubble编辑成ES5才可以执行啊，这是它里边一个特点，给大家特别说明啊，我就点写一下啊，里边有这么一个需要各位注意的一个地方。

就是什么地方的啊，角的位置啊，就是如果说我们使用的是ES6的。这么一种写法来实现模块化的这么一个操作，那这种代码它在我们的nod DS环境中是不能直接去运行的，比如note中你不能直接用ES6的模块化，注意这个描述啊，不是notes中不能运行ES6，它是不能运行里边的模块化操作，ES6的其他操作是可以运行的，它只是不能运行模块化操作。那咱需要怎么做呢？我们就需要使用一个工具，是咱上午说这个叫bubble，把我们的ES6的这个代码给它，就是转换成ES5的代码，这样的话它才可以在我们的node JS中进行运行。

这是里边需要各位注意一个地方啊，这我们特别说一下啊，而这个我要强调一点啊，比如说以后啊，各位在面试的时候，就是面试官啊，有的时候很多面试官他习惯问这么一个问题，这问题呢没有固定答案，是一个比较开放问题，什么问题呢，给大家大概说一下哈，因为之前很多同学都被这么问过。他问的问题是什么呢？他可能问你说你啊，比如说你跟面试官说，说我之前做过很多项目，做过很多年开发，那面试官问你说你之前在做开发过程中，你曾遇到过什么问题，什么问题印象里最深刻，你给我说一下什么问题帮你怎么解决的，那咱们面试官问这个问题，那你说我们该说什么问题呢？给大家强调啊，第一个咱说这问题呢，不能说那种太通俗的问题，什么叫太通俗问题，别人告诉面试官。我经常遇到问题是404问题，然后怎么解决呢？是我路径写错了，或者我经常遇到我单词写错了，或者经常遇到500问题，这种问题就没必要说了，那咱说什么问题，就是你可以说这种问题。

这就算一个问题，咱后面也会给大家演示出很多其他问题啊，那我们说这个问题啊，这个问题是什么呢？你跟面试官说说，我在做那个前端开发中曾经遇到一个问题，什么问题呢？我用ES6写模块化代码，但是发现这个代码在node摘中不能运行，后来我通过啊找资料解决出来了，把这E6变成ES5就可以运行，这个算一个问题，所以大家把这记住啊，这算是我们面试中你可以说这问题啊，因为这肯定比你说404说500要强很多很多，咱后面在项目的过程中给大家还要演出一些其他问题。啊，这个啊，特别说一下啊，一个注意的地方。这个做了一个强调啊，然后这个说完之后，咱下面来写这个代码啊，咱先写ES6，然后用bubble转成ES5BUBBLE，咱上午都说过了，一会儿咱就直接用就可以了啊，那这里边怎么写在ES6中呢？做模块化有两种写法啊，就是有两种写法，咱们先写第一种研六的写法，然后一会儿再写第二种写法，那咱来做一下啊。

因为这个过程中呢，它要用到这个bble做转换，所以我这里边啊，为了方便我把代码就写咱上午这个Bible里边去，因为这里边有咱那个已经下载好的环境，你想别里边也可以，就是你还需要再去下载里面那些什么插件，我就不下载了，在里边直接这个位置写，就直接用一下里边那个依赖啊，因为里边都配置好了。啊，我在这里边写我们的模块化，咱上午那个八部的代码中，那我来写一下啊，首先里边的怎么做呢？我先建个文件夹，比如我叫这个啊，就叫model。

ES6这个一啊，咱一块儿写的第一种方式，在这里边写代码，然后这个写完之后，我们还是按照上午方式建两个JS文件，一个零一，一个零二，在零二中去调，零一中的方法，咱还是这么做啊，我在这里面来写啊。那我现在两个文件，一个零一.js再创建一个叫零二.j。啊，咱们见两文件，然后在零一里边，我们还是按照咱上午说的一样，先定义方法，然后设置你方法，就是设置哪些方法。可以被其他的JS调用啊，咱们还是写这些，只是说E6他希望要简单点，然后零二里边我们要做的就是去调用。零一.js中的那个方法，但也是引入零一.js文件啊，然后进行调用啊，跟它过程是一样，只是写法有区别，那咱下面把这个咱就来写一下。

啊，这给大家截个图，我在里边啊，是这么做到的，就是写到了这个位置。然后里边啊，这图我先拿过来啊，然后咱们要写的效果就是。啊，我在这个零一.gs里边，我们定义方法，然后零二.js里边去调用零一.js中的那个方法啊，咱就来做这个过程，那怎么做，下面咱来写一下这个代码，首先零一里边呢，先定义方法，定义方法呢，我就简单啊，写这么一个最简单两个方法了，那这写法刚才就不一样了，咱先看一下啊，这个写法首先你看啊，咱上午用ES5的时候，我们是先定义方法。然后下面是加个model是不是is子port，这表示这么设置就可以调用，但是现在不需要这么写了，咱们可以简化，你看怎么写啊，直接在方法前面加个it port，当你加上之后，这方法就可以被别的调用，但直接这么写is post function方法名字啊，那我现在我就这么来实现，注意加的是port啊，这么一个词，这么一个关键字啊。

我写一下。比如说第一个方法我叫做function啊，假如我们叫get list。然后在里边为了明显，我做个输出conso.logo这里边我们输出，比如就叫get头list，这是第一个方法，它就表示咱们定义方法叫get list加上is port，它可以被别的宅子调用啊，第一个为了明显，我再写个方法啊，用这个咱们复这个啊改一下。比如第二个方法，我就叫这个C，然后里边我输出叫C，这个方法也可以被别的宅子调用啊，这是它的第一部分，在邻点GS中咱这么来做。

这个就完成了啊，ES6中就这么来写，比刚才要简单很多了，比ES5啊，你还要写更多的东西啊。我在这边写一下啊，零一.g。咱的做法就是。这么来写啊。这是一个记住待会啊，然后写完之后，下面咱再写这个就是零二.js。在里边我们就是做一个调用，那怎么调用我写一下啊，这里边咱先写第一种方式，那它的做法就是第一步，因为你要调零一，那把零一建议他引进来，怎么引入呢？上午咱用的叫快，现在不用块用这个关键字。大家看这个。这叫什么iport嘛，就是导入，然后I input的后面咱加个大括号，在大括号里边就加上你要调的那个方法名字，比如说我这里边调的方法一个叫get list，那我们加过来，还有一个方法名字叫save，然后把save拿过来，然后后面加一个叫from，在from后面加上你引入文件路径跟上一样就是点杠。

零一.js啊，当然点GS可以省略啊，但是咱给它先写出来啊，省略也对，这就表示引入的这么一个零一.js文件，咱这么做。我再说一遍啊，Inport from大括号里面，注意是大括号加的是你要调的方法名字，就是这两个方名字，然后from后面加上你引入文件路径，因为他们是同一个文件夹下，所以我加个点杠表示当前路径，点杠不能省略啊，这样的话我们就可以了啊，然后这可以之后最后咱就来调用这个方法。啊，调用方法怎么调用？很简单啊，这两就是方法名字，那么就直接调用第一个get list。然后第二个叫C这样的话就可以了，这就是零二中调用的代码啊，咱们ES6就这么来写。

啊，这个咱们就写完了啊。我把这个给大家演示接过来，所以大家会发现啊，这写法确实比ES5要简化很多啊，但这样的话直接就能做到这个结果。这个啊，我们就完成了啊，包括课件中跟我写的基本上一样啊，就是这么一个方法啊。啊，这里边单引号双引号都一样啊，然后我提到过啊。然后这个写完之后，咱下面把这个我们来做个测试，咱看一下目前什么效果啊，刚才我特别说果啊，你这个ES6公二化，如果你运行其实是不能运行的，它会报错，咱需要转换才可以，那我们先试一下啊，看他报什么错，咱来运行一下啊，运行的话，因为零二调零一，所以咱运行的是不是肯定是零二，它要调零一嘛，那我现在还是在这里边，我右键用。终端打开，在终端里边用node JS执行，我们就写一个叫node02.js啊，就这里边零二，然后现在我们回车。

大家看结果你注意啊，我一回车我们清楚的看到是报错了，这就不对了啊，然后他报的错是什么，你看里边啊，它里边有个标注，他就说啊，里边的这一部分东西，你看加了一个这个符号嘛，这个东西他不认识，他找不到，比如你写的代码，它里边不识别，他不知道这个东西到底是干什么的啊，他不认这个代码，所以现在E6号的话，在里边咱就不能直接执行了，里边就有这么一个问题啊，但是代码这写法肯定没有错。所以咱下面要给它执行，按照我刚才说到的，咱就必须做个转换才可以啊。那我往下来做啊。我写这个位置。就是下面啊，咱们需要把这个ES6。模块化的代码，给它转换成ES5的代码才可以运行。

啊，就这样的话它才可以运行，那咱们用B给它转一下，咱上午都说过了啊，我就直接转就可以了啊，那咱们试一下啊。那怎么做呢？比如我现在啊，我就直接通过文件夹转，我在里边呢，我就再来建这么一个文件夹啊，跟他就区分一下啊，我叫这个。Model。Model，然后叫ES6，比如叫。幺幺啊，给大家特别标注一下啊，然后我现在就把这里边的两段代码，因为是ES6，咱用B转成ES5，最后给它放到这个ES611里面去啊，咱就这么来做，那我现在做个转换。好，我把这个啊重新打开。咱重新转一下啊，那怎么转，或者各位是否记得啊，如果不记得咱看一下啊，其实用的就是一个BU的一个命令加一个杠D就可以了啊，咱快速看一下，上午都做过了啊。

首先啊，你要直接转文件，用杠O转文件夹是不是杠D，那我现在因为两文件我用这个更方便，咱加个杠D应该就可以做到啊，那我们来试一下啊，我们来一个叫bubble。加上文件夹叫这个model model e es61加一个叫杠O，然后转换到我们那个幺幺里边去，MODELS611，现在我们回车，它这里边就可以转换啊，那我们看一下啊。说明这个文件夹写的不对啊。我们看一下应该是路径哪里行，对啊。看这里边啊，这个叫model MOU，然后ES611，这是把它一里边转换啊，我们来检查一下啊。Bubble，首先有这个文件夹叫ES61啊，如果不合适，咱把文件夹都改一下啊，这个名字起的有点长。

就是现在做的是这里边的内容要转，这里边刚才他报了一个错啊，他说这个什么打开文件夹可能有问题啊，那应该是名字写错了啊，比如说我给他换个名字啊，咱删掉。省的这个路径老写错啊。这个啊，我先重新打开，叫bubble DEMO。然后在里边啊，我们转换把这个内容，比如说给它，呃，换这么一个文件夹入这个名字啊，我就叫这个ES6。幺幺啊，就是它了啊，然后现在我们来做个转换，把这里面内容转到这里面去啊，咱用我们上午那个命令啊叫bubble。Bal，然后这个文件夹叫model。六一。应该是这个啊，然后咱来一个叫杠O，因为咱通过文件夹转换用的就是杠啊杠D啊，不是杠O啊杠D，然后后面加一个叫ES611，咱一会车。

我们看就可以了，刚才应该是参数写错了，杠D。说成杠D还写成了杠O啊，现在你看啊，在里边这就有了，这是零一，这是零二，然后咱们现在这个过程把它就转成了ES5，大家看里边ES5的标志是不是这一块啊，这就可以了啊，咱做转换，然后转完之后咱们最后把它执行下。啊，执行，咱用这个就叫做。Nod，然后是零二.gs1回车，你看两句话就输出了，因为咱要输出的就是get list和C啊，这就可以了啊，当然需要做个转换才可以啊。主要是这一点啊，跟之前稍微有点区别啊，咱给他刚才是做了一个转换。我把这个啊寄过来啊，第一次我是那个写错了，应该用杠D啊，写成了杠O，杠O是转换文件，杠D它是文件夹。

所以咱们啊，这是关于ES6模块化的第一种写法，咱把它就完成了啊杠D啊，我是写错了啊，给它改过来了啊。然后这个完成之后呢，咱现在啊，我就把这个Y画完成了，所以大家会看到啊，我们就是这种写法比S5其实要简化很多，它不需要啊，再做更多事情里边可以更方便的做到啊这么一个过程，而这个写法做完之后呢，咱ES6其实在这个基础之上可以再进一步简化，那我给大家也做说明，怎么进一步简化呢？其实就是这位置可以简化一下。啊，那我来写一下啊。比如说呃，这个图我先保存一下啊。咱刚才说的第七个啊。就是ES6 es6的模块化写法的第一种啊，写法一。

完成啊，然后完成之后，下面咱们再来做一个，就是关于ES6的另外一种写法，就是它还有一种更简洁的写法啊，写法二，其实跟刚才这个是差不多的，那我就来啊，快速给大家演示一下啊，比如说我这么来做啊，在里边呢，我就再来建个文件夹，我们就叫这个model。ES6这个二啊。因为咱们区分一下，然后在里边呢，咱也是两文件，我把这两个我就直接复制过来了，你跟它差不多，用它咱就快速改下了。不知道这个位置啊，拿过来。一个零一，一个零二，首先都关掉啊。就一个是零一，一个是零二，然后这里边就是零一里边不需要变化，还是这零一里边可以变化啊，咱都给它变一下，这里边可以把它做个简化，现在不需要这么做了，因为你看这个写法中，每个方法前面是不是就加个is，咱现在可以统一来写，怎么写呢？咱可以这么做啊，我们加一个叫export。

然后加一个叫default。然后这里边我们就写它的方法，比如我们有一个get list啊，比如咱们给他做个输出，就是conso.logo然后在里边输出，我就叫这个get list。这是一个，比如说咱可以再来个方法，假如我叫这个，呃，换一个名字啊，我叫update。然后update中我们也是做个输出，cons.log这个名字我们就叫update。这个写一下啊，Update。所以这个是我们的另外一种写法，而这写法跟刚才相比，它的句别就是刚才是啊，每个方法前面都加个exportult default，咱们看一下，最开始我们都这么做，Portult function咱加这个，但是现在可以简化，但直接用一个叫isportt defportult，里边加上你用方法就可以了啊，这要是换一种写法，但是写的时候注意啊，这个方法前面不要加方了，直接就写方法名字就可以了。

就是里边的啊，咱看到我的课件中跟这个是应该是一样的啊，就是我课件中对应的。里边的这个写法isportat加上方案名字啊，这就可以了，然后这个写完之后，咱们还是在零二里边要去调用方法，那怎么做，这写法跟它有点区别，你看啊，刚才写法中咱案是不是写个大括号啊，里边加上你的方法名称，就这么写没有错，但是这么写的缺点是什么呢？比如我现在两个方法这么写无所谓，假如我有。20个方法，或者说30个方法，那咱是不是要写更多方法，所以这么写并不方便，那怎么做呢？咱可以在这位置啊，给我这个引用起个名字，假如我叫MM，可以列解为，就相当于咱Java中这个对象，表示你引入这部分就是一个对象，对象叫M，然后引入之后咱通过M点上里边的方法，比如点上。

Get例子，然后点上这个update，这样的话可以调用，这是第二个咱们调用把这里边换成一个值，比如说叫M，通过M点方法名的调用，M就类似于我们Java中的一个对象啊，就是这么一个调用方式，所以咱们这么来做。啊，大家把这知道啊，就这个写法。这是关于他的第二种写法，就是两种写法，咱们在后面的项目中应该都会用到，所以大家都要给他知道。我写一下啊。零一.g然后在里边我们就是。这在那边啊，直接我们用porttportt做到，然后我们在零二.js里边，咱是做这么一个调用，而它调用的时候，直接我们给这个调用过程就引入过程起个名字，然后最终做个调用。

啊，里边就是。这个结构。所以这是啊，关于他的第二种写法啊，大家把这写法得记住。测咱完成了啊，然后写完之后，同样咱测试，但是它也是不能直接测试，因为它是ES6，咱也是给他最终做个转换啊，那按照这种结构，咱再建个文件夹，比如说叫这个ES6。这个。二二啊，就跟它大概的一种规则啊，然后借完之后，咱们把它用B转一下啊。就是我们写一个叫。B，然后转文件夹叫这个model Du es62，咱加一个叫杠D-D啊还是小O，杠D加一个叫ES622。这里边我们以回车做个转换。

现在应该可以了啊，然后在里边这个方法，咱最后就调一下就可以了啊，那咱最后试一下啊，用终端打开。我们就写上这么一个叫no02.gs。大家看两个值，两个方法就执行了，然后它这个数据输出了一个叫get list，一个叫update。这个我们就做到了啊，这是关于ES6模块化的两种写法啊，就是咱们对应的。这四个文件夹啊，就这里边我们写出来了，但是这里边的特点咱一直提到了，因为ES6无法在noe中直接执行，咱需要给它转成ES5才可以做到啊，咱用bble应该都做了转换。啊，这个啊，我们就写完了。这是它的写法二。所以说到这里啊，咱就把这个模块化的过程就完成了，最后快速总结变啊，模块化指的就是GS之间的一个调用，就你通过一个GS调另一个宅子中的方法，然后它怎么做，第一个在比如说零二调零一，第一个在零一里边，咱先设置哪些方法可以被别人调，我们加个port deportt，然后另二里边要先引用才可以调用，那怎么引用，用import from引用啊，这是起的一个名字，这是引入那个地址。

在引入地址中，我强调到这个点，JS可以省略，省略也是一样的啊，但是我们建议也写出来，不写也是没有错的。最后做一个调用，这是关于国上化的写法，咱们写了三种方式，一个是ES5，然后另外两种是ES6，这三种写法各位都要会啊，但是咱后面写的比较多的其实是这种方式，这后面写的很多，大部分都是用。这个我们来做到。这是关于啊模块化这么一个做法，所以咱们把它就完成了啊，这是我们做到的啊。

然后这个完成之后呢，让大家先来看一个效果，就是咱们后面的代码有这么一个事例啊，大家看一下，咱后面会写到，大家先感受一下这个特点啊，这是咱们后面要写到的啊，大家先感受一下啊。比如说我找一个项目啊，是咱后面会写到的啊。呃，比如就是。这个啊。我把这个先打开啊。应该是在。这里边啊，咱先看一下啊，因为现在这些代码我觉得我们应该能看懂了，大部分咱们都讲过知识点了，那比如说咱们来看一段代码啊，咱找一段，这什么意思同学都会讲到啊，咱先不关注它，咱先看核心的啊，比如说我们现在咱找个文件，这个文件咱打开。大家看啊，首先我觉得现在这个咱应该能看懂，咱刚讲过isportt是不是default，然后这里边表示这里边的方法可以被别的这调用啊，只是里边我们加一些逻辑啊，咱没有说到这是我们写的一个方法。

它可以被别的调用，然后我们要调的话，怎么做呢？咱找一个调的位置啊，随便找一个，比如说这里边。大家看啊，往下找。在调的时候，首先我们看第一部分，看这部分import from是不是就引入，把这个引进来，比如我们现在这个叫capital，你看这个啊capital，然后把它引入，当然这个JS可以省略，然后有之后通过这个可以调用里边的方法，比如说我们随便找一个调用的啊capital。找一个啊。应该在下边。咱看这个啊，比如说capital，点上这个方法，比如这个方法叫get，咱到里边看一下get capital。应该就是这个嘛，它就可以做一个调用啊，所以这就是我们后面会写的代码，在这里边我们先定义哪些方法，包括它被调用，然后咱们调的时候把这个先引入进来，用这个叫import from，包括比如我们起个名字，然后最终通过它能调用刚才的方法啊，这个过程就叫目标化，咱后面项目中会一直这么来做，各位先知道后面咱会讲到啊。

然后这个代码中还有一段代码，也是咱们刚才说过的，大家来看这段代码。啊，就是来找一个完全就是这个代码，你看这里啊。首先我们调这个方法，调完之后咱是不是写个点z.Z里边加个response，再加上是不是一个箭头函数，只是里边多一些逻辑，而这个过程就是咱写那个AXLS过程，通过这个点Z表示成功，点K表示失败，然后再用箭头函数表示，啊这各位先看一下，后面咱都会在项目中实际写到，因为这些我们目前应该都说到了。啊，包括这个模块化操作，包括里边这个就是asis箭头函数的使用啊，这个啊是咱们让大家大概看了一下啊。

然后咱再回到我们这个。刚才那个项目里边啊，咱再回来。那应该是这个啊，1010，后面咱们写这个过程啊。所以现在模块化部分我们就完成了啊，大家把我说这三种方式都给他好好去练练。啊，这个完成啊。