顺便说一句......

Question

您好我正在尝试使用jQuery编写Web应用程序，我想将JS代码与HTML标记分开。这是代码：

FILE：index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Customer Search</title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
    ...
    <input type="button" id="button_batch_update" value="Save"/>

    <script type="text/javascript" src="js/customer_search.js"></script>
</body>

FILE：customer_search.js

!function($){
    $("#button_batch_update").click(function(e){
        e.preventDefault();
        alert("u clicked me!");
    });
}(window.jQuery);

我从bootstrap网站（http://twitter.github.io/bootstrap/javascript.html）复制了JS文件代码。它可以工作，但我真的不明白为什么外部JS文件可以工作。有人可以帮我解决这个问题吗？谢谢！

Answer 1

当您包含外部文件时，它实际上将其作为当前HTML页面的部分。

所以，如果你有一个如下所示的外部文件：

<script>

function myFunc(){

}

</script>

然后将其包含在HTML标题中，就好像该函数是在原始HTML文档中编写的一样：

<html>
<body>

    <script>

    function myFunc(){

    }

    </script>

</body>
</html>

因此允许你调用该函数。

顺便说一句......

虽然我们正在进行此讨论，但您可以通知您可以为许多其他类型的文件执行此操作，包括但不限于：

CSS
PHP
XML
...

Answer 2

在Javascript函数（）{}中是如何声明函数和函数（）{}（）将执行它。因此，当添加脚本文件时，浏览器会请求该脚本文件并执行其中的内容（基本上解析它，编译它并使其可用于支持您的html）。

所以

  < script src="js/jquery-1.9.1.min.js"></script >

将执行jquery代码。 jquery将自身附加到全局窗口对象。所以现在任何人都可以使用window.jQuery或简单地作为jQuery（推断全局）访问它。

然后当你的html找到你的脚本

function($){
    $("#button_batch_update").click(function(e){
         e.preventDefault();
         alert("u clicked me!");
    });
}(window.jQuery)

它正在执行它并将window.jQuery作为函数参数传递，在闭包中被接受为“$”。

调用外部jQuery文件

2 个答案:

顺便说一句......