day04/下午/079-尚硅谷-尚融宝-模块化中导出模块和导入模块的两种方式

好，首先呢，我们来创建一个Mo目录啊，然后呢，创建Mo目录之前呢，我们把原来的这个程序啊，放在这个no Mo目录里啊，省着跟下面现在我们要写的这个程序呢冲突，所以把这个新建一个文件夹叫normal，然后把这三个呢，我们给它拖进去。好，接下来呢，我们再建一个文件夹，在这个下面建右键新建文件夹，那这个呢，我们管成model模块化，好接下来呢，在model这个下面呢，我们嗯，创建三个模块啊，新建一个文件叫M1，这是我们的第一个模块，M1.gs，我们再创建第二个模块。m2.gs，我们在创建第三个模块，M3.gs，好三模块创建出来之后呢。我们分别在这三个模块当中写一些内容，比如说M1啊里面呢，我想还是定义一个star啊，这回呢，首先我们用一个更严谨的语法写star对吧？啊来写，然后呢，当然了，如果我们按照之前的这个方式用更更严谨的语法啊，那他就嗯，不会冲突，但是它会报错，对吧？你这个里面也定义了star，用let定义的，你这里面也定义了star，用let定义，很显然，如果我们都引入到这个地方来的话，那就会报告错误，你们可以试一下。

这个地方呢，用light。这个地方也用let好，然后我们再运行这个DEMO。然后我们看F12，大家看是不是star has already been declared，所以在这个非模块化的这个场景下呀，无论你使用严格的语法还是不严格的这个语法，那么都会出现问题，一个呢是变量被覆盖了，第二个呢，就是变量没有办法进行这个定义了，是不是你两个人必须商量咱俩定义不一样的变量，那这样的话就不特别好，那所以我们要解决的问题是什么呀？就是这两方面的问题，第一咱们不能让变量被覆盖，第二即使你用更高级的let语法的话，我们也不能让变量定义冲突啊，好，那所以呢，我们在这个module里面的M1里面，首先咱们要用let定义啊，好，这个的话呢，就避免被覆盖的问题，你说这块写王力宏，王力宏好，然后接下来呢。

定义好了之后呢，我我怎么就导出模块呢，注意这样写叫export，好，那它呢，就作为一个独立的模块导出去了，我们相当于呢，把M1封装起来了，然后M1里面呢，有一个star这样的一个，嗯，怎么说成员吧，你可以把M1理解为我们Java当中定义的一个类哈，然后你把star理解为我们Java当中定的一个成员，这样的话它就封装起来，封装起来之后，未来我们通过M一来定义这个star，这样的话，如果M2当当中也有star的话呢，那么他们就不会冲突。明白哈，好，那所以呢，接下来呢，我们来去。来看一看啊，怎么去啊调用啊，当然了，我在M2当中呢，也也来一个star，当然这个star呢，我就写五星。

对吧，所以现在呢，M1和M2有两个star，而每个star呢，意思是不一样的，我们看一看怎么去避免冲突，然后调用这两个这个变量，那么首先呢，我们可以创建一个demo.x啊demo.html就是demo.ht。ML，好，在这个单点HTML里面呢，我们首先引入M1和M2，那怎么引呢？注意啊，这个地方的语法比较特殊，我们这块写词啊RI，然后这个地方写type，等于模块化的方式引入，叫做Mo啊好，接下来呢，在这里面我们port，好，这个就是我们学的第二个关键字，这个叫导入模块，我们学的第一个关键字叫做export，这个叫导出模块，然后呢，Port这块呢，我们写星星是什么意思，我要导入这个模块里面的所有的成员，当然目前为止我只定义了一个成员啊，叫star，好，Port的星S，那我给这个成员呢，起一个模块呢个名字，比如说就叫me，当然这个别名你自己随便起，那我们呢，就和这个模块原始的文件名保持一致就可以了，Me from。

