42-尚硅谷-尚医通-前端知识点-es6模块化

各位大家好，刚才内容中呢，我们完成了NPM包管理工具，各位主要记住里边几个进门应流，那咱下面继续往下学习，咱们学习在前端开发中如何进行模块化开发，咱们来讲这个内容。首先，我先解释一下什么叫模块化开发。把这个词给各位先做个解释，各位应该知道在咱们的后端的开发中，咱应该都见过，咱是不是见了很多的包啊，比如说我们见过一个CTRL包。这个我应该知道CTRL里边写的我们内容，然后咱们又创建了一个service，里边有它的interface和实验类，另外咱们是不是又有一个map，咱首先是不是建了不同的包，然后在不同包里面写不同的类，然后最终实现它们之间的调用，就是咱们通过controller去调用service。然后通过service是不是再去调用map，比如咱们实验了一个分层的结构，那这么写，大家说我们这么写有什么好处，或者说咱为什么要这么写？

各位应该知道，这么写的话，我们的结构是不是更加清晰，你在写代码，它的层次更加分明，我们不同的地方且不同操作，CTRL里边就写参数的传递，包括调用，Switch里边写落业务逻辑，Map中是不是写税后操作，所以这个叫后端的模块化，也就是实现对象与对象之间的调用，这个叫后端模块化。然后写一下。对象与对象之间的这么一个调用。这个各位之前都感受过了，我们做一个说明，然后这个说完之后呢，因为咱们现在讲的是前端开发。注意啊，我们现在是前端，而前端开发中呢，也有这个符号化，那前端括号化指的是什么呢？给大家强调，它指的是你DS之间的这么一个调用，比如我现在一个宅子中有方法，然后通过另一个宅子可以调里边的方法，这个过成我们叫前端开化，比如说前端开发也能做成后端这个效果。

后端指的是对象电调用，前端指的是GS电调用一个JS，比如说想调另一个J子的方法，那在其他模块号中可以进行这么一个实现，所以这是关于概念的一个解释。那这个代码怎么写，给各位做演示，首先看一下我的课件中如果写到它的好处。然后咱们现在因为用的是颜色六，所以咱就按照颜六的规范来编写这个模块化的这么一个操作，那我下面给各位就来写一下，咱们看怎么做。首先我先规划一下我的方式啊，比如现在我这么做啊，一会儿咱们首先第一步。

我就创建一个项目，然后里边就是进行这个初始化。怎么初始化，咱刚才说过了，用n PM init会做到，这是我们的第一步，然后做到之后呢，我们里边的第二步，我在里边创建一个文件夹，比如说文件夹我叫src，在src里边呢，咱们创建两文件，第一个，比如我叫零一.js。然后在零一里边呢，我们就定义两个方法，包括里边有它那种，然后再创建一个零二.j我在零二里边做件事情，想要调用零一.js里边的两个方法。调用它的两个方法，然后最终实现我们的效果，所以我们现在就要做这么一个操作，第一步建项目初始化，第二步建文件夹，然后里面建文件，实现文件之间方法的调用，这是我们做的一个规划。

然后我下面就按照这个过程，那么代码我们就快速来写一下。看一下模块化的操作，它到底该怎么去做，那我来写一下，首先按照我的过程，第一步我在里边呢，先创建一个文件夹，比如我们叫这个model。我就叫这个啊mo.m我就叫这个名字。然后在里边呢，比如现在我在这过程中，我建个先做个初始化啊，刚才我提到的，我们就来一个n PM nitt。杠Y先做一个初始化的操作，现在初始化也完成了，完成之后呢，在里边呢，我创建一个文件夹，比如我叫src，这我随便起的，然后在SC里边我们建两个文件，一个是零一.js还有一个是02点。

咱把两个都创建了，然后创建之后我做什么事情呢？在零一里边我想定义两个方法，然后在零二中要进行调用，这是我们做的这一步骤，那怎么定义给各位说明，跟我们普通写法有点区别，因为你的方法要被别的这子调用，所以咱们需要做法就是加上关键字叫disport。Is pot是不是就导出意思在is pod depot里边接引的方法名字和方法内容，而你这么写之后，这两方法就能被别的宅词调用，如果你不这么做，那这方法别的这词调不到，那我现在在里面写一下，我们就加一个export。然后在里边大括号，咱们写两个方法，假如说第一个方法我就叫。例子的。

