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


    命名空间

    单例模式是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。

  • 相关阅读:
    一个万能的工具包下载网站
    Keras框架简介
    发现了一个非常棒的pyqt5的例子集
    人脸识别常用数据集大全(12/20更新)
    用 opencv和numpy进行图片和字符串互转,并保存至 json
    机器学习中的范数规则化-L0,L1和L2范式(转载)
    利用face_recognition库裁取人脸
    一招解决C盘空间不足,再也不怕硬盘爆满!
    【LeetCode】394.字符串解码(辅助栈、递归、详细图解)
    程序员那些事儿:女婿程序员
  • 原文地址:https://www.cnblogs.com/zkh101/p/7608877.html
Copyright © 2020-2023  润新知