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>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/6879939.html,如需转载请自行联系原作者

相关文章
|
8月前
|
JavaScript 前端开发 Docker
如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
通过这些步骤,可以确保您的Next.js应用在多核服务器上高效运行,并且在Docker环境中实现高效的容器化管理。
843 44
|
存储 安全 JavaScript
云计算浪潮中的网络安全之舵探索Node.js中的异步编程模式
【8月更文挑战第27天】在数字化时代的风帆下,云计算如同一片广阔的海洋,承载着企业与个人的数据梦想。然而,这片海洋并非总是风平浪静。随着网络攻击的波涛汹涌,如何确保航行的安全成为了每一个船员必须面对的挑战。本文将探索云计算环境下的网络安全策略,从云服务的本质出发,深入信息安全的核心,揭示如何在云海中找到安全的灯塔。
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
327 0
Next.js 实战 (三):优雅的实现暗黑主题模式
|
11月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
145 2
|
11月前
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第40天】在JavaScript的世界里,异步编程是一道不可或缺的风景线。它允许我们在等待慢速操作(如网络请求)完成时继续执行其他任务,极大地提高了程序的性能和用户体验。本文将深入浅出地探讨Promise、async/await等异步编程技术,通过生动的比喻和实际代码示例,带你领略JavaScript异步编程的魅力所在。
90 1
|
12月前
|
前端开发 JavaScript UED
探索JavaScript中的异步编程模式
【10月更文挑战第21天】在数字时代的浪潮中,JavaScript作为一门动态的、解释型的编程语言,以其卓越的灵活性和强大的功能在Web开发领域扮演着举足轻重的角色。本篇文章旨在深入探讨JavaScript中的异步编程模式,揭示其背后的原理和实践方法。通过分析回调函数、Promise对象以及async/await语法糖等关键技术点,我们将一同揭开JavaScript异步编程的神秘面纱,领略其带来的非阻塞I/O操作的魅力。让我们跟随代码的步伐,开启一场关于时间、性能与用户体验的奇妙之旅。
|
JavaScript 前端开发 调度
探索Node.js中的异步编程模式
在Node.js的世界里,异步编程是核心。本文将带你深入了解异步编程的精髓,通过代码示例和实际案例分析,我们将一起掌握事件循环、回调函数、Promises以及async/await等关键概念。准备好迎接挑战,让你的Node.js应用飞起来!
147 5
|
JavaScript 前端开发 API
探索Node.js中的异步编程模式
【10月更文挑战第4天】在JavaScript的世界中,异步编程是提升应用性能和用户体验的关键。本文将深入探讨Node.js中异步编程的几种模式,包括回调函数、Promises、async/await,并分享如何有效利用这些模式来构建高性能的后端服务。
|
JavaScript 前端开发 开发者
探索Node.js中的异步编程模式
【9月更文挑战第33天】在JavaScript的后端领域,Node.js凭借其非阻塞I/O和事件驱动的特性,成为高性能应用的首选平台。本文将深入浅出地探讨Node.js中异步编程的核心概念、Promise对象、Async/Await语法以及它们如何优化后端开发的效率和性能。
120 7
|
11月前
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第33天】在JavaScript的世界里,异步编程是提升应用性能和用户体验的关键。本文将带你深入理解异步编程的核心概念,并展示如何在实际开发中运用这些知识来构建更流畅、响应更快的Web应用程序。从回调函数到Promises,再到async/await,我们将一步步解锁JavaScript异步编程的秘密,让你轻松应对各种复杂的异步场景。

热门文章

最新文章