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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
本文实例讲述了NodeJS设计模式.分享给大家供大家参考,具体如下: 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直接返回,若不存在,则创建实例对象,并将实例对象保存在静态变量中,当下次请求时,则可以直接返回这个对象实例,这就确保了一个类只有一个实例对象.举个例子吧~一间学校刚刚起建还没有图书馆,有的同学就向领导提意见:"hey! 哥们,能不能帮我们建一个图书馆? "(想要一个图书馆实例),然后领导说:"no pro
-
学习JavaScript设计模式(单例模式)
单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池.全局缓存.浏览器的window对象.在js开发中,单例模式的用途同样非常广泛.试想一下,当我们单击登录按钮的时候,页面中会出现一个登录框,而这个浮窗是唯一的,无论单击多少次登录按钮,这个浮窗只会被创建一次.因此这个登录浮窗就适合用单例模式. 1.单例模式的使用场景 在使用一种模式之前,我们最好要知道,这种模式的使用场景.用了这么久的单例模式,竟全然不知!用它
-
深入理解JavaScript系列（25）：设计模式之单例模式详解
介绍 从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现.OK,正式开始. 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象. 正文 在JavaScript里,实现单例的方式有很多种,其中最简单的一个方
-
JavaScript实现设计模式中的单例模式的一些技巧总结
一.使用全局变量保存单例 这是最简单的实现方法 function Person(){ this.createTime=new Date(); } var instance=new Person(); function getInstance(){ return instance; } 加载该js时就创建一个Person对象,保存到instance全局变量中,每次使用都取这个对象.如果一次都没使用,那么创建的这个对象则浪费了,我们可以优化一下, var instance function getI
-
学习JavaScript设计模式之单例模式
一.定义 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 当单击登陆按钮,页面中出现一个登陆浮窗,这个登陆浮窗是唯一的,无论单击多少次登陆按钮,这个浮窗都只会被创建一次,那么这个登陆浮窗就适合用单例模式来创建. 二.实现原理 要实现单例并不复杂,使用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象. 三.假单例 全局变量不是单例模式,但在JavaScript开发中,我们经常会把全局变量当成单例来使用. var a = {}; 降低全
-
JavaScript设计模式之单例模式详解
最近项目不太忙,难得有时间看看书,平时挺喜欢js这门语言.也看过很多高级教程,觉得自己还是比较热衷于js的设计模式.这一次重温一下<JavaScript设计模式与开发实践>,开篇为单例模式. /** * pre 单例模式 * 定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点 * 应用:单例模式是一种常用的模式,有一些对象我们往往只需要一个, * 比如线程池.全局缓存.浏览器中的 window 对象等. */ //--------------singleton-01----------
-
JavaScript设计模式之单例模式实例
<Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型或强类型,静态或动态语言,命令式或说明式语言.每种语言都有天生的优缺点.一个牙买加运动员, 在短跑甚至拳击方面有一些优势,在练瑜伽上就欠缺一些. 术士和暗影牧师很容易成为一个出色的辅助,而一个背着梅肯满地图飞的敌法就会略显尴尬. 换到程序中, 静态语言里可能需要花很多功夫来实现装饰
-
js设计模式之单例模式原理与用法详解
本文实例讲述了js设计模式之单例模式原理与用.分享给大家供大家参考,具体如下: 关于设计模式,我的理解是它是业务代码的提前解决方案.意思就是说在没有真正的业务之前,设计模式就存在了,这个是显然的.设计模式是人长期从事业务总结的具有普通适用性的解决方案. 就个人来讲,写了太多的命令式编程代码,所谓命令式代码就是业务需要怎样就写怎么样的功能,比如添加一个点击事件,比如进行一个验证等扥.写就写了很少站在设计模式的角度或者前人的角度去改善代码. 不给自己找客观原因,最近开始关注设计模式,尝试从设计模式的
-
js设计模式中单例模式的简要说明
目录 一. 认识单例模式 二. 单例模式的分类 三. 具体实现和思想学习 1. 简单实现单例模式 2. 透明单例模式 3. 代理实现单例模式 4. js的单例模式 5. 通用惰性单例 四. 总结 一. 认识单例模式 单例模式的意思是,保证一个类只有一个实例,并且有一个接口供全局访问.它的作用就是防止频繁创建实例,浪费不必要的内存空间和资源消耗,那它有什么实用场景呢,假如我们在页面中有一个点击跳出一个弹窗操作,弹窗应该是唯一的,无论点击多少次它都应该被构建一次,那么这个弹窗就适合用单例模式来创建.
-
JS设计模式之单例模式（一）
命名空间 单例模式是JavaScript中最常见的一种模式,通过这种模式可以为我们提供一个命名空间,例如jQuery库的命名空间为jQuery或$.命名空间的使用是为了让代码更加整洁,在多人协作开发的情况下,不同的人定义的变量很有可能重复,此时就需要使用命名空间来约束每个人定义的变量,使相同名称的变量放在不同的命名空间中,避免相互干扰.例如: // A程序员的命名空间 var A = { get: function(id){ return document.getElementById(id);
-
JS 设计模式之：单例模式定义与实现方法浅析
本文实例讲述了JS 设计模式之:单例模式定义与实现方法.分享给大家供大家参考,具体如下: 良好的设计模式可以显著提高代码的可读性,降低复杂度和维护成本.笔者打算通过几篇文章通俗地讲一讲常见的或者实用的设计模式. 今天先从最简单的一个入手:单例模式. 文中的示例代码会使用 ES6 语法,尽量简化不必要的细节 概念 单例模式(Singleton)属于创建型的设计模式,它限制我们只能创建单一对象或者某个类的单一实例. 通常情况下,使用该模式是为了控制整个应用程序的状态.在日常的开发中,我们遇到的单例模
-
JS设计模式之责任链模式实例详解
本文实例讲述了JS设计模式之责任链模式.分享给大家供大家参考,具体如下: 责任链设计模式: 在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求.发出这个请求的客户端并不知道链上的哪一个对象最终处理这个请求,这使得系统可以在不影响客户端的情况下动态地重新组织和分配责任. 责任链模式涉及到的角色如下所示: ● 抽象处理者(Handler)角色:定义出一个处理请求的接口.如果需要,接口可以定义 出一个方法以设定和返回对下家的引
-
JS设计模式之观察者模式实现实时改变页面中金额数的方法
本文实例讲述了JS设计模式之观察者模式实现实时改变页面中金额数的方法.分享给大家供大家参考,具体如下: 观察者设计模式概念: 有时被称作发布/订阅模式,观察者模式定义了一种一对多的依赖关系,让多个观察者(每个处的主账号金额函数)对象同时监听某一个主题对象(修改子账号金额后调用的deliver的对象Publisher).这个主题对象在状态(调用deliver方法)发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 在一个会员管理系统中,主账号给子账号充值金额的功能. 场景:主账号有1000
-
JS设计模式之状态模式概念与用法分析
本文实例讲述了JS设计模式之状态模式概念与用法.分享给大家供大家参考,具体如下: 1. 概述 当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 2. 解决的问题 主要解决的是当控制一个对象状态转换的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同的一系列类当中,可以把复杂的逻辑判断简单化. function Context( _state ) { this.state = _state; this.request = function() { this.stat
-
JS设计模式之访问者模式定义与用法分析
本文实例讲述了JS设计模式之访问者模式定义与用法.分享给大家供大家参考,具体如下: 在访问者模式中,主要包括下面几个角色 1.抽象访问者:抽象类或者接口,声明访问者可以访问哪些元素,具体到程序中就是visit方法中的参数定义哪些对象是可以被访问的. 2.访问者:实现抽象访问者所声明的方法,它影响到访问者访问到一个类后该干什么,要做什么事情. 3.抽象元素类:接口或者抽象类,声明接受哪一类访问者访问,程序上是通过accept方法中的参数来定义的.抽象元素一般有两类方法,一部分是本身的业务逻辑,另外
-
JS 设计模式之：工厂模式定义与实现方法浅析
本文实例讲述了JS 设计模式之:工厂模式定义与实现方法.分享给大家供大家参考,具体如下: 前言 上次我们介绍了单例模式,没看过的小伙伴可以看这个链接: 浅析 JS 设计模式之:单例模式 今天来说一说一种常见的设计模式:工厂模式. 工厂模式是一种创建对象的 创建型模式,遵循 DRY(Don't Repeat Yourself)原则.在该模式下,代码将会根据具体的输入或其他既定规则,自行决定创建哪种类型的对象.简单点儿说就是,动态返回需要的实例对象. 回顾上次的例子 让我们继续使用单例模式中的例子,