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.extend函数扩展自己对象的js代码
Dec 09 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
JavaScript实现点击自制菜单效果
Feb 02 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 imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
php中异常处理方法小结
2015/01/09 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
python私有属性和方法实例分析
2015/01/15 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
大学生的应聘自我评价
2013/12/13 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
运动会加油稿
2015/07/22 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android