0

我正在编写一个应用程序，我一直将 jQuery 代码放在需要它的页面中。我只想了解它的工作原理。现在基本已经有了，我想重写所有的 javascript。将代码从单个页面传输到外部文件。

知道大部分 jQuery 代码都以如下内容开头：

$(function () {

});

我需要在模板中添加这样的内容还是什么？我试图把它放在外部文件中，但它似乎不起作用。

任何想法？

4

4 回答 4

3

当您处理 jQuery 时，您需要告诉它在页面准备就绪时加载，因此我们使用以下语法来帮助我们开始：

$(document).ready(function() {

    // jQuery code goes within here...

});

这当然是放在外部文件中的。现在，要在 HTML 页面中加载外部 jQuery 文件，只需包含以下行：

<script src="js/filename.js"></script>

我喜欢把它放在标签的最底部，<body>因为它会最后加载。如果加载大型 JavaScript 文件，因为首先加载所有 HTML，这一点尤其重要。

此外，您可能已经这样做了，但是在处理 jQuery 时，您需要确保您的页面中也包含所需的 jQuery 库文件。这应该在任何其他 jQuery 脚本之前加载。使用 CDN 是执行此操作的常用方法，如下例所示：

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>

希望这可以帮助。

于 2013-08-02T03:22:18.000 回答
1

没什么大不了的

在我看来，使用 jQuery 启动 javascript 文件的最佳方式是这样的

(function($){
    $(document).ready(function(){

        // All code here

    });
}(jQuery));

现在这段代码可以防止与 jQuery/Javascript 发生冲突，它只会在文档准备好使用时触发。这里的所有都是它的。只需确保您已加载 jQuery，并且您的自定义 javascript 文件在 jQuery 之后加载，您应该可以开始使用了。需要更多信息。只是评论。

$(function() {
   // ... 
});

是相同的

$(document).ready(function() {
   // ...
});
于 2013-08-02T03:34:20.147 回答
1

我总是使用“Unobtrusive Comprehensive DOM-ready Execution”

MAIN.util = (function($) {
    return {
        init: function () {
        var body = document.body,
            controller = body.getAttribute("data-controller"),
            action = body.getAttribute("data-action");

        MAIN.util.exec("common");
        MAIN.util.exec(controller);

            if(action && action.length) {
                MAIN.util.exec(controller, action);
            }

            try { MAIN.util.nav.init();
            } catch(e) { }
        },

        exec: function (controller, action) {
            var ns = MAIN,
            action = (!action) ? "init" : action;

            if(controller !== "" && ns[controller] && typeof(ns[controller][action]) === "function") {
                ns[controller][action]();
            }
        },
    };
}(jQuery));

是一个关于如何保持代码干净和组织的好方法......

希望这可以帮助 ：/

于 2013-08-02T03:20:51.350 回答
1

确保在您自己的代码之前包含您的 jQuery，如下所示：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="YOUR_PATH/custom.js"></script>

在您的代码中：

(function () {

})();

这将在 js 在浏览器中准备好后立即执行。这不是必须的，它只取决于您是否需要立即执行代码。它还将使您的代码保持封装，这意味着在其中声明的变量不太可能与其他代码冲突。但是，如果您的 javascript 仅处理事件，则没有必要。

例如

$('#YOUR_ELEMENT').on('click', function(){
  alert('It executed when you clicked me!');
});
于 2013-08-02T03:26:52.270 回答