Question

我正在使用jquery，我对编写代码感到非常沮丧。几个月前我开始在JS和Jquery编写代码，我的代码看起来像这样：

$(document).ready(function(){

$(function(){// a function that applies a plugin to an element});

$(function(){// another function that applies a plugin to an element});

$(function(){// and another function that applies a plugin to an element});

$(function(){// yet another function that applies a plugin to an element});
});

$(function(){//functions applied to certain elements that does not require to be initially loaded})

基本上我之前所做的就是将所有内容都放在$（document）.ready

中

这就是我现在编码的方式

function a(){//a function that applies plugin to an element}

function b() {// another function}

$(document.ready(function(){a(); b();});

$(function(){//functions applied to certain elements that does not require to be initially loaded})

有点改进，但我不满意。如果我只想为某个页面调用某些功能怎么办？有办法实现这个目标吗？当我使用大量插件时，我真的很反感我的$（文档）变得如此巨大。

你如何在jquery中编写函数？

Answer 1

我建议至少使用命名空间来确保您不会污染全局命名空间。例如：

var myNameSpace = {
a: function(){//a function that applies plugin to an element},
b: function() {// another function}
};

$(document).ready(function() {

myNameSpace.a();

});

主要的好处是，您可以将代码划分为专注于特定任务的逻辑工作单元。这将使代码组织变得更加容易。

Rebecca Murphey对这个主题进行了精彩的写作，你可以在这里阅读：http://bit.ly/6og36U

您还可以将JS分成他们自己的唯一文件，并编写例程以利用jQuery的getScript（）方法按需加载必要的文件（http://docs.jquery.com/Ajax/jQuery.getScript）。关键是确定脚本中的依赖关系并在适当的时候加载.js文件。

Answer 2

我建议为整个网站提供一个Javascript文件。该文件应该只包含函数：

function a() { ... }
function b() { ... }

原因是，对于一个文件，它会被缓存一次（如果做得正确），那就是它。然后在我放的每个页面上使用内联JS：

$(function() {
  a();
  b();
});

我确实没有必要进行多次ready()来电。

这样做的原因是效率。您不希望执行不必要的Javascript，这就是为什么外部JS文件实际上什么也不做，只包括您可以调用的函数。然后每个页面只调用它需要的内容。此外，只需查看一个地方（页面）即可轻松找到它。

Answer 3

您可能会尝试将功能拆分为多个文件，并且只包含每个页面所需的功能。在每个文件中将是单独的$(document).ready(function(){ ... });

Answer 4

我认为有两种方法可以实现这一目标：

A：将JavaScript拆分为多个文件。（一个库文件，每个文件都有侧面特定的代码，也可以调用就绪函数。）

B：制作一个包含所有JavaScript的文件，然后使用这样的内联JavaScript文件：

var tasksToRun = [ function_a, function_b,...]

在库JavaScript中，检查全局变量并执行数组中引用的每个函数。

Answer 5

在我的应用程序中，我倾向于在闭包内编写应用程序的给定部分的所有函数，以避免名称空间问题。

这样的事情：

(function($) {
    function a() {
       // stuff
    }
    function b() {
       // stuff
    }
    // ...
    $(function() {
        // invoke dom ready setup methods here
    });
})(jQuery);

这有一个好处，就是让我的代码可以在其他可能正在使用原型或其他js库的页面中使用（在大型web应用程序中有许多开发人员，比如我正在使用的那个，保持名称空间干净很重要。）

我通常每个文件只有一次 ready次调用。该调用负责设置该文件中的所有相关内容。这允许每个文件排序充当“库”：想要使用该功能的开发人员必须将其包含在页面上并添加适当的标记，并且功能将自行设置。

我承认我从构建几个jQuery插件的方式中复制了这个布局。

我喜欢cletus对单个文件的建议，但仅限应用程序不是太大。如果你在一个文件中有太多东西，它就会很难维护。

在js中编码时的适当函数序列

5 个答案: