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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
详解JavaScript原型与原型链
Nov 16 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切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
angular4自定义组件详解
2017/09/28 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
Python random模块常用方法
2014/11/03 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
python 制作本地应用搜索工具
2021/02/27 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
普通员工辞职信
2014/01/17 职场文书
校运会广播稿100字
2014/01/27 职场文书
学校门卫岗位职责
2014/03/16 职场文书
新闻编辑求职信
2014/04/09 职场文书
2014年质检员工作总结
2014/11/18 职场文书
颐和园英文导游词
2015/01/30 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
亲情作文之母爱
2019/09/25 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android