Question

我想在不同的<script>代码块中使用相同的变量，而不会发生冲突。我的代码大致如下：

<html>
<head>
    <script type="text/javascript">
        ad = document.getElementById('sidebar1-ad');

        if (ad.getBoundingClientRect().width) {
            adWidth = ad.getBoundingClientRect().width;
        } else {
            adWidth = ad.offsetWidth;
        }

        ...
    </script>

    <script type="text/javascript">
        ad = document.getElementById('article-footer-ad');

        if (ad.getBoundingClientRect().width) {
            adWidth = ad.getBoundingClientRect().width;
        } else {
            adWidth = ad.offsetWidth;
        }

        ...
    </script>
</head>

<body> ... </body>
</html>

问题是，第二个代码块中的变量ad和adWidth似乎优先。

有没有一种方法可以在页面中的不同<script>标签中使用相同的变量名称而不会覆盖另一个？如果是这样，怎么样？

Answer 1

如果您可以更改脚本正文，只需将代码包装到匿名函数并立即调用它。此外，您需要使用var关键字来限制变量范围。

<script>
  (function() {

      var ad = document.getElementById('article-footer-ad');

      // your code here ...

  })(); // <-- this is an immediate call
</script>

此外，如果每个块中的代码相同，请考虑将其重构为单个函数并在其他代码块中使用

<script>
    // Common function

    function renderAd(adId) {

        var ad = document.getElementById(adId);

    }
</script>
...
<script>
    renderAd('sidebar1-ad');
</script>
...
<script>
    renderAd('article-footer-ad');
</script>

Answer 2

<html>
<head>
<script type="text/javascript">
(function()
{
    var ad = document.getElementById('sidebar1-ad');

    if (ad.getBoundingClientRect().width) {
        var adWidth = ad.getBoundingClientRect().width;
    } else {
        var adWidth = ad.offsetWidth;
    }

    ...
})();
</script>

<script type="text/javascript">
(function()
{
    var ad = document.getElementById('article-footer-ad');

    if (ad.getBoundingClientRect().width) {
        var adWidth = ad.getBoundingClientRect().width;
    } else {
        var adWidth = ad.offsetWidth;
    }

    ...
})();
</script>

......

不同的'<script>'标签中的相同变量没有它们发生冲突？</script>

2 个答案: