ajax - javascript的作用域问题
怪我咯
怪我咯 2017-04-10 14:31:13
[JavaScript讨论组]

一个文件中引用两个js文件,a.js
和b.js。
其中a.js和b.js文件中,有很多名称相同的函数和变量。
例如a.js中有:

var started = false;
var startX, startY;
function doMouseDown(event) {
    startX = event.pageX;
    startY = event.pageY;
    started = true;
}

var c = document.getElementById('s');
c.addEventListener("mousedown", doMouseDown, false);

b.js文件中也有很多类似的代码:

var started = false;
var startX, startY;
function doMouseDown(event) {
    startX = event.pageX;
    startY = event.pageY;
    started = true;

}

var c = document.getElementById('a');
c.addEventListener("mousedown", doMouseDown, false);

运行之后,会有很多冲突,怎么才能避免这种情况发生呢?

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(5)
天蓬老师

把他们用函数包起来。

(function(){
    var started = false;
    var startX, startY;
    function doMouseDown(event) {
        startX = event.pageX;
        startY = event.pageY;
        started = true;
    }

    var c = document.getElementById('s');
    c.addEventListener("mousedown", doMouseDown, false);
})();
怪我咯

两个文件下载好后,解析的时候都在同一个javascript顶级作用域下面 ,相当于一个js文件放了重复了两遍相同代码,不冲突才怪....

解决方法是:

  1. 把他们的作用域独立开,如@滕亦飞 的答案,用匿名函数包起来,因为是操作DOM的,所以要DOM Ready
  2. 给重复的变量,函数改名字
  3. ...我是小菜,等大神来回答
怪我咯

楼主应当蛋疼的是,如果a文件和b文件中还有互相引用的数据,那该怎么办?
简单的解决办法是用命名空间来控制,也就是命名个对象来控制作用域。
复杂就用AMD或者CMD的模块加载器来实现了。
比如require js或者seajs

ringa_lee

既然是一样的为什么不能保留一份服用呢?

想低耦合的话还可以试试各自封装成对象然后用事件来触发。

巴扎黑

首先,题主的代码可复用性太差,明明两段相似的代码,为什么要复制两遍啊!
其次,用匿名函数立即执行的办法来包裹代码,保证不污染全局空间。

(function(){
    var init = function (selector) {
        $(selector).data('state', {state:false});
        $(selector).mousedown(function(event){
            var state = $(this).data('state');
            state.startX = event.pageX;
            state.startY = event.pageY;
            state.started = true;
        });
    });

    //接下来你要绑定多少个对象都行了。
    init('#s');
    init('#a');
    init('.obj');
})();

偷懒直接用jQuery的写法了。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号