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实现画板的代码
Sep 05 Javascript
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
浅析Jquery操作select
Dec 13 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
vue-路由精讲 二级路由和三级路由的作用
Aug 06 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
python使用mailbox打印电子邮件的方法
2015/04/30 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
25道Java面试题集合
2013/05/21 面试题
日语专业毕业生自荐信
2013/11/11 职场文书
护士毕业实习感言
2014/03/05 职场文书
百年校庆节目主持词
2014/03/27 职场文书
开学寄语大全
2014/04/08 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
反四风对照检查材料
2014/09/22 职场文书
检讨书范文1000字
2015/01/28 职场文书
史上最牛辞职信
2015/05/13 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers