js21---单体（单例）模式 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type=text/javascript charset=utf-8>
            /* 单体
            简单单体
            闭包单体
            惰性单体
            分支单体 */

            // 1 简单单体模式（单例模式）,不能new了，用于全局资源，公共数据。
            var Singleton = {
                attr1: true , 
                attr2: 10 ,
                method1 : function(){
                    alert('我是方法1');
                },
                method2 : function(){
                    alert('我是方法2');
                }
            };
            alert(Singleton.attr1);
            
            
            // 补充 ：划分命名空间 (区分代码)，大对象.小对象， Ext.Manager.attr1 / method1
            var BHX = {};
            BHX.Singleton = {//json里面不用this和var，
                attr1: true , 
                attr2: 10 ,
                method1 : function(){
                    alert('我是方法1');
                },
                method2 : function(){
                    alert('我是方法2');
                }                
            };
            BHX.Singleton.method1();
            
            // 2 上面Singleton里面的属性还是可以更改。借用闭包保护数据 
            var BHX = {} ;
            BHX.Singleton = (function(){//（function(){}）（）
                // 添加自己的私有成员
                var a1 = true ;
                var a2 = 10  ;
                var f1 = function(){
                    alert('f1');
                }
                var f2 = function(){
                    alert('f2');
                }                
                // 把块级作用域里的执行结果赋值类我的单体对象
                return {  //返回要执行才return
                        attr1: a1 , 
                        attr2: a2 ,
                        method1 : function(){
                            return f1();
                        },
                        method2 : function(){
                            return f2();
                        }                        
                } ;
            })();//Singleton = {attr1: a1 ,attr2: a2 ,method1 :method2 :  }
            
            alert(BHX.Singleton.attr1);//改变Singleton不会改变var a1,a2
            BHX.Singleton.method1();
        </script>
    </head>
    <body>
    </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type=text/javascript charset=utf8>
        // 惰性单体（和闭包单体有一些相似的地方） 
        // 命名空间
        var Ext = {} ;
        Ext.Base = (function(){
            // 私用变量 控制返回的单例对象
            var uniqInstance ; // undefined
            // 需要一个构造器 init 初始化单体对象的方法
            function init(){
                    // 私用成员变量 
                    var a1 = 10 ; 
                    var a2 = true ; 
                    var fn1 = function(){alert('fn1')};
                    var fn2 = function(){alert('fn2')};    
                    return {
                        attr1 : a1 , 
                        arrt2 : a2 , 
                        method1 : function(){
                            return fn1();
                        },
                        method2 : function(){
                            return fn2();
                        }
                    };                        
            }
            return {//不像之前的，代码一执行，Base就有了很多属性，这里只有一个方法。
                getInstance : function(){//只有Base调用了方法才返回很多属性，
                    if(!uniqInstance){ //每次返回同一个对象，不加判断就返回不是同一个对象，
                        uniqInstance = init();
                    }
                    return uniqInstance ;
                }
            };
        })();
        
        alert(Ext.Base.getInstance().attr1);
        Ext.Base.getInstance().method1();
        
        
        
        
        
        
        // 分支单体 （判断程序的分支 <浏览器差异的检测>）
        var Ext = {} ;
        var def =  false ;
        Ext.More = (function(){
            var objA = {        // 火狐浏览器 内部的一些配置
                    attr1:'FF属性1'
                    // 属性1 
                    // 属性2 
                    // 方法1 
                    // 方法2
            } ;
            var objB = {        // IE浏览器 内部的一些配置
                    attr1:'IE属性1'
                    // 属性1 
                    // 属性2 
                    // 方法1 
                    // 方法2                            
            } ;
            return (def) ?objA:objB;
        })();
        alert(Ext.More.attr1);
        </script>
    </head>
    <body>
    </body>
</html>

 

posted @ 2017-05-19 19:05  无天666  阅读(281)  评论(0)    收藏  举报