JavaScript 模块化发展

模块化对于现在的开发人员来说并不陌生，可以说是相当熟悉了。但是如果问 JavaScript 中的模块发展过程，相信有挺多人都是不太了解的。接下来我们就来回顾一下 JavaScript 的发展历程。

凡事三个步骤进行：是什么、为什么、怎么做。

1.什么是模块化？

模块化其实是一种规范、约束。这种规范约束能让我们的代码更具可观性和后续维护性。这种方式会大大的提高我们的工作效率，同时减少了后面维护的时间。

2.为什么要模块化？

• 我们的前端代码越来越庞大
• 代码的复杂性越来越高
• 文件之间的耦合性太高

显然这些问题随着前端项目的持续迭代与发展，都是会遇到的。这时候就需要我们使用模块化来进行管理与约束了。

3.怎么实现模块化？

1、一开始

最早我们写的JS代码就是一个函数一个函数的往下写...

function foo(){
    //...
}
function bar(){
    //...
}

坏处：直接是写在全局中，变量容易被污染

2、Namespace 命名空间模式

Namespace 模式就是用个对象封装起来

var test = {
    foo: function() {},
    bar: function() {}
}

test.foo()
test.bar()

这种模式虽然减少了全局的变量数，但是本质上还是全局范围内的一个对象，不安全。

3、匿名闭包：IIFE 模式

var Module = (function(){
    var test = "test";
    var foo = function(){
        console.log(test)
    }
    return {
        foo: foo
    }
})()

Module.foo();
Module.test; // undefined

每个闭包都是单独一个文件，利用闭包的方式来解决变量重名和环境污染问题

但是闭包同样会带来许多的问题：如内存泄露、this指向问题等等...

4、引入依赖

var Module = (function($){
    var _$body = $("body");     // we can use jQuery now!
    var foo = function(){
        console.log(_$body);    // 特权方法
    }

    // Revelation Pattern
    return {
        foo: foo
    }
})(jQuery)

Module.foo();

这就是模块模式，也是现代模块实现的基石

5、LABjs - Script Loader

“ LABjs是一种动态脚本加载器，旨在以灵活且性能优化的替代API代替丑陋，性能不佳的