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 qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
让table变成exls的示例代码
Mar 24 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
JS & JQuery 动态添加 select option
Jun 08 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
JSON的parse()方法介绍
Jan 31 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
微信小程序的日期选择器的实例详解
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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP序列化操作方法分析
2016/09/28 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
js断点调试经验分享
2017/12/08 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
JS实现放大镜效果
2020/09/21 Javascript
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
巴西手表购物网站:eclock
2019/03/19 全球购物
值传递还是引用传递
2015/02/08 面试题
超市营业员求职简历的自我评价
2013/10/17 职场文书
客服主管岗位职责
2013/12/13 职场文书
部队领导证婚词
2014/01/12 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
疾病防治方案
2014/05/31 职场文书
办理房产证委托书
2014/09/18 职场文书
销售人才自我评价范文
2014/09/27 职场文书
党委领导班子整改方案
2014/09/30 职场文书
幼师中班个人总结
2015/02/12 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers