在jquery中添加方法的困惑

时间:2016-12-01 09:03:47

标签: javascript jquery

我正在尝试为jQuery添加一个新方法,以便我可以执行$('#id').MyOwnFunc()之类的操作。我的困惑来自各种网站和堆栈溢出我可以看到我可以使用这些方法之一:

// #1
jQuery.fn.MyOwnFunc = function() {
    var o = $(this[0]) // It's your element
    return this; // This is needed so others can keep chaining off of this
};

// #2
jQuery.fn.extend({
    MyOwnFunc: function() {
        return this.each(function() { 
            this.checked = true; 
        });
    },
});

因此,我们可以通过以上方式在jQuery上创建一个新方法,直接在fn上创建一个方法,并使用fn.extend,所以我的困惑是:

  1. 我的理解错了吗?
  2. 如果没有并且两者都可以使用,那么当我们已经有选项1时,为什么我们有fn.extend()
  3. 哪个是更好的选择?
  4. 请解释一下,因为我已经浏览了很多网站,但不明白为什么你有两种方式?

2 个答案:

答案 0 :(得分:0)

  

我的理解错了吗?

  

如果没有并且两者都可以使用那么为什么我们已经有了选项1时我们有fn.extend()?

这是因为extend()jQuery method,它允许您合并任意个对象的属性。在这种情况下,您将使用新代码扩展现有的$.fn对象,该对象包含可应用于选择器的所有方法。 extend()方法并非特定于插件创作。

  

哪个是更好的选择?

要么是好的。我倾向于你的第一种方法,即。不使用extend(),因为它更简洁。

答案 1 :(得分:0)

在JavaScript中,通常有多种方法可以做同样的事情。

在这种情况下,两件事情并不相同。

jQuery.fn用于添加jQuery插件,以便稍后您可以$('#something').myCoolPlugin();

jQuery.fn.extend允许您同时添加多个插件 ,而无需进行多次jQuery.fn次呼叫,例如:

jQuery.fn.extend({
    coolPlugin1: function() {
      // cool stuff
    },
    coolPlugin2: function() {
      // other cool stuff
    }
});

优于:

jQuery.fn.coolPlugin1 = function() {
  // cool stuff
};

jQuery.fn.coolPlugin2 = function() {
  // other cool stuff
};