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

上面的案例所演示的就是在非模块下，不同js文件中出现同名函数的问题，一单出现重名，后者必定出现一系列问题。
接下来还有一个需求，在js文件夹中还有一个js文件，叫做C.js 。在C.js中希望使用一下A.js中的某个方法或者B.js中的某个方法。
在test.html文件中调用C.js文件
调用之后打印结果如下
C.js会将前面的js文件覆盖掉。
注意：在test.html文件中，如果将C.js文件放在最上面，那么打印结果将会报错，这有由于，代码执行过程中，首先加载了C.js文件，但是C.js文件被调用的时候， A.js中的A_C()方法与B.js中的B_C()方法还没有加载，造成未定义的现象。
上面的案例中，在js文件夹中，只有三个js文件，但是在实际开发中，一个js文件夹中，有多个甚至上百个js文件，而且某个js文件需要依赖其它js文件进行加载，那么问题就会显现出来。（在非模块化下开发将会显现出依赖混乱这样的问题）
为了解决前面我们铺垫的内容情况（非模块化下开发，出现的一系列问题），我们接下来讲解ES6模块开发。
ES6模块化规范
es6模块化规范规定，在js文件当中，如果用户想将某个函数给别的js文件依赖使用，那么就需要在当前的js文件中，将其中的某个函数给“暴露”出来，使用关键字“”,翻译成中文为导出的意思，在案例中，假设我们想将A.js中的A1() 、A2() 、test()方法给暴露出去。我们需要在当前js文件最下方书写 {
A1(),
A2() ,
test()
}
详情代码块如下图所示：
暴露出去之后，我们在test.html中导入使用，此时我们就不需要像之前一样使用了，其导入语法为 {暴露出方法1、暴露出方法2、暴露出方...} from './././'(from './././')为导出方法的所属js文件路径。详情导入操作代码片段如下图所示：

文章插图
模块化开发解决重名问题
【重点史上最详细易懂的ES6模块化语法】上面我们案例演示过，在非模块化下开发如果有相同的函数名，后者会将前者给覆盖掉。在ES6模块下这以问题将迎刃而解。
在B.js文件中，同样也要一个test()函数，我们也把其中的test()方法也暴露出去，那么将会出现什么样的结果呢？代码演示如下图所示：
在test.html中，将B.js中暴露的test方法导入
运行结果
在浏览器控制台报错，提示说明说test早已经存在，这究竟是怎么回事呢？
我们简单的举个例子，阅读者就会明白了，这个test方法就相当于一个商品品牌，我们在A商店购买了一瓶农夫山泉牌矿泉水，然后又在B商店购买了一瓶农夫山泉牌矿泉水，此时两瓶矿泉水的包装样式一模一样。如果两瓶水被两个人打开喝过后，混在一起将无法区分分别为谁的水，假设其中一个人将矿泉水的标签撕掉此时就好区分了，同样滴，为了解决重名问题，我们也可以分别为导入的两个test方法各做个标记，详情代码块如下图所示：
三、模块化下开发，解决依赖不乱等问题

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

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