代码之家 › 专栏 › 技术社区 › Martin Bean

向网站添加jQuery增强功能的最佳方法是什么?

jquery

Martin Bean · 技术社区 · 14 年前

一段时间以来,我一直在使用jQuery在我的网站上通过JavaScript提供增强功能。但是,我现在开始从性能的角度考虑组织函数文件的最佳方法是什么?

$(document).ready(function() {
    foo();
    bar();
});
function foo() {
    // do something here
};
function bar() {
    // do something else here, and so on...
};

但是,我看到过如下JavaScript文件布局:

$(document).ready(function() {
    $(selector).foo();
    $(selector).bar();
});
$.fn.foo = function() {
    $(this).each(function() {
        // do something here and return
    });
};
$.fn.bar = function() {
    $(this).each(function() {
        // do something here and return
    });
};

像第二个示例中那样扩展jQuery并将方法分配给选择器是否更好?还是可以将单个函数定义为第一个示例?

5 回复 | 直到 14 年前

Russ Cam 14 年前

这在很大程度上取决于(一概而论的答案!)。如果一个功能作为一个插件是有意义的,也就是说,可以在你的网站上以不同的方式重用,那么就把它变成一个插件。类似地,如果一个函数在任何地方都是有用的,比如一个日期解析函数,那么就把它变成一个实用函数。

我认为有几点确实值得记住- 范围和污染

范围
如果一个函数需要在一个使其他作用域中的函数可以访问的作用域中,那么就这样做。如果没有,就不要。它通向

污染
尽量不要用许多不同的函数来污染全局名称空间/对象。通过使用对象文字将代码组织成相关函数,以便在包含具有包含相关函数的属性的对象的全局对象上只创建一个属性。例如,

var date = {
    parse : function(s) {
        // some date parsing function
    },
    format : function(date, patten) {
        // some date formatting function
    }
}

总之,

当jQuery对象有意义时附加到它(可重用插件,公共实用程序函数)
使用对象文字对相关函数进行分组并防止污染

jAndy 14 年前

jQuery.fn globally 正下方 window 对象。

Mike Rifgin 14 年前

Nick Craver 14 年前

如果你的函数是在一组元素上运行的,并且你希望它们是可移植的,那么就选择插件路径(并且确保它们在一个外部文件中,用户不会下载每个页面负载)。如果他们对一组元素(例如任何jQuery链)进行操作,将它们作为插件是没有任何意义的。

我建议你需要在外面 document.ready 作用域,然后将它们放在其中以稍微清理全局命名空间,如下所示:

$(document).ready(function() {
  foo();
  bar();
  function foo() {
    // do something here
  }
  function bar() {
    // do something else here, and so on...
  }
});

太多了 影响页面速度的因素, Google has a pretty good resource with a rundown of each .

Chris 14 年前

性能不仅仅是衡量计算机解释和运行一段代码的速度。这是清洁的问题。还要考虑程序员维护和扩展代码的效率。全局命名空间中的大量函数很快就会成为维护的噩梦。

我们打个比方吧。

他们真正应该做的是把衣服放在抽屉里,每个抽屉里都有相似的东西——袜子放在最上面的抽屉里,裤子放在最下面的抽屉里,等等。

因此,最好的办法是尝试将尽可能多的“like”函数封装在某种容器中,比如jQuery插件。您不仅会发现查找和重用函数更容易,而且当需要更改某些功能的行为方式时,您还会发现剪切和更改代码更容易。