JS设计模式(一) 单例模式
命名空间
单例模式是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
本文为作者kMacro原创,转载请注明来源:http://www.jianshu.com/p/47100085e3a5。
JS设计模式(一) 单例模式的更多相关文章
- [JS设计模式]:单例模式(1)
什么是单例模式 所谓单例,就是一个类只有一个实例,实现的方法一般是先判断是否存在实例,如果存在就直接返回,如果不存在就创建了再返回.这样确保了一个类只有一个实例对象. 实现的单例有很多种方式,最简单的 ...
- js设计模式总结-单例模式
单例模式 解决的问题 保证实例只有一个,避免多个实现,从全局来看,这个实例的状态是唯一的. 实现原理 设置一个变量来记录实例,通过检测该变量是否为空来决定是否创建实例 非透明单例 所谓非透明就是用户在 ...
- JS设计模式之---单例模式
单例模式是保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式在现在面向对象的语言Java,C#,C++等等中也有很多用到,其实它在Javascript中使用同样非常广泛. var Cre ...
- JS设计模式之单例模式
单例模式 单例模式的定义是:保证一个类只有一个实例,并提供一个访问它的全局访问点.比如说购物车,在一个商城中,我们只需要一个购物车,购物车在整个商城中是唯一的,不需要多次创建,即使多次点击购物车按钮, ...
- JS 设计模式二 -- 单例模式
单例模式 概念 单例模式 就是保证一个类只有一个实例,并提供一个访问它的全局访问点. 实现方法 先判断实例是否存在,如果存在直接返回,如果不存在就创建实例后在返回,确保了一个类只有一个实例对象. va ...
- 浅谈js设计模式之单例模式
单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池.全局缓存.浏览器中的 window 对象等.在 JavaS ...
- JS设计模式之单例模式(一)
单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这 就确保了一个类只有一个实例对象. 在JavaScript里,实现单例的方式有很多种, ...
- Js常用的设计模式(1)——单例模式
<Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通 ...
- JS设计模式(一)
刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...
- js设计模式总结1
js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭 ...
随机推荐
- js 移动端识别手机号码
需求: 在移动端一个页面内多处有数字显示,其中希望能够自动识别我所要求的那个手机号码,点击可以拨打 探索: 首先想到的是头部的meta标签<meta name="format-dete ...
- Python3调用企业微信用于告警
前段时间利用py爬虫抓取一些网页信息,然后通过wxpy发送到微信群,以用作日常告警,感觉还是很方便. 但好景不长,我的小号微信被腾讯封了(很常见咯), 显示无法登录网页版微信,至今已经有半个多月了. ...
- Bash脚本编写初体验
上周例会的时候,冷不丁的接到了维护原有的安装脚本和编写升级.卸载脚本的任务,PM和几个同事一本正经的说,一天甚至30分钟就可以精通shell脚本编写,哪怕没有语言基础也可以. 当然,作为有着C++.P ...
- autoconf添加gcc调试选项
autoconf生成的编译选项默认是"-g -O2".这个"-g"选项将我迷惑了,以为生成了GDB调试所需的信息,所以也就没有管后面的"-O2“选 ...
- 通过response设置响应体
(1)响应体设置文本 PrintWriter getWriter() 获得字符流,通过字符流的write(String s)方法可以将字符串设置到response 缓冲区中,随后Tomcat会将res ...
- TC358749XBG:HDMI转MIPI CSI芯片简介
TC358749XBG是一颗HDMI转MIPI CSI功能的视频转换芯片,分辨率:1920*1080,电源3.3/1.8/1.2,通信方式:IIC,封装形式BGA80
- sed修炼系列(一):花拳绣腿之入门篇
本文为花拳绣腿招式入门篇,主要目的是入门,为看懂sed修炼系列(二):武功心法做准备.虽然是入门篇,只介绍了基本工作机制以及一些选项和命令,但其中仍然包括了很多sed的工作机制细节.对比网上各sed相 ...
- docker 添加国内源
docker for mac 获取地址:dao镜像地址  # 163的地址 https://hub-mirror.c.163.com docker for mac的设置操作:   点击Apply ...
- Ubuntu 14.04 安装LNMP(nginx/1.12.1+php7.1.9+mysql5.7.19)环境
这篇教程中,我们将讨论怎样在Ubuntu 14.04搭建LNMP环境 1 安装Nginx 首先我们要更新apt源 sudo add-apt-repository ppa:nginx/stable s ...
- CSS编码技巧
前面的话 本文将从DRY.currentColor.inherit和合理使用简写这几方面来详细介绍CSS编码技巧 DRY DRY,即don`t repeat yourself,尽量减少代码重复 在软件 ...