js设计模式--单体模式

Posted 2020-09-26 noooooob

单体模式

　　-单体模式(singleton)是javascript中最基本最有用的设计模式之一。

　　-这种模式提供了一种将代码组织为一个逻辑单元的手段，这个逻辑单元中的代码可以通过单一

的变量进行访问。通过确保单体对象只存在一份实例，你就可以确信自己的所有代码使用的都是

同样的全局资源。

　　-简单单体

　　-闭包单体

　　-惰性单体

　　-分支单体

<script type="text/javascript" charset="utf-8">
            // 单体模式(singleton)
            // 1.简单单体模式
            var Singleton = {
                
                attr1 : true,
                attr2 : 10,
                method1 : function() {
                    alert(‘i am method1‘);
                },
                method2 : function() {
                    alert(‘i am method2‘);
                }
            };
            
            // alert(Singleton.attr1);
            // 补充：划分命名空间
            var YF = {};
            YF.Singleton = {
                attr1 : true,
                attr2 : 10,
                method1 : function() {
                    alert(‘i am method1‘);
                },
                method2 : function() {
                    alert(‘i am method2‘);
                }
            };
            
            // 2.闭包单体模式
            // 闭包的主要目的：保护数据
            // 命名空间
            var YF1 = {};
            YF1.Singleton = (function(){
                // 把块级作用域里的执行结果赋值给单体对象
                // 优点，可以添加自己的私有成员，外部无法发文
                var a1 = true;
                var a2 = 10;
                var f1 = function() {
                    alert(‘f1‘);
                };
                
                var f2 = function() {
                    alert(‘f2‘);
                };
                
                return {
                    attr1 : a1,
                    attr2 : a2,
                    method1 : function() {
                        return f1();
                    },
                    method2 : function() {
                        return f2();
                    }
                };
            })();
            
            alert(YF1.Singleton.attr1);
        </script>

<script type="text/javascript" charset="utf-8">
            // 单体模式(singleton)
            // 1.惰性单体，和闭包单体有一些相似的地方
            // 顶层的命名空间
            var YF = {};
            YF.Base = (function() {
                
                // 私有变量，控制返回的单体对象
                var uniqueInstance;
                // 构造器 初始化单体对象的方法
                function init() {
                    var a1 = true;
                    var a2 = 10;
                    var f1 = function(){
                        alert(‘f1‘);
                    };
                    
                    var f2 = function(){
                        alert(‘f2‘);
                    };
                    
                    return {
                        attr1 : a1,
                        attr2 : a2,
                        method1 : function() {
                            return f1();
                        },
                        method2: function() {
                            return f2();
                        }
                    };
                }
                
                
                
                return {
                    getInstance : function(){
                        if(!uniqueInstance){
                            // 如果不存在，则创建单体实例
                            uniqueInstance = init();
                        }
                        return uniqueInstance;
                    }
                };
            })();
            
            
            
            
            // 分支单体(判断程序的分支  <浏览器的差异检测>)
            var YF1 = {};
            // 假设true为FireFox， false为IE
            var difference = true;
            YF1.More = (function(){
                // 火狐浏览器内部的一些配置
                var objA = {
                    // 属性1
                    // 属性2
                    // 方法1
                    // 方法2
                };
                // IE览器内部的一些配置
                var objB = {
                    // 属性1
                    // 属性2
                    // 方法1
                    // 方法2
                };
                
                return (difference) ? objA : objB;
            })();
            
        </script>