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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
layui使用数据表格实现购物车功能
Jul 26 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
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
PHP基础知识介绍
2013/09/17 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP创建XML接口示例
2019/07/04 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
Vue实现简单购物车功能
2020/12/13 Vue.js
python实现爬虫下载美女图片
2015/07/14 Python
python绘制圆柱体的方法
2018/07/02 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
活动总结报告范文
2014/05/04 职场文书
出生证明范本
2015/06/15 职场文书
python如何在word中存储本地图片
2021/04/07 Python
使用nginx配置访问wgcloud的方法
2021/06/26 Servers