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 相关文章推荐
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
javascript整除实现代码
Nov 23 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
Vue制作Todo List网页
Apr 26 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 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 编程的 5个良好习惯
2009/02/20 PHP
php 文件上传类代码
2011/08/06 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
销售区域经理岗位职责
2015/04/10 职场文书
保护校园环境倡议书
2015/04/28 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python