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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
vue选项卡切换登录方式小案例
Sep 27 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
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
详解webpack babel的配置
2018/01/09 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python内置函数delattr的具体用法
2017/11/23 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Django之模板层的实现代码
2019/09/09 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
优秀员工年终发言演讲稿
2014/01/01 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
质量主管工作职责
2014/09/26 职场文书
python实现简单的聊天小程序
2021/07/07 Python
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js