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写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
javascript代码简写的几种常用方式汇总
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/01/23 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
常用DOM整理
2015/06/16 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
python tornado修改log输出方式
2019/11/18 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
酒店出纳岗位职责
2013/12/29 职场文书
运动会100米解说词
2014/01/23 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
老乡会致辞
2015/07/28 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
爱国之歌(8首)
2019/09/29 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js