美文网首页web前端WEB开发秘籍有趣的文章
JS设计模式(一) 单例模式

JS设计模式(一) 单例模式

作者: kMacro | 来源:发表于2017-04-22 10:49 被阅读441次

命名空间

单例模式是JavaScript中最常见的一种模式,通过这种模式可以为我们提供一个命名空间,例如jQuery库的命名空间为jQuery$。命名空间的使用是为了让代码更加整洁,在多人协作开发的情况下,不同的人定义的变量很有可能重复,此时就需要使用命名空间来约束每个人定义的变量,使相同名称的变量放在不同的命名空间中,避免相互干扰。例如:

// A程序员的命名空间
var A = {
    get: function(id){
        return document.getElementById(id);
    }
    css: function(id,key,value){
        get(id).style[key] = value;
    }
}
// B程序员的命名空间
var B = {
    get: function(className){
        return document.getElementByClassName(className)[0];
    }
    css: function(className,key,value){
        get(className).style[key] = value;
    }
}

A、B两个命名空间中都有一个get方法和一个css方法,用于元素获取和元素样式修改,不同的是A是通过id来获取元素,而B是通过class来获取元素,通过命名空间,可以使这些相同名称的方法共存,使用时指定相应的命名空间即可。

模块化

JavaScript中单例模式除了定义命名空间之外,还可用于管理代码库的各个功能模块。例如:

google.dom.addClass             // 添加元素类
google.dom.append               // 插入元素
google.event.stopPropagation    // 阻止事件冒泡
google.event.preventDefault     // 阻止默认行为
google.string.trim              // 去除字符串首尾空格
google.string.encodeHTML        // 将字符串进行HTML编码

以上各个模块都位于google命名空间下,每个模块都有属于自己的方法,使用时只需按照需求调用特定功能模块下对应的方法即可。

常量

JavaScript中并没有finalstatic这类关键字用来定义常量,但JavaScript非常灵活,通过常量只能访问不能修改这一特点,我们可以将变量保存在函数内部,并且只提供获取变量的方法,不提供设置变量的方法,通过闭包的方式使函数执行一次并返回相应的访问方法对象,最后将这个对象放在全局空间中作为常量单例对象使用。例如:

var Color = (function(){
    // 私有变量
    var color = {
        'RED': '#ff0000',
        'YELLOW': '#ffff00',
        'BLUE': '#0000ff'
    }
    // 返回访问方法对象
    return {
        // 常量获取方法
        get: function(name){
            return color[name] ? color[name] : null;
        }
    }
})();

var color = Color.get('BLUE');
console.log(color);    // #0000ff

本文为作者kMacro原创,转载请注明来源:http://www.jianshu.com/p/47100085e3a5

相关文章

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 单例模式Java篇

    单例设计模式- 饿汉式 单例设计模式 - 懒汉式 单例设计模式 - 懒汉式 - 多线程并发 单例设计模式 - 懒汉...

  • 设计模式 - 单例模式

    设计模式 - 单例模式 什么是单例模式 单例模式属于创建型模式,是设计模式中比较简单的模式。在单例模式中,单一的类...

  • 2018-04-08php实战设计模式

    一、单例模式 单例模式是最经典的设计模式之一,到底什么是单例?单例模式适用场景是什么?单例模式如何设计?php中单...

  • python中OOP的单例

    目录 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计模式 是 前人...

  • 单例

    目标 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计模式 是 前人...

  • js的4种设计模式及Vue小结(1)

    4种js设计模式 模块模式(module) 原型模式(prototype) 观察者模式(observer) 单例模...

  • 单例模式

    JAVA设计模式之单例模式 十种常用的设计模式 概念: java中单例模式是一种常见的设计模式,单例模式的写法...

  • 设计模式

    常用的设计模式有,单例设计模式、观察者设计模式、工厂设计模式、装饰设计模式、代理设计模式,模板设计模式等等。 单例...

  • 设计模式之单例模式

    单例设计模式全解析 在学习设计模式时,单例设计模式应该是学习的第一个设计模式,单例设计模式也是“公认”最简单的设计...

网友评论

本文标题:JS设计模式(一) 单例模式

本文链接:https://www.haomeiwen.com/subject/vvqszttx.html