㊣深入理解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>

 

你可能感兴趣的:(JavaScript)