单例模式的实现方式

最新推荐文章于 2024-08-17 12:54:01 发布
最新推荐文章于 2024-08-17 12:54:01 发布
阅读量67 收藏
点赞数
分类专栏： JavaScript 文章标签： echarts javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42374676/article/details/120723768
版权
这篇博客详细介绍了Echarts中单例模式的应用，通过多个JavaScript示例展示了如何使用单例模式减少代码重复，提高效率。内容包括基本的单例模式实现、全局变量即时调用、惰性函数处理单例模式以及考虑浏览器兼容性的单例模式实现。同时，还探讨了单例模式的改进方法，如原型链继承和构造器修正。
摘要由CSDN通过智能技术生成

用途: 设计模式 在echarts 中表现得淋漓尽致, init 初始化 系统文件, 单例模式,让每一个初始化,都是同一个,减少代码重复;例如:利用惰性函数,处理数据,浏览器兼容!

单例模式实现


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    设计模式 在echarts 中表现得淋漓尽致, init 初始化 系统文件, 单例模式,让每一个初始化,都是同一个,减少代码重复
    <!--  -->
    <script>
        function Person() {

        }
        let p1 = new Person()
        let p2 = new Person()
        p1 == p2  // 为true  单例模式 特点  提出
    </script>
    <script>
        // 单例 全局模式
        let global;
        function Person() {
            if (global) {
                return global
            }

            this.name = '我是全局模式!'
            global = this;
        }
        let p3 = new Person();
        let p4 = new Person()
        console.log(p3, p4, p3 == p4)
    </script>
    <script>
        // 静态属性
        function Person() {
            if (Person.foctry) {
                return Person.foctry
            }

            this.name = '我是静态属性!'

            Person.foctry = this
        }
        let p5 = new Person();
        let p6 = new Person()
        console.log(p5, p6, p5 == p6, '===')

        Person.foctry = 'demo';
        var p7 = new Person();
        console.log(p5, p7, p5 == p7, '===')
    </script>
    <script>
        // 惰性函数处理 单例模式
        function Person() {
            let global;
            this.name = '我是惰性函数单例模式!'
            global = this;
            Person.prototype.name = '原始';

            // 在这里重新 复制函数地址 (不是原来的 Person 函数了)
            Person = function () {
                return global;
            }
        }
        Person.prototype.des = 'des';  // 第一次初始化的 原型对象
        let p8 = new Person();
        Person.prototype.hi = 'hi';    // 后面指的是 第一次初始化的原型对象  
        let p9 = new Person()
        console.log(p8, p9, p8 == p9, '=====')
    </script>
    <script>
        // 惰性函数的 原型链 继承
        function Person() {
            let global;
            this.name = '我是实例继承,对象!'

            // 3.利用惰性函数更新构造函数(赋值重写,下次利用)
            Person = function () {
                // this = obj2
                // this = obj3
                return global; // 第二次返回内容
            }
            Person.prototype = this  // 原型 继承实例
            global = new Person()
            // 6.修正构造器属性
            global.constructor = Person;
            return global // 第一次初始化,内容
        }
        Person.prototype.des = 'des';  // 因为原型链 被替换 所以des 没有
        let p10 = new Person();
        Person.prototype.hi = 'hi';    // 后面指的是 第一次初始化的原型对象  
        let p11 = new Person()
        console.log(p10, p11, p10 == p11, '=====')
    </script>
    <script>
        // 全局变量 及时调用
        let global1;
        (function () {
            var global1;
            Person = function () {
                if (global1) {
                    return global1;
                }
                this.name = '默认';
                global1 = this;
            }
        })();

        var p12 = new Person();
        var p13 = new Person();
        console.log(p12, p13, p12 == p13); // true

    </script>

    <script>
        // 兼容性
        var addEvent = (function () {
            if (document.addEventListener) {
                return function (type, element, fun) {
                    element.addEventListener(type, fun, false);
                }
            }
            else if (document.attachEvent) {
                return function (type, element, fun) {
                    element.attachEvent('on' + type, fun);
                }
            }
            else {
                return function (type, element, fun) {
                    element['on' + type] = fun;
                }
            }
        })();

        //  new 默认下会 返回这个实例对象,因此函数调用,return;  (代码重写)
        var Person1 = (function () {
            return Person1 = function () {
                if (Person1.foctry) {
                    return Person1.foctry;
                }
                this.name = '默认';
                Person1.foctry = this;
            }
        })()

        var p14 = new Person1();
        var p15 = new Person1();
        console.log(p14, p15, p14 == p15); // true

    </script>
