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

最新推荐文章于 2022-06-18 15:08:17 发布

猪sir喝咖啡

最新推荐文章于 2022-06-18 15:08:17 发布

阅读量1k

点赞数

文章标签： JavaScript 多页面引用相同脚本

本文链接：https://blog.csdn.net/u014084956/article/details/79719115

版权

前端页面引用公用脚本如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页面执行时，不会到这一句，因此不会出错


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

猪sir喝咖啡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中多页面引用相同脚本使用防坑

前端页面引用公用脚本如jQuery.js等是很常见的一种方式，但近来修改同事的此类bug时，发现一个坑，特此记下。bug出现基本情况如下：最早开发的页面A，包含一个脚本JSA，后边项目新增的页面B，而它其中一部分使用的是A中一样的功能，而该功能的实现由JSA完成，因此，前边开发的人为了保持与页面A同步，也为了省事儿，直接在B页面引用JSA脚本实现。大概的页面关系如下：页面A：&lt;!DOCTYP...
复制链接

扫一扫