JS单例模式在工作中的使用
为了尽可能的减少全局变量的污染,在写js的时候可以采用单例模式,形式如下:
比如有一个js叫demo.js,那么我们可以在js里这样写:
var demo = {}
这样做的目的是将整个js当成一个对象,这样暴露在外的全局变量就只有demo这一个命名,不像我们平常写直接写很多函数,这都是对全局空间的一种污染,一旦项目中别人也取了同样的名称,那么就容易出问题了。
function xxx1(){}
function xxx2(){}
function xxx3(){}
同时为了方便维护管理js,还可以对demo内部进行划分模块,可以按照页面划分,也可以按照具体功能模块划分。
比如按照页面划分的写法:
var demo = {
page1: {
setSlide:function(){
//这里去进行轮播图的相关设置
}
},
page2: {
setSlide:function(){
//这里去进行轮播图的相关设置
}
}
}
可以看到,如果单纯按照页面去划分,那么页面与页面的之间的js可以分离的很清楚,但是也有一个弊端,即如果两个甚至多个页面拥有相同的功能,那么会需要去调用其它页面的js,这样不是很利于维护。
所以我们还可以按照功能+页面混合模式来划分模块,例如:
var demo = {
// 将所有的公用功能抽离集成在一个模块里
base:{
setSlide: function(){
// do something
}
},
page1: {
_setSlide: function(){
// 直接调用通用方法
demo.base.setSlide();
}
},
page2: {
_setSlide: function(){
// 直接调用通用方法
demo.base.setSlide();
}
}
}
以上代码只是举个例子,我们可以进一步完善一下:
var demo = {
// 将所有的公用功能抽离集成在一个模块里
base:{
setSlide: function(){
// do something
}
},
page1: {
Init: function(){
this._setSlide().verify();
},
_setSlide: function(){
// 直接调用通用方法
demo.base.setSlide();
//还可以做其他事情
......
// 返回this,那么就能实现链式调用了
return this;
},
verify:function(){
//做些事情
......
}
},
page2: {
Init: function(){
this._setSlide();
},
_setSlide: function(){
// 直接调用通用方法
demo.base.setSlide();
//还可以做其他事情
}
}
}
可以看到,我们在每个页面模块里增加了一个Init方法,我们可以叫它页面初始化方法,它的作用就是集中调用其它方法,相当于这个页面的入口,这样我们只要看到这个方法就大概能知道我们调用了哪些方法了,而不需要在页面里去分别的调用。维护起来更方便些。
关于在工作中使用单例模式的方法就说到这了,有不足的地方欢迎大神指点,有不懂的地方欢迎留言。
JS单例模式在工作中的使用的更多相关文章
- 工作中使用seajs后的一些总结
工作中用seajs一段时间了,小小地总结一下. 使用seajs五部曲: 1.布置你项目的目录结构 2.设置seajs的config项,我一般是单独一个js文件--> seajs-config.j ...
- 工作中常用的js、jquery自定义扩展函数代码片段
仅记录一些我工作中常用的自定义js函数. 1.获取URL请求参数 //根据URL获取Id function GetQueryString(name) { var reg = new RegExp(&q ...
- [工作中的设计模式]单例模式singleton
一.模式解析: 单例模式是最简单和最常用的设计模式,面试的时候,不管新毕业的学生还是已经工作多年的筒子,对单例模式基本都能聊上两句.单例模式主要体现在如下方面: 1.类的构造函数私有化,保证外部不能直 ...
- 原生js(form)验证,可以借鉴下思路,应用到工作中
我在工作中时常使用form验证,在目前的公司做的表单验证用的angular的form组件,对于一个有追求的前端,或者应用在移动端写个form验证,引入angular或者jquery组件等验证,难免显得 ...
- 记录下工作中使用的pdf.js
在工作中遇到一个通过网页的形式浏览pdf文件以及图片的需求,图片简单,直接通过网页的形式打开这个图片的URL即可.而pdf这边,通过查询发现有一个名为pdf.js的神器. 简单介绍下,它可以在html ...
- JS 单例模式
<parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型 ...
- [工作中的设计模式]原型模式prototype
一.模式解析 提起prototype,最近看多了js相关的内容,第一印象首先是js的原型 var Person=function(name){ this.name=name; } Person.pro ...
- 浅谈js单例模式
单例模式就是在系统中保存一个实例,就是一个全局变量,在团队开发中,为了实现一些相似的功能,比如不同页面之间的表单验证,可能需求是不一样的,但是呢命名可能一样,这时就会产生冲突,这时候单例模式就能很好的 ...
- php单例模式在数据库连接中的使用
今天同事问到一个关于单例模式在php中是否有用的问题,我们知道,单例的目的是为了避免重复生产相同的对象,一般情况在数据库连接中,为了避免多次拿到相同数据库连接,使用到单例模式,我们来看一下单例模式数据 ...
随机推荐
- 《图说VR入门》——Unity插件DK2使用教程
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/53339254 作者:car ...
- 11-[CSS]-标准文档流,display,浮动,清除浮动,overflow
1.标准文档流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 在Javascript中 声明时用"var"与不用"var"的区别,== 和 ===的区别
今天,被问到两个JS问题,当时没回答到重点,问题虽然看起来简单,但是细节却马虎不得,在此做下记录: 1. 在Javascript中 声明时用"var"与不用"var&qu ...
- Eclipse实用插件
Eclipse实用插件 安装:Help - Eclipse Marketplace 查看图片:QuickImage 主题:Darkest Dark 代码风格:https://blog.csdn.net ...
- Unity依赖注入(笔记)
一.介绍 控制反转(Inversion of Control,简称IoC):整洁架构思想,不允许内部获知外部的存在,这就导致了我们必须在内层定义与外层交互的接口,通过依赖注入的方式将外层实现注入到内部 ...
- linux centos7 nginx 安装部署和配置
1/什么是NginxNginx("enginex")是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP代理服务器,在高连接并发的情况下Nginx是Apac ...
- SAO Utils – SAO风格启动菜单
SAO Utils 是一款拥有 SAO(刀剑神域)外观风格的启动器,搭载各种各样强大的小工具. 随时随地.在屏幕任何地方 按住鼠标左键和右键并向下拖动 即可呼出应用启动菜单(触控设备直接支持双指下滑手 ...
- spring cloud 入门系列:总结
从我第一次接触Spring Cloud到现在已经有3个多月了,当时是在博客园里面注册了账号,并且看到很多文章都在谈论微服务,因此我就去了解了下,最终决定开始学习Spring Cloud.我在一款阅读A ...
- git解决代码提交冲突
树冲突文件名修改造成的冲突,称为树冲突.比如,A同事把文件改名为A.C,B同事把同一个文件改名为B.C,那么B同事将这两个commit合并时,会产生冲突.如果最终确定用B同事的文件名,那么解决办法如下 ...
- 如何配置php客户端(phpredis)并连接Redis--华为DCS for Redis使用经验系列
使用php连接Redis.Memcache等都需要进行扩展,以CentOS为例,介绍phpredis的客户端环境搭建. 第0步:准备工作 华为云上购买1台弹性云服务器ECS(我选了CentOS 6.3 ...