解析Javascript设计模式Revealing Module 揭示模式单例模式

   2023-02-08 学习力0
核心提示:目录1. Revealing Module 揭示模式2. Singleton 单例模式1. Revealing Module 揭示模式该模式能够在私有范围内简单定义所有的函数和变量,并返回一个匿名对象, 它拥有指向私有函数的指针,该函数是他希望展示为公有的方法。示例:scriptvar myRevealingModul

1. Revealing Module 揭示模式

该模式能够在私有范围内简单定义所有的函数和变量,并返回一个匿名对象, 它拥有指向私有函数的指针,该函数是他希望展示为公有的方法。

示例:

<script>
var myRevealingModule = function () {
    var privateVar = "Ren Cherry",
            publicVar = "Hey there";
    function privateFunction() {
            console.log("Name:"+privateVar);
    }
    function publicSetName(strName) {
            privateName = strName;
    }
    function publicGetName() {
            privateFunction();
    }
    //将暴露的公有指针指向到私有函数和属性上
    return {
            setName: publicSetName,
            greeting: publicvar,
            getName: publicGetName
    };
}();
myRevealingModule.setName("Paul Kinlan");
</script>

优点:

  • 该模式很容易之处哪些函数和变量可被公开访问,改善了可读性。
  • 如果一个私有函数引用一个公有函数,在需要打补丁时,公有函数是不能被覆盖的。 因为私有函数将继续引用私有实现,该模式并不适用于公有成员,只使用函数。

2. Singleton 单例模式

单例模式,能够限制类的实例化次数只能为一次。单例模式,在该实例不存在的情况下, 可以通过一个方法创建一个类来实现创建类的新实例;如果实例已经存在,它会简单返回该对象的引用;

示例:

<script type="text/javascript">
var mySingleton = (function () {
        //实例保持了singleton 的一个引用
        var instance;
        function init() {
                //singleton
                //私有方法和变量
                function privateMethod() {
                        console.log("I am private");
                }
                var privateVariable = "I am also private";
                var privateRandomNumber = Math.random();
                return {
                        //公有方法和变量
                        publicMethod: function () {
                                console.log("The public can see me!");
                        },
                        publicProperty: "I am also public",
                        getRandomNumber: function() {
                                return privateRandomNumber;
                        }
                };
        };
        return {
                //获取singleton 的实例,如果存在就返回,不存在就创建新实例
                getInstance: function() {
                        if(!instance) {
                                instance = init();
                        }
                        return instance;
                }
        };
})();
var singleA = mySingleton.getInstance();
var singleB = mySingleton.getInstance();
console.log(singleA.getRandomNumber()===singleB.getRandomNumber());//true
</script>

在实践中,当在系统中确实需要一个对象来协调其他对象时,>Singleton模式很有用。

示例:

<script type="text/javascript">
var SingletonTester = (function() {
        //options: 包含singleton所需配置信息的对象
        //var options = {name:"test",pointX:5};
        function Singleton(options) {
                //如果未提供options,则设置为空对象
                options = options || {};
                //为singleton设置一些属性
                this.name = "SingletonTester";
                this.pointX = options.pointX || 6;
                this.pointY = options.pointY || 10;
        }
        //实例持有者
        var instance;
        //静态变量和方法的模拟
        var _static = {
                name: "SingletonTester",
                //获取实例的方法,返回singleton对象的singleton实例
                getInstance: function(options) {
                        if(instance === undefined) {
                                instance = new Singleton(options);
                        }
                        return instance;
                };
                return _static;
        }
})();
var singletonTest = SingletonTester.getInstance({
        pointX: 5
});
console.log(singletonTest.pointX);//5
</script>

以上就是解析Javascript设计模式Revealing Module 揭示模式单例模式的详细内容,更多关于JS 揭示模式单例模式的资料请关注其它相关文章!

原文地址:https://juejin.cn/post/7135591851502862366
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • Angular.js的作用域和数据绑定
    初识Angular.js通过初识Angular.js可以做一个简单的入门,下面开始做深入的了解吧。作用域作用域($scope)和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。 作用域是视图和控制器
    03-16
  • angularJSapi学习-angular.copy使用
    angular.copy使用效果:初始状态:输入信息后未保存状态:点击save后状态:当输入框内容和master内容不一致时:点击reset使得user的信息被重置为master中信息: 具体代码: 1 !DOCTYPE HTML 2 html ng-app="app" 3 headscript src="./angular.min.js"/script
    03-16
  • Ionic启动时提示:The Angular CLI requires a minimum Node.js version of eithor v10.13 or v12.0
    Ionic启动时提示:The Angular CLI requires a m
    在新建ionic项目后通过ionic serve 启动ionic项目时提示:The Angular CLI requires a minimum Node.js version of eithor v10.13 or v12.0  注:博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与
    03-16
  • react编译器jsxTransformer,babel
    1.JSX是什么JSX其实是JavaScript的扩展,React为了代码的可读性更方便地创建虚拟DOM等原因,加入了一些类似XML的语法的扩展。2.编译器——jsxTransformerJSX代码并不能直接运行,需要将它编译成正常的JavaScript表达式才能运行,jsxTransformer.js就是这一编
    03-08
  • 图书《React.js实战》代码下载
    图书《React.js实战》代码下载链接:https://pan.baidu.com/s/1kep0xsTeSupyr15c3VwmBw 提取码:9pra这个代码经过图书《React.js实战》作者的授权发布,请放心用于学习。禁止本下载代码用于任何形式的商用目的。
    03-08
  • React 上传进度条问题 原生js上传 input type=
    canUpload: true,//是否可以上传,初始值不可上传,所以disabled为truefilename: '',//上传文件的名称loading: false,//点击上传的时候出现加载图标fileList: [],//已上传的文件列表isNumber: true,//判断数量是否为数字,var file = document.getElementById(
    03-08
  • React的JSX语言
    React的JSX语言
      在传统的web开发中,推崇HTML与JavaScript文件分离。在FaceBook中却认为组件才是web开发中最重要的,为了将HTML文件嵌入在JavaScript代码中,facebook拓展了JavaScript这门语言,形成了jsx语言。     可以在JavaScript文件中正常写入HTML代码,在上一篇
    03-08
  • react——axios 和fetch-jsonp
    1.安装模块 npm install axios --save / npm install fetch-jsonp --save    2.在使用的页面引入import axios from 'axios'import fetchJsonp from 'fetch-jsonp';axiosimport React from 'react'import axios from 'axios'class Axios extends
    03-08
  • react中使用jsonp跨域
    https://www.npmjs.com/package/jsonp原生jsonp的使用1.yarn add jsonp --save2.import JsonP from 'jsonp'3.JsonP('url',{},function(err, data){  console.log(data)})2.封装import JsonP from 'jsonp'export default class Axios {static jsonp(op
    03-08
  • vscode 配置  typeScript+nodejs 和 react+typeScript 开发环境
    vscode 配置 typeScript+nodejs 和 react+type
     电脑环境:需要先安装好 1.  nodejs  (官网下载安装,安装8.0以上版本, 使用 node --version 查看是否安装成功)2.  npm  (安装好node时跟着就安装好了npm,使用 npm -v 查看是否安装成功)3.  typescript  (打开终端命令,输入 npm install -g t
    03-08
点击排行