day04/下午/078-尚硅谷-尚融宝-模块化的背景和主要的模块化方式

好，我们呢，先来说一下这个模块化的背景啊，如果要能够给大家非常简单清晰的阐述出来这个模块化的背景的话呢，我们就直接举一个例子。我们新建一个叫零四猫的，这么1123，我们再建一个四。啊，跟我们现在这风格一致吧，叫04MODEL p版模块化项目，然后接下来呢，我们在这里面呢，啊，新建一个。新建一个HTML吧，先右键新建demo.html好，接下来呢，我们在module pro里面呢，新建一个文件啊，这文件呢，我们是一个Java库文件，所以扩展名呢是JS，比如说我们随便写文件a.JS我们再写一个b.JS。b.B点这样好，那么我们在这个DEMO里面呢，分别引入A和B，那我们在这个地方呢，写它的HT脚本，并且在这里面呢，我们引入ASCA啊好，下来呢，我们再写一个S2CB，好这样的两个代码，那接下来呢，我们在A和B里面呢，分别定义一个变量，比如说这面我们定义个变量就用用web，用外叫做，比如说写的不太严谨嘛，然后这面定义了一个外叫star。

然后呢，比如说等于几颗星，等于几颗星好，这是另外的一个脚本库，这两个脚本库呢，它可能是完全不同的内容，所以它里面的主要定义的一些变量啊什么的都会有不同的意义，比如说A里面有个star呢，是五，表示五颗星，B里面呢，也有一个star，表示明星哈，哪个明星呢，比如说周杰伦好，接下来呢，我们。

STST好，接下来呢，我们把这两个star呢。就会发现都引入到了这个啊，DEMO这个页面当中，那问题来了，Star到底等于什么，真说点了这个是我们在嗯。之前的Java的编程的过程当中经常会遇到的问题。法，也就是说我们可能根据这个咱们的需要吧，分别从不同的脚本库当中呢，引入了不同的这个脚本文件，但是这个不同的脚本库的脚本文件呢，是不同的程序员写的，甚至是不同的团队，不同的公司的人写的，所以他们在对这个脚本库当中的一些变量啊，函数啊，啊进行命名的时候呢，并没有说要保证我们不发生冲突，因为他们之间没有什么必然的联系，就自己写自己的啊，很有可能会冲突啊，那冲突了的话呢，引入到我们的项目当中呢，肯定会出现问题，所以说呢。

这就是我们画画产生的背景哈，我们先来运行一下吧。F12。这等于周杰伦是吧？啊，然后接下来呢，我们把这个代码呢，给它移到上面去啊。嗯嗯，这个。这个它移到移到上面去哈，把A和B换一下位置，那么A和B一旦换位置了的话呢，那这个star很显然就会发生变化，变成五了，为什么？因为javascript它是从上到下解释执行的，我后解释A，那么A就将B的值覆盖了，如果我后解释B，那么B就将A的值覆盖了，所以说呢，就看你先引入哪个，所以你这样的话，我们的代码就有很大的不确定性，你我们的代码呢，就太容易出问题了，对不对？所以这块呢，就是啊，需要怎么解决呢？啊，方案有很多，当然了，现在比较流行的方案呢，就是模块化，那么模块化主要解决的问题呢，就是。

模块化解决的问题。就是变量在全局空间当中啊，被污染问题。这个说的好像挺学术化的，或者是说看起来好像挺高大上的，其实就是变量啊，两个变量互相呃，产生了这个这个值的覆盖啊，所以呢，本来应该是star等于五，但是呢，莫名其妙的就变成周杰伦了，是不是好，那这个呢，就是电量污染好，那我们怎么去利用模块化来解决这个问题呢？首先呢，我们得了解模块化它到底是什么。好，我们来打开我们的笔记，笔记这块呢，有一个叫做模块化规范，模块化规范到目前为止呢，我们有两个规范，第一个规范呢叫common JS的规范，第二个规范呢叫ES6的规范，我们说common GS的规范我们已经接触过了，诶有同学就会问到了什么时候接触的呢？我们在写note JS程序的时候，曾经用过一个require语法，这个就是common JS的模块法规法啊，因为common JS实际上它之前是一个脚本库啊，但是随着咱们技术水平的不断的更新迭代，科门GS这个脚本库呢，就显得有点嗯，就多余了啊，然后后面有很多新的这个脚本库呢，就取代了这个科门GS的地位了，所以他就被淘汰掉了，但是common GS里面其中有一个功能叫模块化的功能，它很实用，那就被note GS呢，引入到它自己的这个note GS环境当中，作为一个默认的一个模块化的一个解决方案了，所以在note JS程序当中呢，我们都会看到require啊这样的一些语法，比如说我们举个例子，在我们之前写过。

呃，第一个note cloud这个代码当中，我们看read file读取文件，我们是通过require来读取什么呀？来读取文件模块，好啊，Note server我们是通过块来读取什么来读取HTP模块，当然了，这些模块HTP模块也好，FS模块也好，这个都是note JS里面预定义的模块，也就是说这些模块默认呢是存在的，我们只需要通过repair。把它引入进去就可以了。那么我们有有没有什么方法去定义一些自定义的模块呢？是有的，那么用什么关键词呢？用export关键词啊，这个呢是导出模块的意思，好，这个common JS这个模块或规范大家做了解就可以了，知道呢，这个里面用块引模块，用po等模块，那目前为止我们只需要学会怎么用块模块就行，因为我们到目前为止，在当前的这个项目当中，绝大部分使用的还都是内置的模块，所以我们只需要知道怎么引就行了。那么我们如何去导出自己的模块呢？我们用一个更高级的语法，就是ES6的。

当中的模块化规范，那么ES6呢，是在common GS之后出现的，Common GS出现的时候ES6还没有，所以这里面有一些语法呢，它更繁琐一些啊，那ES6里面的语法，通过前面我们对ES6的学习，大家会发现其实有很多相对于之前版本的一些简洁写法，对不对？所以呢，用ES6写模块画呢，更为简洁一些，那我们要学习的呢，是ES6的模块化规范，未来我们在写这个。

前端程序的时候呢，就离不开这个模块化规范了，就像你在写一个Java程序，你离不开定义类和使用类一样啊，那我们未来在写javascript的程序的时候呢，我们就离不开定义模块和使用模块，或者是说导入模块和引入模块啊，这样的两个具体的一个方式了，那接下来呢，我们就来看一看这个ES6的模块化规范到底呢，它是怎么样去定义模块，怎么样去使用模块的。