JavaScript模块定义

介绍

JavaScript模块定义需要遵循“开闭原则”，即对修改关闭，对扩展开放，下文将从三个不同的层次进行演示说明。

形态一：自定义对象

如代码所示，我们定义一个userObj对象，里面封装了它的属性，这种代码结构更加规范整洁，调用时比流水账式的js代码舒服很多。但是其也有不足之处，就是在外部可以随意修改对象的属性，不符合“开闭原则”，所以我们需要找到更好的写法。

<script type="text/javascript">

    /**
     *  自定义对象
     */
    var userObj={
        username:"tom",
        age:30,
        mobile:"13388887777"
    }
    console.log(userObj.username)
    //不符合开闭原则，可随意修改
    userObj.username = "sss";
    console.log(userObj.username)
</script>

形态二：自定义函数

自定义函数方式，可以让外部不能随意修改对象封装的属性，但是其缺点是只能在函数内部调用，无法满足外部调用需求。

 <script type="text/javascript">
 /**
     * 自定义函数
     */
    
    (function () {

        function userObj() {
            var username = "lucy";
            var age = 18;
            var mobile = "13387654332";
            return {
                username:username,
                age:age,
                mobile:mobile
            };
        }
        console.log("1="+userObj().username);
    })();
    //不能随意修改，但在函数外部无法调用
    console.log("2="+userObj().username);
</script>

形态三：自定义模块

在第二中形态基础上，我们将函数赋给一个模块module变量，然后再返回其定义的对象/属性，这样就可以做到“开闭原则”，既能让代码结构规范清晰，也能很好的控制作用域，这种写法，就是我们要的“模块”。

 <script type="text/javascript">
/**
     *  自定义模块
     *  不能随意被修改，但支持外部调用
     *  符合开闭原则：对扩展开发，对修改关闭
     */
    var module = (function () {

        var str = "1234";

        function userObj() {
            var username = "lucy";
            var age = 18;
            var mobile = "13387654332";
            return {
                username:username,
                age:age,
                mobile:mobile
            }
        };

        return{
            userObj :userObj(),
            str:str
        }

    })();
    console.log(module.str);
    console.log(module.userObj.age);
</script>