</body>

</html>

单例模式二


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-单例模式的实现方式04(惰性函数改进)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
步骤:
    1.提供一个构造函数
    2.在构造函数内部声明一个私有变量instance
    3.利用惰性函数更新构造函数
    4.设置新构造函数的原型对象是旧构造函数的原型对象
    5.利用新构造函数创建对象并赋值给instance
    6.修正构造器属性
    7.通过instance设置属性或方法
    8.返回instance
<script>
    // 1.提供一个构造函数
    function Person() {
        // this = obj1
        // 2.在构造函数内部声明一个私有变量instance
        var instance;
        // 3.利用惰性函数更新构造函数
        Person = function () {
            // this = obj2
            // this = obj3
            return instance;
        }
        // 4.设置新构造函数的原型对象是旧构造函数的原型对象(原型式继承)
         // 设置新构造函数的原型对象是旧构造函数的一个实例(原型链继承)
        // Stu.prototype = Person.prototype
        // Stu.prototype = new Person();
//        Person.prototype = this.__proto__;
        Person.prototype = this;
        // 5.利用新构造函数创建对象并赋值给instance
        instance = new Person(); // instance = obj2
        // 6.修正构造器属性
        instance.constructor =  Person;
        // 7.通过instance设置属性或方法
        instance.name = '默认';
        // 8.返回instance
        return instance;
    }

    Person.prototype.des = 'des';
    var p1 = new Person(); // obj2
    Person.prototype.hi = 'hi';
    var p2 = new Person(); // obj2
//    console.log(p1 == p2); // true
//    console.log(p1.des); // des
//    console.log(p2.des); // des
//
//    console.log(p1.hi); // hi
//    console.log(p2.hi); // hi

    console.log(p1.constructor == Person); // true

