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


Posted in Javascript onSeptember 29, 2017

命名空间

单例模式是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中并没有final、static这类关键字用来定义常量,但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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
写自已的js类库需要的核心代码
Jul 16 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
vue-test-utils初使用详解
May 23 Javascript
微信小程序的日期选择器的实例详解
Sep 29 #Javascript
JS设计模式之惰性模式(二)
Sep 29 #Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 #Javascript
详解用Node.js实现Restful风格webservice
Sep 29 #Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 #Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 #jQuery
vue axios同步请求解决方案
Sep 29 #Javascript
You might like
yii2中使用Active Record模式的方法
2016/01/09 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
js 计算图片内点个数的示例代码
2019/04/04 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
青年创业培训欢迎词
2014/01/10 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
派出所所长先进事迹
2014/05/19 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android