javascript的作用域问题

Question

一个文件中引用两个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);

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

Answer 1

把他们用函数包起来。

(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);
})();

Answer 2

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

解决方法是：

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

Answer 3

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

Answer 4

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

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

Answer 5

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

(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的写法了。