javascript中运用闭包和自执行函数解决大量的全局变量问题


Posted in Javascript onDecember 30, 2010

但是从全局看来,这样会导致出现一些让我们难以掌控的情况的出现:变量同名、多个函数共用一个全局变量后的值的变换……等等。所以,有时候,对于一些简单的全局变量,我们可以通过另一种方式来处理——用自执行函数+闭包的方法来解:

比如:我们要在网页加载时给出一个提示,在网页关闭时给出另一个提示
下面的代码,实现了以上功能

var msg1 = "欢迎光临!"; // 定义一个全局变量 
var msg2 = "再见!" //定了另一个全局变量 
window.onload = function() { 
alert(msg1); 
} 
window.onunload = function() { 

alert(msg2); 
}

这段代码中已经用到了两个全局变量。而只是为了实现一个简小的功能。
而且,全局变量太多,我们必须记住:msg1是欢迎时的变量,msg2是关闭时变量……如果变量更多,我们还能记得住吗?

下面是同样的功能,不过运用了自执行函数+闭包方法:

(function() { 
var msg = "Hello, world!"; 

window.onload = function() { 


alert(msg); 

} 
})(); 
(function() { 

var msg = "Hello, world!"; 

window.onunload = function() { 


alert(msg); 

} 
})();

后者做法,虽然代码增长了,但是:
1)msg变量只在各自的自执行函数内有效。不会和其它全局变量之间产生混淆。
2)代码的结构变得更加的清晰。
3)解决了大量使用全局变量的情况。

以上只是本人的一点认识,希望真正的高手给出点评!

Javascript 相关文章推荐
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
vue 图片裁剪上传组件的实现
Nov 12 Javascript
javascript中创建对象的三种常用方法
Dec 30 #Javascript
javascript 闭包疑问
Dec 30 #Javascript
javascript数字数组去重复项的实现代码
Dec 30 #Javascript
ExtJs的Date格式字符代码
Dec 30 #Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 #Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 #Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 #Javascript
You might like
HTML中嵌入PHP的简单方法
2016/02/16 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
网站上面有这种切换效果
2006/06/26 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python分治法定义与应用实例详解
2017/07/28 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
Django框架反向解析操作详解
2019/11/28 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
python绘制趋势图的示例
2020/09/17 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
国培远程培训感言
2014/03/08 职场文书
道路交通安全实施方案
2014/03/12 职场文书
政治学求职信
2014/06/03 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS