JavaScript模块化

柔情只为你懂 2022-07-19 05:15 277阅读 0赞

随着互联网行业的发展，网页中的js脚本代码越来越庞大，现在一个庞大的网页体系也需要像桌面程序一样进行团队分工协作完成，开发者不得不使用软件工程的方法，管理网页的业务逻辑。

所以现在JavaScript的模块化编程是必不可少的，开发者只需要完成业务的核心逻辑，引入其他的模块即可。但是JavaScript语言本身没有提供模块化的功能（在ECMAScript2015标准已经支持，但还需很长时间才能投入使用），所以现在来学习一下以前的开发者们是如何实现JS模块化的。

## 一、函数封装 ##

模块就是实现特定功能的一组方法，而一个函数就是一组特定逻辑的实现，所以可以用封装函数来完成模块化。

function f1(){ 
        //函数体
    }
    function f2(){ 
        //函数体
    }

这样在以后需要完成上面函数所完成的功能的时候直接调用这个函数就可以了。

这种做法的缺点也很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没有什么关系。

## 二、对象 ##

为了解决函数产生的污染全局变量的问题，可以使用对象来完成模块化。

var myModule = {
        m1:1,
        m2:2,
        f1:function(){ 
            //函数体
        }
        f2:function(){ 
            //函数体
        }
    };

这样如果想要使用对象中`f1`函数实现的功能那么可以`myModule.f1()`就可以完成。

这样做避免了全局变量的污染，但是又产生了新的问题，对象中的变量暴露在外面，可以在外部随意修改，如`myModule.m1=3;`，这样就会产生安全问题。

## 三、立即执行函数 ##

通过立即执行函数，可以避免用对象模块化的问题。

通过立即执行函数返回一个对象，这样既避免了污染全局变量，也避免了外部文件修改模块内部信息。

上面这种立即执行函数模块化的方法就是JavaScript模块化的基本方法。有时候我们需要对一个模块的功能进行扩充，那么我们可以用到下面模块扩充的方法。

## 四、模块化功能扩充 ##

下面来扩充上面的`myModule`模块。

var myModule2 = (function(myModule){ 
        myMdoule.f3=function(){ 
            //新功能
        }
        return myModule;
    })(myModule);

上面的代码将已经模块化的`myModule`当做参数传入一个立即执行函数中，在函数中为`myModule`添加新的方法，最后再将这个模块返回，这样就完成了对`myModule`的扩充，可以使用`myModule2.f3()`调用新添加的方法。

## 五、宽放大模式 ##

在浏览器环境中，各个模块都是从网上获取的，有时候要对一个模块扩充的时候如果这个模块还没有加载，那么穿入的参数就是一个不存在的对象，会报错，这是可以使用宽放大模式来解决。

var myModule3 = (function(myModule){ 
        myMdoule.f3=function(){ 
            //新功能
        }
        return myModule;
    })(window.myModule || {});

这样即使传入的参数是一个不存在的对象，新添加的方法也可以使用。

## 六、输入全局变量 ##

模块化最重要的特点是独立性，模块内部最好不要和程序的其他部分直接交互。  
为了在模块内部调用全局变量，必须显示的将其他变量输入模块。

var myModule = (function($){ 
        //扩展内容
    })(jQuery);

上面的做法有一点类似jQuery自定义插件的扩充。有兴趣的可以看一下我写的[jQuery自定义插件][jQuery]的文章。

基本的模块化先说到这里，后面会继续写JS的模块规范（CommonJS，AMD，CMD）

[jQuery]: http://blog.csdn.net/u014346301/article/details/52142609