重点史上最详细易懂的ES6模块化语法 _模块

对于初次学习ES6的小伙伴来说， ES6的模块化语法是一个重点，在没有模块化之前，前端js代码有一下三句话
1、私密不漏
2、重名不怕
3、依赖不乱
一、接下来先演示在没有模块化之前，这个“私密不漏了” ，重名的话就乱套了，依赖又乱了该怎么解决。
在没有ES6模块化之前，我们实际开发中，会有许多js文件，在这么多的js文件中有重名的方法，那调用起来不乱了套吗，我们怎么利用ES6模块化进行一下优化呢？ ES6模块化有一个问题，就是对浏览器兼容性的问题，但是我们可以通过进行解决，该工具可以将ES6转换成ES5 。这里不做详细介绍。
我们在编辑器中，建立一个大文件夹，文件夹中分别存入三个js文件，分别为A.js、A.js、C.js ，
我们分别在三个js文件中写入各自的方法。
A.js中的方法
在上面的A.JS文件中，我们写入了两个方法分别为A1、A2 但是我们发现了一个问题，就是有些方法有重复的现象，在实际开发中，某个方法在某个业务需求中用到很多次，为此，我们需要将重复的代码封装成一个公用的函数。
在上述代码中， A.js创建的目的，就是希望将来A1这个函数，在页面中在创建A1这快的布局， A2这个函数，在页面中在创建A2这快的布局。
上面代码这样写的目的是想告诉阅读者们，在上述代码中的A1与A2方法，我们需要在test.html页面中使用， A1和A2方法给外面的test.html使用是有布局需求，但是方法只是给A.js中内部使用的，（或者说， A.js中的的A1方法与A2方法共用了一段相同的代码，但是这个相同的代码，我们没必要在A1和A2中都写，所以就封装一个函数，然后再调用这个函数）对于A.js想表达的是，将内部的A1与A2方法给外面的test.html使用布局，而方法不想给外面使用，这个方法是A.js内部使用的方法，对于页面布局没有意义。在test.html页面中我们引入标签。代码如下图所示：
在控制台打印的结果如下
这个方法属于A.js文件中封装的方法，只是供应给该文件中的A1与A2方法调用的。但是我们在书写上述代码中，引入了A.js文件之后，调用A1与A2方法后，也把这个方法给调用了，实际上，我们的这个方法不想被外部使用，这个问题在没有模块化之前是不能解决的。在实际开发中， js代码不是同一个人写的，这个时候如果别人使用了某个封装的js代码后，并且做修改了，如果此时再调用A1与A2方法那么一定会出现问题。
二、模块化之前重名的问题
我们在test.html中引入B.js文件，假设A.js与B.js中的代码不是同一个人写的，甲开发人员在A.js文件中定义了一个test（）方法，乙开发人员在B.js中也定义了一个test()方法.详情代码片段如下图所示：
A.js中的代码
B.js中的代码
我们接着在test.html文件中引入B.js文件。并且调用test（）方法。

文章插图
打印结果没有将A.js中的test方法打印出来，出现这样的结果，是由于， html页面代码加载的时候，代码是从上至下加载的，先引入的A.js文件，接着又引入B.js文件,后者中的test（）将前者里面相同的给覆盖掉了造成的。打印结果如下图所示：

重点 史上最详细易懂的ES6模块化语法

重点史上最详细易懂的ES6模块化语法