然后这个地方呢，写模块所在的位置，比如说M1啊，这样就可以了，后面有个扩展名JS，这扩展名可以省略啊，也可以写上，都可以表示的就是这个模块的名字，然后在这个地方呢，我们给这个啊JS文件当中M1这个模块呢，定一个别名叫M1，然后呢，Import就是导入M1里面的所有的成员，然后呢，我们就可以打印这个M1了。点log me，好，我们来看一眼，右键运行。

F12啊，看一下控制台，看这地方是不是有个model啊，这就是模块嘛，诶我们已经把这个一个JA javascript文件当中分散变量给封装到一个都对象里面去了，是不是好，这对象里面有一个叫star这么一个成员，那我们可以呢去打印一下，所以怎么打印呢？就是pencil.logm1.star啊接下来用同样的方式呢，我们来导入M2。好，然后接下来呢，我们在这个地方呢，叫M2。这地方叫M22啊。M2，好，然后接下来呢，我们来看这面呢，我们打印，诶王力宏也打印出来了，五也打印出来了，所以这样的话呢，你会发现两个文件当中的声明的相同的内容。对吧，我们封装到了不同的模块当中，一个呢是Mo，另外一个呢也是Mo，只不过呢，我们给它起了不同的名字，一个呢是M一点，一个呢是M2加star，这样的话呢，就避免了全局空间这个定义的变量被污染的问题啊好，那么同样呢，这个大家可能会发现这是一个对象了，那这对象里面除了定义一个成员之外，我们还可以定义更多的成员，比如说这里面呢，我们还可以再多定义一些内容，比如说发，然后嗯，我们可以定一个方法，比如说嗯，唱歌sing，然后呢，唱什么呢？pencil.log，比如说title，然个参数进来。

是吧，不知道唱什么好，然后接下来呢，我们在这个地方呢，用X套把它倒出去，明白哈，同样。我们在，呃。

这个demo.html当中，我们可以呢，看一下里面我们刷新一下啊，看一下我们之前的这个model里面是不是除了star这个。字符串类型的成员之外，还有一个C这样的一个FC function类型的成员呀，啊好，它接收一个参数叫title，然后这里面呢，就是它方式里面的一些细节内容了啊，我们就不去关注它了，那么这块呢，就是我们。这个某块封装的一个结果了，那很显然我们可以通过模块去调用这个C，那么在这个位置。在这个位置我们M1M2，我们在M1吧。我看一下我这边怎么写的啊，Canl.log是吧，那我就不用写can了，我们直接调用它me.signc啊，然后我们给它传一个参数，比如说大乘小爱好，然后呢，我们来运行一下这个DEMO，在大家看这歌就唱出来了。

明白这个意思吧啊，所以通过这种方式呢啊，我们就把javascript里面的一些零散的成员，然后给他整体封装到一个对象里啊，通过对象的方式来调用里面的成员呢，就避免和其他的这个啊模块里面的同名的成员产生冲突，那么你在应用的时候呢，只要给他们S不同的名字就可以了啊，我们可以分别通过一码来调用这里面的内容，所以这个是模块化规范的一个最基本的使用方式啊好，那么我在在这个地方给大家扩展一下，这块呢，是分别导出我们还有一个更简单的语法，就是可以这样写，你先复制一下啊，然后把它。把他这个屏蔽掉，然后呢，第二种导出。模块的方法好把去掉。

把export去掉啊好，定义的时候呢，还是这样去定义，然后接下来在这个地方port。一起导出多个成员str和C，注意这个C呢，是对于前面的这个函数的引用啊，你不要写括号，写括号就变调用了，我们不想调用它，我们想把它导出去，所以导的呢是引用好，那这样的话呢，大家看在DEMO里面的用法还是一致的，那么我们在这面。是一样的啊，所以呢，结论是一样的，只不过方式不一样，那么根据你自己的习惯，你可以一个一个导啊，也可以这样一起导都可以，那这块呢，是我们模块化当中的基本的导入和导出的两种方式。