JavaScript模块化编程-优快云博客

本文介绍了JavaScript中实现模块化编程的几种方法，包括原始方法、对象写法及立即执行函数写法，并探讨了每种方法的优点与不足。

在网页编程变得越来越复杂的同时，模块化编程已经成了前端开发中的迫切需求。

但JavaScript并不是一种模块化编程语言，它不支持类，更别说模块了。但是在实际的运用环境中，我们可以通过JavaScript来模拟模块。下面tity会通过由简到难的方式来给大家讲解一下JavaScript中的模块化编程。

一、原始方法
有时候我们可以把一个模块简单的理解为实现某个特定功能的一个函数，这时我们将就可以将这个函数称作模块。
例如：定义两个模块，第一个是给参数加一，第二个是给参数加二。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>模块化编程</title>
    <script type="text/javascript">
        function add1(a){
            a += 1;
            console.log('加一为：' + a);
        }
        function add2(a){
            a += 2;
            console.log('加二为：' + a);
        }
        add1(5);
        add2(5);
    </script>
</head>
<body>
</body>

这样，就相当于定义了两个模块，这两个模块分别实现不同的功能。

这种方法既然是原始方法，那就意味着它有一定的缺陷：
①“污染”全局变量；
②无法保证是否会与其他模块的变量名发生冲突；
③无法看出各个模块之间的关系。

二、对象写法
为了解决上面原始写法带来的问题，我们可以将所有的模块都封装在一个对象里，然后通过调用这个对象的属性来使用模块。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>模块化编程</title>
    <script type="text/javascript">
        var model = new Object({
            num : 2,
            add1 : function(a){
                a += 1;
                console.log('加一为：' + a);
            },
            add2 : function(a){
                a += 2;
                console.log('加二为：' + a);
            }
        });
        model.add1(5);
        model.add2(5);
        model.num = 3;
        console.log(model);
    </script>
</head>
<body>
</body>
</html>

运行结果为：
这里写图片描述
很显然，这样带来的弊端是：
①内部状态可以被外部重写；
②会暴露所有的模块成员。

三、立即执行函数写法
为了解决对象写法所带来的的弊端，我们可以改进为立即执行函数写法。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>模块化编程</title>
    <script type="text/javascript">
        var model = (function(){
            var num = 2;
            var add1 = function(a){
                a += 1;
                console.log('加一为：' + a);
            };
            var add2 = function(a){
                a += 2;
                console.log('加二为：' + a);
            };
            return {
                add1 : add1,
                add2 : add2
            }
        })();
        model.add1(5);
        model.add2(5);
        console.log(model.num);
    </script>
</head>
<body>
</body>
</html>