不理解JS的模块化，JavaScript的模块化是如何演变或发展来的？如何实现？

不理解JS的模块化，JavaScript的模块化是如何演变或发展来的？不是很理解不知道为什么要使用模块化，为什么JavaScript要有模块化，它是如何发展到现在的模块化开发的？如何自定义实现模块化？

JavaScript的模块化是目前前端开发中的一个重要概念，JS的模块化其实是一个很简单的东西，但是由于JavaScript的天生缺陷，在JavaScript中模块化反而显得有些异类。JavaScript的模块化其实就是C++和PHP中的命名空间，Java中的包，如果你有用过以上语言应该一下子就明白了，但是用以上语言可能也不是很在意包的作用，但是转到JS这个包的概念反而变得高大上了，要知道JS的模块式是什么东西，那就问包和命名空间是什么以及作用就行了，一句话概括：隔离标识符，避免标识符冲突。

JavaScript的标识符命名灾难

首先，在同一个JS文件中，因为没有块作用域，例如在if语句中定义的变量和全局定义的同名变量就会起冲突，另外JS没有包、模块或者命名空间的概念，不同的JS文件互相调用，如果用到了同名变量也会起冲突，看下面的例子：

function fn(){
    var v1 = v2 = v3 = 10;
    // v2和v3没有使用var声明，被当做全局变量
}
fn();
console.log(v2); // 输出: 10

// value在if语句中定义，但是全局变量
if("value" in window){
    var value = "string";
}
console.log(value); // 输出: string

// index.js
var number = 10;

// login.js
var number = "string";

// index.js文件和login.js文件引用number变量起冲突

另外，如果使用第三方框架的话，大家都使用了相同的变量名那如何解决？JavaScript因为没有命名空间和块作用域，在后来项目开发中这个问题逐渐显现了出来，后来为了解决这个问题，又用了各种方法，其实JavaScript最初只是设计在浏览器简单执行的脚本语言，但是后来用得越来广泛，很多不必要的概念都充斥在前端开发中了，因为JavaScript天生缺陷的原因，目前的前端开发变得异常的复杂，超级复杂！比后端还要复杂，涉及的技术也相当之多，不禁想反问一句：我不过就是想开发个界面，用得着要这么复杂吗？怪JS吧！

解决方案：JavaScript模块化实例

那么JS如何实现模块化或者命名空间呢？使用两个工具：对象和函数。

1、使用对象实现命名空间或者模块

// 使用多层次的对象来实现模块化
// a.js
var User = {}; // 顶级用户命名空间
User.Post = {}; // 用户文章列表命名空间
User.Post.Comment = {}; // 文章评论命名空间

User.Post.Comment.title = "Dislike";

// b.js
User.Post.Ads = {};
User.Post.Ads.title = "Recommand";

console.log(User.Post.Comment.title); // Dislike
console.log(User.Post.Ads.title); // Recommand

但是这里有很明显的问题，这不是包，这是对象，那么多那么长就不怕写错？万一在a.js文件中随便使用var v1声明了一个变量，那么这个又可能会和其它文件的变量起冲突了，解决办法是使用下面的立即执行函数。

2、使用立即执行函数实现模块化

// a.js
(function(){
    var a = "value";
})();

// b.js
(function(){
    var a = 11;
})();
// 两个自执行函数内的变量都属于函数作用域，所以同名变量不会造成冲突

这种方式结合上面的利用对象实现命名空间的方式基本就很好实现模块化了，现在不少JavaScript第三方框架都是这样设计的。

3、高度模块化实现实例

// button.js 按钮模块 
(function (window){
    var Vue = window.Vue || {};
    var button = {};
    Vue.button = button;
    button.title = "title";
    button.background = "#fff";
    button.onclick = function(){
        console.log(this.title + this.background);
    };
    window.Vue = Vue;
})(window || {});

// form.js 表单模块
(function (window){
    
})(window || {});