zoukankan      html  css  js  c++  java
  • ㊣深入理解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>

     

  • 相关阅读:
    docker6 管理工具
    docker1 初识docker
    libsvm处理多分类的问题
    selenium webdriver 的三种等待方式
    文本深度表示模型Word2Vec
    机器学习中训练集、验证集、测试集的定义和作用
    机器学习中防止过拟合的处理方法
    用Python读取大文件
    进化世界
    EDS(实例)
  • 原文地址:https://www.cnblogs.com/jzm17173/p/2638120.html
Copyright © 2011-2022 走看看