zoukankan      html  css  js  c++  java
  • JavaScript设计模式——单例模式

    一、定义

      单例模式:又称单体模式,是只允许实例化一次的对象类。

    二、用途

      1. 命名空间的管理员

      如小张写的代码,就可以定义一个叫xiaozhang的命名空间,访问属性或方法的时候使用xiaozhang.xx;

      如小li写的代码,就可以定义一个叫xiaoli的命名空间,访问属性或方法的时候使用xiaoli.xx;

      

    var xiaozhang = {
        checkName: function () {
            // code
        },
        COUNT: 100
    };

      2.使模块分明

      可以通过单例管理代码块的各个模块。如我们定义了一个叫company的命名空间,当我们需要添加一个元素的时候,我们会放到dom模块;都让我们要添加一个事件方法的时候,我们会放到event模块。。。

      

    company.dom.addElement  // 添加元素
    company.event.addEvent    // 添加事件方法

      3.创建小型代码库

      在写自己的小型方法库的时候,可以使用单例来规范我们的各个模块。如有一个xingming库,它包含公共模块、工具模块、ajax模块和其他模块,那么我们可以按照如下指定自己的小型代码库:

      

    var xingming = {
        Util: {
            util_method1: function () {},
            util_method2: function () {}
            // ... 
        },
        Tool: {
            Tool_method1: function () {},
            Tool_method2: function () {}
            // ...
        },
        Ajax: {
            Ajax_method1: function () {},
            Ajax_method2: function () {}
            // ...
        },
        Others: {
            others_method1: function () {}
            // ...
        }
    };

    // 调用
    xingming.Util.Util_method1();

      4.管理静态变量

      JavaScript中根本没有static关键字,所以定义任何变量理论上都是可以被访问和修改的,也因此在JavaScript中创建静态变量又显得很重要。

      根据静态变量只能访问不能修改且无创建就能使用这一特点,我们可以将静态变量定义在函数内部,让函数执行一次,然后只提供获取变量的方法,不就即可限制变量被修改又可以让外界访问变量了么?

      

    var single = (function () {
        var conf = {
            COUNT: 100,
            MAX_AGE: 30
        };
    
        return {
            get: function (name) {
                return conf[name] ? conf[name] : null;
            }
        };
    })();
    
    var res = single.get('COUNT');
    console.log(res)

      5.惰性单例

      有时,对于单例对象需要延迟创建,我们称这种形式为“惰性单例”。实现如下:

    var lazySingle = (function () {
        var _instance = null;
    
        function Single() {
            // 在这里定义私有属性和方法
            return {
                COUNT: 100,
                MAX_AGE: 30
            };
        };
    
        return function () {
            if (!_instance) {
                _instance = Single();
                return _instance;    
            }; 
        };
    })();
    
    console.log(lazySingle().COUNT)
  • 相关阅读:
    Element-ui 复选框使用问题
    脚手架 oss 直传
    门外汉 avue使用
    cookie关闭浏览器清除
    关于(Incorrect string value: 'xF0x9Fx8ExBE' for column 'xxx' at row)报错
    扫码登录
    微信支付
    vue 腾讯地图 javaScriptAPI GL 多个markers自适应 (3)
    vue props 一次性传多个值
    vuex 的简单使用
  • 原文地址:https://www.cnblogs.com/zhangxiaos/p/6417942.html
Copyright © 2011-2022 走看看