JS模块化方案(1)之早期代码组织方式

一、全局函数

1、优缺点：
使用全局函数进行代码的组织，很容易造成功能函数的命名冲突！！
2、案例：
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="./js/common/common.js"></script>
    <script src="./js/damu.js"></script>
    <script src="./js/hsp.js"></script>
    <script src="./js/tg.js"></script>
    <script type="text/javascript">
        /*全局函数
        函数命名冲突时，后面的会覆盖前面
        */
        A();//A from hsp&common
    </script>
</html>

common.js

function common(){
    return "common";
}

damu.js

function A(){
    var result = common();
    console.log("A from damu&" + result);
}

function B(){
    var result = common();
    console.log("B from damu&"+ result);
}

function C(){
    var result = common();
    console.log("C from damu&"+ result);
}

hsp.js

function A(){
    var result = common();
    console.log("A from hsp&"+ result);
}

function B(){
    var result = common();
    console.log("B from hsp&"+ result);
}

function C(){
    var result = common();
    console.log("C from hsp&"+ result);
}

tg.js

function A(){
    var result = common();
    console.log("A from tg&"+ result);
}

function B(){
    var result = common();
    console.log("B from tg&"+ result);
}

function C(){
    var result = common();
    console.log("C from tg&"+ result);
}

3、使用细节和注意事项
1)全局函数,函数命名冲突时，后面的会覆盖前面
2)全局函数中所有的模块都定义在全局作用域。

function A(){
    var common;
    common = common();
    console.log("A from damu&" + result);
}
以上代码会报错！！！
common() 会提升到当前作用域顶层，调用时 common不是函数，是变量。会报错

注意：函数名和变量名不要一样！

二命名空间

1、基本介绍
将各项功能函数封装到对象中去。将函数变成对象的属性。
对象名便是此处的命名空间。

2、优缺点：
使用命名空间是可以解决功能函数命名冲突的。但代码的组织形式还是不容乐观。
3、案例：
index.html

<body>
    </body>
    <script src="./js/common/common.js"></script>
    <script src="./js/damu.js"></script>
    <script src="./js/hsp.js"></script>
    <script src="./js/tg.js"></script>
    <script type="text/javascript">

        var damu = damu();
        damu.A();

        var hspG = hsp();
        hspG.A();
        /*测试结果：
            A from damu&common
            A from hsp&common
         */
    </script>

common.js
同上
damu.js

function damu(){
    function A(){
        var result = common();
        console.log("A from damu&"+ result);
    }

    function B(){
        var result = common();
        console.log("B from damu&"+ result);
    }

    function C(){
        var result = common();
        console.log("C from damu&"+ result);
    }

    return{
        A:A,
        B:B,
        C:C
    }
}

hsp.js

function hsp(){
    function A(){
        var result = common();
        console.log("A from hsp&"+ result);
    }

    function B(){
        var result = common();
        console.log("B from hsp&"+ result);
    }

    function C(){
        var result = common();
        console.log("C from hsp&"+ result);
    }

    return {
        A:A,
        B:B,
        C:C
    }
}

tg.js

function tg(){
    function A(){
        var result = common();
        console.log("A from tg&"+ result);
    }

    function B(){
        var result = common();
        console.log("B from tg&"+ result);
    }

    function C(){
        var result = common();
        console.log("C from tg&"+ result);
    }

    return {
        A:A,
        B:B,
        C:C
    }
}

4、使用细节和注意事项

function A(){
    var common;
    common = common();
    console.log("A from damu&" + result);
}
以上代码会报错！！！
common() 会提升到当前作用域顶层，调用时 common不是函数，是变量。会报错

三、 IIFE-优化的命名空间

1、基本介绍
使用IIFE可以进一步简化我们代码的组织形式。
但我们逐渐体会到，当项目变得够复杂时，我们很难通过人为协助与交流去控制模块间的依赖了。前端技术体系中不得不出现适当的js模块化方案了
2、案例：
index.html

</body>
    <script src="./js/common/common.js"></script>
    <script src="./js/damu.js"></script>
    <script src="./js/hsp.js"></script>
    <script src="./js/tg.js"></script>
    <script type="text/javascript">
        damu.A();
        hsp.A();
        tg.A();
        /*测试结果：
            A from damu&common
            A from hsp&common
            A from tg&common
         */
    </script>

common.js

同上

damu.js

(function(w){
    function A(){
        var result = common();
        console.log("A from damu&"+ result);
    }

    function B(){
        var result = common();
        console.log("B from damu&"+ result);
    }

    function C(){
        var result = common();
        console.log("C from damu&"+ result);
    }

    w.damu={
        A:A,
        B:B,
        C:C
    }
})(window)

hsp.js

(function(w){
    function A(){
        var result = common();
        console.log("A from hsp&"+ result);
    }

    function B(){
        var result = common();
        console.log("B from hsp&"+ result);
    }

    function C(){
        var result = common();
        console.log("C from hsp&"+ result);
    }

    w.hsp={
        A:A,
        B:B,
        C:C
    }
})(window)

tg.js

(function(w){
    function A(){
        var result = common();
        console.log("A from tg&"+ result);
    }

    function B(){
        var result = common();
        console.log("B from tg&"+ result);
    }

    function C(){
        var result = common();
        console.log("C from tg&"+ result);
    }

    w.tg={
        A:A,
        B:B,
        C:C
    }
})(window)

3、使用细节和注意事项

w.hsp={
   A:A,//属性名：属性值
   B:B,
   C:C
}