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中数组对象的那些自带方法介绍
Mar 12 Javascript
Javascript玩转继承(一)
May 08 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
python万年历实现代码 含运行结果
2017/05/20 Python
Python实现的爬虫功能代码
2017/06/24 Python
简单了解什么是神经网络
2017/12/23 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
软件设计的目标是什么
2016/12/04 面试题
经理助理岗位职责
2014/03/05 职场文书
法律进社区实施方案
2014/03/21 职场文书
学风建设演讲稿
2014/09/12 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
婚宴邀请函
2015/01/30 职场文书
行为习惯主题班会
2015/08/14 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
vue ref如何获取子组件属性值
2022/03/31 Vue.js
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL