Javascript模块化基础

1 函数化编程

只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。使用的时候，直接调用就行了。

<script>
    function getName() {
        return 'jack';
    }
    function getAge() {
        return 25;
    }
    console.log(getName() + ":" + getAge());
</script>

缺点：

"污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

2 对象模式

把模块写成一个对象，所有的模块成员都放到这个对象里面。

<script>
    var User = new Object({
        _count: 0,
        getName: function () {
            return 'jack';
        },
        getAge: function () {
            return 25;
        }
    });
    console.log(User.getName() + ":" + User.getAge());
    //暴露所有模块成员
    console.log(User._count);
</script>

函数封装在对象里。使用的时候，就是调用这个对象的属性。

缺点:
暴露所有模块成员。

3 函数立即调用(IIFE)

<script>
    var User = (function () {
        var _count = 0;
        var getName = function () {
            return 'jack';
        }
        var getAge = function () {
            return 25;
        }
        return {
            getName: getName,
            getAge: getAge
        }
    })();
    console.log(User.getName() + ":" + User.getAge());
    //私有属性不会暴露模块成员
    console.log(User._count);
</script>

4 模块继承

如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。

<script>

    var User = (function () {
        var _count = 0;
        var getName = function () {
            return 'jack';
        }
        var getAge = function () {
            return 25;
        }
        return {
            getName: getName,
            getAge: getAge
        }
    })();
    var Student = (function (user) {
        user.getAddress = function () {
            return 'Beijing';
        }
        return user;
    })(User);
    console.log(Student.getName() + ':' + Student.getAddress())
</script>

5 兼容空对象

由于编程的复杂性,在进行模块继承的时候,可能加载一个不存在空对象,这时候需要进行必要的兼容处理.

<script>
    var Student = (function (user) {
        user.getAddress = function () {
            return 'Beijing';
        }
        return user;
    })(window.User || {});
    console.log( Student.getAddress())
</script>

6 输入全局变量

在模块内部调用全局变量，必须显式地将其他变量输入模块。

<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
<script>
$(function(){

    var Student = (function (user) {
        user.getAddress = function () {
            $('#content').html('<h1>Bei Jing</h1>');
        }
        return user;
    })(window.User || {});

    Student.getAddress()
})
</script>
<div id="content"></div>

Javascript模块化基础

猜你喜欢