JavaScript中多页面引用相同脚本使用防坑

前端页面引用公用脚本如jQuery.js等是很常见的一种方式,但近来修改同事的此类bug时,发现一个坑,特此记下。

bug出现基本情况如下:

最早开发的页面A,包含一个脚本JSA,后边项目新增的页面B,而它其中一部分使用的是A中一样的功能,而该功能的实现由JSA完成,因此,前边开发的人为了保持与页面A同步,也为了省事儿,直接在B页面引用JSA脚本实现。大概的页面关系如下:

页面A:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript"src="A/JSA.js"></script>
    <title>页面A</title>
</head>
<body>
//一些由JSA.js实现的功能按钮
<button>按钮1</button>
<button>按钮2</button>
<button>按钮...</button>
</body>
</html>

页面B:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript"src="A/JSA.js"></script>
    <title>页面B</title>
</head>
<body>
//一些由JSA.js实现的功能按钮
<button>按钮1</button>
<button>按钮2</button>
<button>按钮...</button>
</body>
</html>
这里可以看到,为了省事,页面B几乎没改任何东西,只是直接引入了页面A下的JSA就实现了同样的功能。但是,这里也就出现了问题。

但是后来测试反馈的结果是,页面A某些按钮的状态更新后,页面B并没有同步更新。跟踪脚本后发现了问题所在,发现页面B中的JSA并没有执行完,执行到某个语句的时候居然直接就停了,而且浏览器后台并没有报错(这种情况一起也发现过,比如某个对象的属性参数值写错了,但是并不会报错,执行到这里的时候就没下文了,很隐蔽)。而错误的原因是,脚本JSA中某个参数是在原先的A页面引入的脚本JSB定义并初始化,而此时页面B直接引用脚本JSA,并没有引入JSB,因此这个变量不存在,所以直接终止了,因此下边的语句,包括同步更新按钮状态的关键语句均没有执行,因此出错。

//JSA
function fB(){
    if(global_a){//全局变量global_a在页面A引入的其他脚本中定义,
        // 因此A执行到此处正常,但页面B在此处执行失败终止,并不会报错。

    }
    //以下是更新按钮状态的代码。在页面B中将执行不到此处,所以页面按钮更新失败
}

解决方法有以下几种:

1.不要图省事,在B页面单独写脚本,并将B页面无关的变量,语句去掉。

2.使用A页面的脚本JSA,但是要注意判断当前脚本是否在A页面执行,如果不是,跳过部分代码。


//JSA

function fB(){
    if(window.A != undefined)//判断是否是A页面执行,如果是继续执行
    {
        if(global_a){//B页面执行时,不会到这一句,因此不会出错


        }  
    }
   
    //以下是更新按钮状态的代码。执行正确。
}




  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

小猪zsz

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值