Question

我在标题中有两个jQuery脚本（注意订单）

<script type="text/javascript" src="basic_script.js"></script>
<script type="text/javascript" src="additional_script.js"></script>

两个脚本的基本结构如下：

jQuery(function(){
   //scriptsMainContent
});

我在switchFunction()的 scriptsMainContent 中定义了函数basic_script.js，但是当我在additional_script.js的 scriptsMainContent 中使用它时得到错误：

Uncaught ReferenceError: switchFunction is not defined

我做错了什么？

Answer 1

当您使用jQuery(function(){})时，您实际上是在匿名函数中。因此，您使用var声明的任何内容都将是函数范围，因此在该函数之外不可用。你可能得到的东西是这样的：

脚本1

jQuery(function(){
    var i_think_this_is_global_but_it_is_not = 'foo';
});

脚本2

jQuery(function(){
    console.log(i_think_this_is_global_but_it_is_not);  // logs 'undefined'
});

你想要的是：

脚本1

var i_am_global = 'foo';

jQuery(function(){
    i_am_global = 'bar';
});

脚本2

jQuery(function(){
    console.log(i_am_global);  // logs 'bar'
});

顺便说一句，在脚本中“污染”全局空间通常是一个糟糕的主意。这是处理这个问题的更好方法：

<script>
    // define globals
    var global = 'I'm a global!';
</script>
<!-- var 'global' will be available to the following scripts -->
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>

更好的处理方法仍然是删除对全局变量的依赖。例如，让script1.js和script2.js公开带有共享对象的函数（我称之为stuff1和stuff2）：

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
<script>
    var context = {
        foo = 'bar'
    }
    stuff1(context);  // exposed in script1.js
    stuff2(context);  // exposed in script2.js
</script>

更新：功能

OP在评论中透露，问题在于功能。具有函数的东西是它们在函数范围内始终声明。即使您没有明确地编写它，也始终存在隐式var。换句话说：

function foo() {
   // bar defined in foo scope
   function bar() {
   }
}

完全等同于：

function foo() {
    // bar (which happens to be a function)
    // defined in foo scope
    var bar = function() {
    }
}

在全局范围内显式定义函数而不实际处于全局范围内的唯一方法是知道全局对象的名称（如果您在浏览器中，则为window）：

function foo() {
    // bar defined in global (window) scope
    window.bar = function() {
    }
}

请注意，只有在从另一个函数中声明函数时，才需要使用上述方法（明确使用window）。这也在全局范围内声明了一个函数：

// declared in global scope
function foo() {
}

jQuery(function(){
    // declared in local scope
    function bar() {
    }
    // okay to use foo OR bar here
    foo();  // from global scope
    bar();  // from local scope
});

然后当你使用那个脚本时：

<script src="script.js"></script>
<script>
    foo();   // works, foo in global scope
    bar();   // fail, bar not in global scope
</script>

函数和jQuery

OP还继续询问在jQuery(function(){})之外的函数中使用jQuery选择器是否存在问题。答案是肯定的，没关系，因为该函数只是被声明，而不是被调用。你甚至可以在jQuery可用之前声明这些函数，只要你在jQuery准备好之前不调用它。例如：

<script>
    function foo() {
        // okay to use jQuery even though it hasn't been
        // defined yet; we're only declaring function
        $('#thing').text('hello from jQuery!');
    }
    foo();  // invocation: THIS will fail
</script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    foo();  // this will fail unless this script is located
            // AFTER the <body>
    jQuery(function(){
        foo();  // this is safe; jQuery is loaded AND
                // the DOM is ready
    });
</script>

Answer 2

switchFunction只在basic_script.js中的本地函数范围内。你需要将它移出jQuery（function（）{}）;在全球范围内使用。

UPD：

<强> base_scipt.js

function someFn(context) {
    alert('I have been runned from ' + context);
}

JQuery(function() {
    someFn('base_script.js');
});

<强> additional_scipt.js

JQuery(function() {
    someFn('additional_scipt.js');
});

您可能会看到2个警报，所有这些警报都将从“JQuery准备就绪”中调用。

Answer 3

    var t = jQuery.noConflict();
    and then your code //
t(function(){
   //code
});

jQuery处理不正常？

3 个答案: