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事件模型代码
Jul 01 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
JS实现的自定义map方法示例
May 17 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
Python中扩展包的安装方法详解
2017/06/14 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
pycharm创建一个python包方法图解
2019/04/10 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
自我鉴定范文
2013/11/10 职场文书
英文商务邀请信
2014/01/22 职场文书
财务出纳岗位职责
2014/02/03 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
公立医院改革实施方案
2014/03/14 职场文书
未婚证明书模板
2014/10/08 职场文书
营销与策划实训报告
2014/11/05 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
法律进社区活动总结
2015/05/07 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
Python实现拼音转换
2021/06/07 Python
Python MNIST手写体识别详解与试练
2021/11/07 Python