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 相关文章推荐
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
vue实现搜索过滤效果
May 28 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 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验证码函数的使用示例
2013/05/03 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
JS取request值以及自动执行使用示例
2014/02/24 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Python中特殊函数集锦
2015/07/27 Python
python实现文本文件合并
2015/12/29 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
SQL中where和having的区别
2012/06/17 面试题
易程科技软件测试笔试
2013/03/24 面试题
行政助理岗位职责
2013/11/10 职场文书
质检的岗位职责
2013/11/17 职场文书
总经理助理职责
2014/02/04 职场文书
党务公开方案
2014/05/06 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
联谊会开场白
2015/06/01 职场文书
《1942》观后感
2015/06/08 职场文书
叶问观后感
2015/06/15 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python