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

 更新时间:2010年12月30日 19:56:15   作者:  
做为一个javascript新手,为了程式的简便,可能会在javascript中运用了大量的全局变量,虽然一时看来,问题解决了,而且也可能让编码变得更加的简单。
但是从全局看来,这样会导致出现一些让我们难以掌控的情况的出现:变量同名、多个函数共用一个全局变量后的值的变换……等等。所以,有时候,对于一些简单的全局变量,我们可以通过另一种方式来处理——用自执行函数+闭包的方法来解:

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

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)解决了大量使用全局变量的情况。

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

相关文章

  • JS实现table表格数据排序功能(可支持动态数据+分页效果)

    JS实现table表格数据排序功能(可支持动态数据+分页效果)

    这篇文章主要介绍了JS实现table表格数据排序功能(可支持动态数据+分页效果) 的相关资料,非常不错,具有参考借鉴价值,需要的朋友一起看看吧
    2016-05-05
  • Javascript中的奇葩知识,你知道吗?

    Javascript中的奇葩知识,你知道吗?

    这篇文章主要介绍了一些Javascript中的奇葩知识,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2021-01-01
  • JavaScript实现的3D旋转魔方动画效果实例代码

    JavaScript实现的3D旋转魔方动画效果实例代码

    在本篇文章里小编给大家整理了关于JavaScript实现的3D旋转魔方动画效果实例代码,有兴趣的朋友们测试下。
    2019-07-07
  • js实现tab切换效果

    js实现tab切换效果

    本文主要分享了js封装一个tab切换效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 通过示例演示理解javascript预解析

    通过示例演示理解javascript预解析

    这篇文章主要为大家介绍了通过示例演示理解javascript预解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-03-03
  • JS实现图片放大镜效果的方法

    JS实现图片放大镜效果的方法

    这篇文章主要介绍了JS实现图片放大镜效果的方法,实例分析了magnifier.js插件的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • js中如何向数组中添加元素unshift()方法

    js中如何向数组中添加元素unshift()方法

    这篇文章主要介绍了js中如何向数组中添加元素unshift()方法,具有很好的参考价值,希望对大家有所帮助,
    2023-12-12
  • bootstrap实现嵌套模态框的实例代码

    bootstrap实现嵌套模态框的实例代码

    这篇文章主要介绍了bootstrap实现嵌套模态框的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • 详解微信小程序中数据双向绑定如何实现

    详解微信小程序中数据双向绑定如何实现

    最近在小程序的开发过程中,需要用到双向绑定,遇到报错才知道微信本身是不支持对象双向绑定的,鏖战一番找到解决方案,下面这篇文章主要给大家介绍了关于微信小程序中数据双向绑定如何实现的相关资料,需要的朋友可以参考下
    2023-05-05
  • ES6中非常实用的新特性介绍

    ES6中非常实用的新特性介绍

    ECMAScript 6离我们越来越近了,作为它最重要的方言,Javascript也即将迎来语法上的重大变革,InfoQ特开设“深入浅出ES6”专栏,来看一下ES6将给我们带来哪些新内容
    2016-03-03

最新评论