为了尽可能的减少全局变量的污染,在写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单例模式在工作中的使用的更多相关文章

  1. 工作中使用seajs后的一些总结

    工作中用seajs一段时间了,小小地总结一下. 使用seajs五部曲: 1.布置你项目的目录结构 2.设置seajs的config项,我一般是单独一个js文件--> seajs-config.j ...

  2. 工作中常用的js、jquery自定义扩展函数代码片段

    仅记录一些我工作中常用的自定义js函数. 1.获取URL请求参数 //根据URL获取Id function GetQueryString(name) { var reg = new RegExp(&q ...

  3. [工作中的设计模式]单例模式singleton

    一.模式解析: 单例模式是最简单和最常用的设计模式,面试的时候,不管新毕业的学生还是已经工作多年的筒子,对单例模式基本都能聊上两句.单例模式主要体现在如下方面: 1.类的构造函数私有化,保证外部不能直 ...

  4. 原生js(form)验证,可以借鉴下思路,应用到工作中

    我在工作中时常使用form验证,在目前的公司做的表单验证用的angular的form组件,对于一个有追求的前端,或者应用在移动端写个form验证,引入angular或者jquery组件等验证,难免显得 ...

  5. 记录下工作中使用的pdf.js

    在工作中遇到一个通过网页的形式浏览pdf文件以及图片的需求,图片简单,直接通过网页的形式打开这个图片的URL即可.而pdf这边,通过查询发现有一个名为pdf.js的神器. 简单介绍下,它可以在html ...

  6. JS 单例模式

    <parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型 ...

  7. [工作中的设计模式]原型模式prototype

    一.模式解析 提起prototype,最近看多了js相关的内容,第一印象首先是js的原型 var Person=function(name){ this.name=name; } Person.pro ...

  8. 浅谈js单例模式

    单例模式就是在系统中保存一个实例,就是一个全局变量,在团队开发中,为了实现一些相似的功能,比如不同页面之间的表单验证,可能需求是不一样的,但是呢命名可能一样,这时就会产生冲突,这时候单例模式就能很好的 ...

  9. php单例模式在数据库连接中的使用

    今天同事问到一个关于单例模式在php中是否有用的问题,我们知道,单例的目的是为了避免重复生产相同的对象,一般情况在数据库连接中,为了避免多次拿到相同数据库连接,使用到单例模式,我们来看一下单例模式数据 ...

随机推荐

  1. [Deep-Learning-with-Python]神经网络入手学习[上]

    神经网络入手[上] [x] 神经网络的核心部分 [x] Keras介绍 [ ] 使用Keras解决简单问题:分类和回归 神经网络剖析 神经网络的训练与下列对象相关: 网络层Layers,网络层结合形成 ...

  2. 7-[CSS]-css介绍,引入方式

    1.CSS介绍:层叠样式表(Cascading Style Sheets) 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前 ...

  3. 为什么volatile不能保证原子性?

    为什么volatile能替代简单的锁,却不能保证原子性?这里面涉及volatile,是java中的一个我觉得这个词在Java规范中从未被解释清楚的神奇关键词,在Sun的JDK官方文档是这样形容vola ...

  4. UWP 使用HttpClient获取网页数据

    我的App自然灾害中,为了展示地震的各种信息,就需要从网页上获取地震源数据. 如图所示,我们需要展示 地震等级.地震发生时间.经纬度.震源深度.地震位置等信息. 那么,假设给了一个地震的源,中国地震台 ...

  5. 转载-30分钟搞定后台登录界面(103个后台PSD源文件、素材网站)

    原文:30分钟搞定后台登录界面(103个后台PSD源文件.素材网站)   目录 一.界面预览 二.PSD源文件预览 三.工具分享 四.资源说明 五.素材下载网站 六.下载 去年八月时要做一个OA系统为 ...

  6. shell 本地接口自动化

    一.基于http/https的接口 一般情况下,当前大多公司在做接口自动化的时候都会使用一些工具:比如:postman/jmeter/python自研开发接口平台... 以上的情况,都是在源码与测试使 ...

  7. EasyUI系列学习笔记(一)——注册

    前面介绍过EasyUI是一个前段框架,开发之前需要导入底层包:我这里采用的是EasyUI 1.4版本~ 今天主要是搭建一个EasyUI的环境,同时做一个登陆页面... 环境搭建 导入需要的文件到项目中 ...

  8. 算法设计:UNION-FIND算法实现

    在上周的算法设计课程中,我们学习了UNION-FIND算法,该算法用来对不相交集进行查询与合并操作,但任何优秀的算法都必须要用实际的代码来进行实现,接下来我们就来看看具体的代码实现 1. 不相关集数据 ...

  9. 深入理解C/C++二维数组

    深入理解C/C++二维数组 前言 本来以为自己对二维数组的理解还可以,没感觉有什么,但是今天小伙伴问了一个问题感觉迷惑了好久,于是决定细致的记录一下,一步一步的探究各种关于二维数组的问题,巩固基础. ...

  10. [转载]使用mpvue搭建一个初始小程序

    1. 初始化一个 mpvue 项目 现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 Node.js 是否安 ...