㊣深入理解JavaScript系列（3）：全面解析Module模式

http://www.cnblogs.com/TomXu/archive/2011/12/30/2288372.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="eq"></div>
    <script type="text/javascript">
        var Calculator = function (eq) {
            // 这里可以声明私有成员
            var eqCtl = document.getElementById(eq);

            return {
                //暴露公开的成员
                add: function (x, y) {
                    var val = x + y;
                    eqCtl.innerHTML = val;
                }
            };
        };
        var calculator = new Calculator('eq');
        calculator.add(2, 2);
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="eq"></div>
    <script type="text/javascript">
        var calculator = (function () {
            var eqCtl = document.getElementById('eq');
            return {
                add: function (x, y) {
                    var val = x + y;
                    eqCtl.innerHTML = val;
                }
            };
        }());
        calculator.add(2, 2);
        // 大家可能看到了，每次用的时候都要new一下，也就是说每个实例在内存里都是一份copy，如果你不需要传参数或者没有一些特殊苛刻的要求的话，我们可以在最后一个}后面加上一个括号，来达到自执行的目的，这样该实例在内存中只会存在一份copy
        // 注意，匿名函数后面的括号，这是JavaScript语言所要求的，因为如果你不声明的话，JavaScript解释器默认是声明一个function函数，有括号，就是创建一个函数表达式，也就是自执行，用的时候不用和上面那样在new了
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var blogModule = (function () {
            var my = {}, privetaName = '博客园';
            function privateAddTopic(data) {
                alert(data);
            }
            my.Name = privetaName;
            my.AddTopic = function (data) {
                privateAddTopic(data);
            };
            return my;
        }());
        // Object { Name="博客园", AddTopic=function()}
        console.log(blogModule);
        alert(blogModule.Name);
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var blogModule = (function (my) {
            my.AddPhoto = function () {
                alert(1);
            };
            return my;
        }(blogModule || {}));

        var blogModule = (function (my) {
            my.DeletePhoto = function () {
                alert(2);
            };
            return my;
        }(blogModule || {}));

        // Object { AddPhoto=function(), DeletePhoto=function()}
        console.log(blogModule);
        blogModule.AddPhoto();
        blogModule.DeletePhoto();
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var blogModule = (function (my) {
            my.AddPhoto = function () {
                alert(1);
            };
            return my;
        }(blogModule || {}));

        var blogModule = (function (my) {
            var oldAddPhotoMethod = my.AddPhoto;
            my.AddPhoto = function () {
                oldAddPhotoMethod();
                alert(2);
            };
            return my;
        }(blogModule));

        // 紧耦合扩展限制了加载顺序(var oldAddPhotoMethod = my.AddPhoto;之前my.Addphote)，但是提供了我们重载的机会
        blogModule.AddPhoto();
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var blogModule = (function (my) {
            my.AddPhoto = function () {
                alert(1);
            };
            return my;
        }(blogModule || {}));
        var blogModule = (function (old) {
            var my = {},
                key;
            for (key in old) {
                if (old.hasOwnProperty(key)) {
                    my[key] = old[key];
                }
            }
            var oldAddPhotoMethod = old.AddPhoto;
            my.AddPhoto = function () {
                oldAddPhotoMethod();
                alert(2);
            };
            return my;
        }(blogModule));
        // Object { AddPhoto=function()}
        console.log(blogModule);
        blogModule.AddPhoto();
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var blogModule = (function (my) {
            var _private = my._private = '1';
            return my;
        }(blogModule || {}));
        var blogModule = (function (my) {
            var _private = my._private = my._private || {},
                _seal = my._seal = my._seal || function () {
                    delete my._private;
                    //delete my._seal;
                    //delete my._unseal;
                },
                _unseal = my._unseal = my._unseal || function () {
                    my._private = _private;
                    //my._seal = _seal;
                    //my._unseal = _unseal;
                };
            return my;
        }(blogModule || {}));
        console.log(blogModule);
        blogModule._seal();
        console.log(blogModule);
        blogModule._unseal();
        console.log(blogModule);
    </script>
</body>
</html>

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jzm17173/p/2638120.html