然后在list中呢，我就做一个输出console.log输出我这个就叫。List，这是第一个方法，然后再再写第二个方法，我来一个逗号，假如方法我叫save，然后在save里边我也是做这么一个输出，这个我就输出叫C，所以各位看，现在我在01点宅子里边就定义了两个方法，一个叫list，一个叫save，然后把它们写到port deport中，它就可以被别的JS进行调用。这是我们写的第一部分，然后写完之后呢，咱下面再来写这个零二.g在零二里边呢，就来调这个方法做个实现，那咱写一下零二。那怎么做？给各位强调啊，比如大家知道我们在写Java代码中，假如我现在CTRL里边想注入service，那么service是不是要引port ctrl中打药，我service中注入map map是不是也要引进来，而现在跟他一样，所以我们在零二里面做的第一部分，先把零一给头引入进来，那怎么引入再加个。

Port，然后给你零一起个名字，比如我叫user，写个from from，后面加上引入的那个路径，我们就来一个点杠，01点。S，这样的话就完成了引入。然后这个写法各位注意，From后面就加上你文件这个路径，因为他们都在src下，我们写它的路径，点杠当前路径U侧就表示给你这个GS文件起个名字，就好比说咱们Java中那个对象U侧就好比说GS那个对象的名字。然后这个选完之后，下面咱可以做一个调用，我写个注释，第一步就是。引入，然后第二步我们做一个。调用，那怎么调用？咱就写user，点上那个方法名字，第一个方法是list，第二个方法叫C，这样的话我们就完成了，在零二中引入零一，并且进行调用，这就是我们的。

这步操作，比如说我们现在通过这个代码，咱就把这个模块化的操作，通过也六的规范写法，咱们就完成了。这是零二.x。然后洗完之后，咱们把这过程我们再重复一遍，最终咱们来做一个测试，就看下效果。我来说一遍啊，首先第一步我们建了一个项目，进行了初始化，初始化之后咱们建了两文件，一个零一，一个零二，在零一里边我写两方法要被别的宅子调用，那怎么做？写到ispo到def before中可以被别的宅子调用，然后另二里边把零一引入，最终做调用，用import from引入U侧，就好比说VJJS定一个预向名称，通过它来调令方法，最终就可以了。

这样的话，咱把这个就完成了，然后完成之后，下面咱们把代码我们来执行一下，看一下效果是什么样的，咱们来做一个执行。那我写一下，就我下面我来执行这个。该文件。那怎么执行，刚才我们演示过了，我就直接做一下啊，因为现在我是在零二中调零一，所以咱们在里边呢，我用终端先打开。然后打开之后，我直接用这个noe02.gs就可以了，它能直接执行零二.gs里边会掉零一，然后现在我一回车。大家看。目前是报错了，就是执行之后我们发现目前它出现了一个异常，就是报错了。那咱们说他为什么报错啊，给各位来说一下，我在底中给各位先写一下。

就是目前我们一执行它就出错了。然后说一下他为什么出错。给大家解释一下啊。各位注意，刚才我一直提到，我们现在用的是这个ES6的写法呀，就是通过ES6的这个规范来实现模块化的这个操作，这是电子六，而现在有这么一个特点要各位牢牢记住啊，就这句话。在node JS中呢，它无法直接执行ES6的模块化操作，你需要把E6改成低的版本才能做，比如说改成ES5才能执行，因为note宅中没法直接执行ES6的模块化代码，注意这个描述啊，不是note宅中不能执行，点六是不能执行它里边的。模块化操作。如果是别的代码它可以执行，只是模块化它无法执行，所以大家需要给它变成ES5，就是变成一个低的版本才能进行执行，所以他目前是这么一个问题，我在这里边给大家写一下，各位把这句话给他牢牢记住啊，我就写到下面。

就是现在在我们这个node JS的。环境中，它无法直接去执行ES6的这个模块化的这个代码，你需要把ES6的代码给它转换成ES5，然后它才可以执行，就是转成低版本代码它才可以执行。所以目前我们就出现这个问题，那咱下面就可以做个转换，那怎么转换呢？刚才给大家介绍到咱们有一个工具或者转码器，叫这个背包，或者说背包用它能实验一个转码的效果，那咱们下面来用这个背包做一个转码。但是目前模块化的代码我们应该已经做了实现，只是目前这个环境问题，他没法执行，所以咱们马上做个转换，然后最终再进行这个操作。