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 相关文章推荐
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 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版本号
2006/10/09 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
PHP fclose函数用法总结
2019/02/15 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python卸载模块的方法汇总
2016/06/07 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python安装scipy的方法步骤
2019/06/26 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
教师辞职报告范文
2014/01/20 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
化工实习心得体会
2014/09/09 职场文书
奠基仪式致辞
2015/07/30 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Python字符串的转义字符
2022/04/07 Python