</script>
</body>
</html>
web修理工
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Java 单例模式常见五种实现方式
c1441173216的博客
11-16 1128
单例模式，属于创建类型的一种常用的软件设计模式。”Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”。饿汉式与懒汉式实现，双检锁，volatile，synchronized，解决线程安全问题
单例模式各种实现方式
03-26
以下是几种常见的单例模式实现方式： 1. **饿汉式（静态常量）**： 这是最简单的实现方式，它在类加载时就完成了初始化，因此是线程安全的。 ```java public class Singleton { private static final Singleton...
javaWeb(二)单例模式
Felix的小黑板
10-28 450
-首先: -1将构造方法私有化 -2.定义一个静态成员方法 -饥饿模式 直接创建一个对象出来 private Student(){} private static Student student = new Student(); publicstatic Student getInstance(){ return student; }   -慵懒模式: 只有第一个使用的时候...
浅析JavaScript设计模式——单例模式
尐轩web前端网络日志
10-26 3188
单例模式 保证一个类仅有一个实例，并提供一个访问它的全局访问点 举一个通俗的例子，在页面中点击登录按钮，弹出了一个登录浮窗，这个登录浮窗是唯一的，无论我们单击多少次，浮窗只会创建一次其实我们可能无意中都会使用过单例模式，我们的做法往往都是使用一个变量来标志当前是否已经为某个类创建了对象， 如果true，那么下一次再想获得这个类的实例时，直接返回之前创建过的对象单例模式的核心是确保只有一个实例
快速理解设计模式：单例模式深入
热门推荐
张彦峰的博客
04-21 169万+
单例模式是指确保一个类在任何情况下都绝对只有一个实例，并提供一个全局访问点。实现方式介绍分析：饿汉式单例模式+懒汉式单例模式（双重检查锁）+静态内部类实现单例模式+注册式单例模式
【C++】C++ 单例模式总结（5种单例实现方法）
unonoi的博客
11-04 8万+
C++ 单例模式的几种实现方式。
java 单例模式实现的5种方式
qq_49983016的博客
04-12 1646
第一种：饿汉式 /** * Created with IntelliJ IDEA. * * @author: 宸濯 * Date: 2021/08/18 8:21 * Description:单例模式的设计(饿汉式) * 1.构造方法私有化 * 2.在静态语句块实例化 * 3.提供调用实例对象的方法 * 4.空间换时间，不管有没有调用方法，实例都创建了 * Version: V1.0 */ public class SingletonOne { private static
单例模式4种实现方式C++
笔记的博客
08-21 1069
假设在reorder的情况下：线程1走到赋值，但还没调用构造的阶段，而线程2进来判断m_instance，此时它已经被复制 所以不为空，这时候线程2就直接返回m_instance，但事实上它还没构造出来……因为编译器优化，指令的执行顺序可能reorder（CPU执行指令的层次，而且线程是在指令层次抢时间片的） ，可能变成这样：分配内存->赋值->调用构造(理想应该是：分配内存->调用构造->赋值）这样，编译时在编译的时候就知道，这个变量的整个赋值过程不能reorder，需要按照常规的流程走。...
C++ 单例模式 实现
暮色尽染的博客
07-17 1016
单例模式（Singleton Pattern）是一种创建型设计模式，它确保一个类只有一个实例，并提供一个全局访问点来访问该实例。
单例模式实现方式
qq_38348841的博客
03-13 1165
单例模式定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点 范围：一个虚拟机范围 本质：控制实例数目 主要实现： 懒汉式（延迟加载）、饿汉式 具体实现步骤： 构造方法私有化 提供获取实例的方法 把获取实例的方法变成静态的 定义存储实例的属性 把这个属性也定义成静态的 实现控制实例的创建getInstance（） 完整的实现 二者不同在于如何实现getInstance方法 优缺点： 时...
单例模式实现最好的方式即枚举实现
Cover_sky的博客
01-15 1182
可以看到代码中有一个static修饰的静态代码块，意味着在类加载阶段的加载阶段之后，会被调用进行初始化，那么我们知道，当一个Java类第一次被真正使用时静态资源被初始化，Java类的加载和初始化过程都是线程安全的，因为Java虚拟机在加载枚举类时，会使用ClassLoader的loadClass方法，而这个方法使用同步代码块保证了线程安全，如图所示。所以，创建一个enum类时线程安全的。根据Java规范的规定，每一个枚举类型及其定义的枚举变量在JVM中都是唯一的，也就是说，每一个枚举项在JVM中都是单例。
php单例模式实现方法分析
10-24
在给定的文件内容中，PHP单例模式实现方法分析的示例代码如下： ```php class Single { private $name; private static $single; private function __construct() { } public static function init() { if...
Java 单例模式实现
01-20
饿汉式 线程安全，调用效率高，但是不能延时加载。 public class Singleton { private static Singleton instance = new ...如果方法没有 synchronized，单例没有 volatile , 则线程不安全。 public class Singleton {
java单例模式及实现
09-22
Java单例模式及实现 Java单例模式是一种常见的设计模式，确保某一个类只有一个实例，而且向这个系统提供这个实例。单例模式可以分为三种：懒汉式单例、...每种方式都有其优缺点，需要根据具体情况选择合适的实现方式。
c#设计模式之单例模式的实现方式
12-26
场景描述 单例模式对于我们来说一点也不模式，是一个常见的名称，单例...单例模式实现方式有：饿汉式、懒汉式、双重验证式、静态内部类 下面分别对每一种实现方式做一个简单的实例，以及其优缺点 饿汉式 /// <summary>
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 278
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1110
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
CSS的:defined伪类：选择已定义元素的新选择器
最新发布
2401_85743969的博客
08-17 346
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
【无标题】
weixin_42348009的博客
08-14 170
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
单例模式实现方式包括饿汉式和懒汉式区别
03-27
单例模式是一种创建型设计模式，旨在确保一个类只有一个实例，并提供全局访问点。 饿汉式和懒汉式是单例模式的两种实现方式： 1. 饿汉式：在类加载时就创建了对象实例。这种方式的优点是线程安全，简单易用，缺点是会浪费一定的内存空间。 2. 懒汉式：在第一次使用时才创建对象实例。这种方式的优点是节省内存空间，缺点是需要考虑线程安全问题，需要加锁等较为复杂的处理方式。 总体来说，饿汉式更适合单例对象较小的情况，懒汉式更适合单例对象较大的情况。同时，需要考虑多线程下的并发访问问题，可以通过加锁等方式解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web修理工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值