JavaScript 模块封装

在最早的时候JavaScript这门语言其实是并没有模块这一概念，但是随着时间的推移与技术的发展将一些复用性较强的代码封装成模块变成了必要的趋势。

在这篇文章中主要介绍原生的 JavaScript封装的几种手段以及新增的 ES6 Module的语法，来实现模块封装。

并且会简单的使用Webpack让Es6代码向后兼容。

引入问题
　　以下有两个Js文件，如果不采取任何封装手段直接导入会导致window环境污染。

并且，如果文件中有相同名字的变量或函数会发生命名冲突，因为它们都是放在全局作用域window对象中的。

var module_name = “js_m1”;
​
function show(){
console.log(“js_m1.show”);
}

var module_name = “js_m2”;
​
function show(){
console.log(“js_m2.show”);
}

image-20200807115438551

简单解决
IIFE封装
　　针对上述问题，采取函数的闭包及作用域特性我们为每个模块封装一个作用域。

第一步：进行自执行函数包裹代码封装出局部作用域

第二步：向外部暴露接口，为window对象添加新的对象

(function () {
​
var module_name = “js_m1”;
​
function show() {
console.log(“js_m1.show”);
}
​
window.js_m1 = { module_name: module_name, show: show };
// 在es6中，可简写为 { module_name , show }
}())

(function () {
​
var module_name = “js_m2”;
​
function show() {
console.log(“js_m2.show”);
}
​
window.js_m2 = { module_name: module_name, show: show };
// 在es6中，可简写为 { module_name , show }
}())

image-20200807120606342

Es6块级封装
　　在Es6之前，由于没有出现块级作用域的概念，那时候大家都使用上面的方式进行封装。

在当Es6的块级作用域出现之后，又诞生出了新的封装方式即块级作用域封装。

和IIFE封装相同，都是利用作用域的特性进行封装。

注意一点，块级作用域只对let或const声明有效。

{
let module_name = “js_m1”;
​
let show = function () {
console.log(“js_m1.show”);
}
​
window.js_m1 = { module_name, show };
​
}

{
let module_name = “js_m2”;

    let show = function () {
            console.log("js_m2.show");
    }

    window.js_m2 = { module_name, show };

}

image-20200807121327601

Es6 module 语法
　　上面的两种方式虽然都能达到模块封装的效果，但是我们依然有更好的选择。

下面将介绍极力推荐的Es6 module语法进行导入。

学习Es6 module从以下三个方面来入手：

1.模块标签及其特性

2.导出

3.导入

模块标签