将jQuery自定义函数转换为JavaScript代码

Question

我最近用 jQuery 写了这个东西

$.fn.my_cus_fn = function(){
    $(this.selector).click(function(e) {
        // do stuff
    });
    $(this.selector).focus(function(e) {
        // do stuff
    });
    // ................    
}

然后我像这样使用它。

$('#my_action1').my_cus_fn();
$('.my_action2').my_cus_fn();

我希望只使用JavaScript编写它。

我没有找到任何解决方法。有人能帮我吗？

期望得到像下面这样的东西

document.getElementById('my_action1').my_cus_fn();

- Arjun Raj

---

$('#my_action1') 是 jQuery。您也想要使用普通的 JavaScript 吗？ - Banana

@Banana 是的，在普通的Javascript中。 - Arjun Raj

使用jQuery的代码是“纯JavaScript”。jQuery是一个库，而不是一种语言。你的意思是“直接使用DOM”。 - T.J. Crowder

我知道jQuery是一个JavaScript库。 我需要了解如何编写类似于它的函数，而不需要任何“jQuery”的帮助。 - Arjun Raj

Answer 1

您可以在几乎所有浏览器上扩展元素的原型（甚至是IE8，我认为它适用于所有现代浏览器；不适用于IE6，对于IE7我不确定，但这些已经过时了）。像这样：

var ElementConstructor = window.Element || window.HTMLElement;
ElementConstructor.prototype.my_cus_fn = function() {
    // Your code here
};

Prototype库可以实现这一点（这也是它得名的原因）。只需注意可能会与其他人的操作冲突，或者与新规范添加到元素的新功能冲突。因此，我建议在函数名称上使用某种可能唯一的前缀。（值得一提的是，在Prototype的重大开发停止之前的几年里，我知道当时的维护者们正在认真考虑不再使用原型扩展而改用包装的方式，就像jQuery那样。）

完整示例：

<div id="foo">This is the element</div>
<script>
  (function() {
    "use strict";

    var ElementConstructor = window.Element || window.HTMLElement;
    ElementConstructor.prototype.my_cus_fn = function() {
      this.style.color = "green";
    };

    document.getElementById("foo").my_cus_fn();
  })();
</script>

如果您要编写多个扩展程序，我建议您将它们包装在一个作用域函数中，如下所示，并给函数命名（由于使用命名函数表达式会出现IE8问题，我使用函数声明）：

(function(ctor) {
    var p = ctor.prototype;

    p.my_cus_fn = my_cus_fn;
    function my_cus_fn() { /* ... */ }

    p.my_other_fn = my_other_fn;
    function my_other_fn() { /* ... */ }

})(window.Element || window.HTMLElement);

- T.J. Crowder

---

使用上面的代码，创建了类似于原帖所要求的东西...（http://jsfiddle.net/cRAR5/） - Bhavik

@T.J.Crowder：为什么你把函数写在 (function() {}) 里面？这很重要吗？我感觉不写也能运行。 - Arjun Raj

@ArjunRaj：纯粹是为了封装内容，以便我可以在其中放置私有内容，并作为传递“ctor”的便捷方式。 - T.J. Crowder

@T.J.Crowder 这对我来说已经足够了。但是这在使用 document.getElementsByClassName() 时无法工作（它返回一个元素数组）。如果您知道如何解决这个问题，请分享一下。这将有助于某些人的某一天。 - Arjun Raj

@ArjunRaj：它可以用于返回的集合中的元素，但是对于向集合本身添加方法是不起作用的。在大多数浏览器上，您可以通过扩展NodeList.prototype来实现，但这在IE8上不起作用（我不知道IE9+）。顺便说一句：不要使用getElementsByClassName，它的支持不好。改用querySelectorAll。它在所有现代浏览器（包括IE8+）中都有支持。 - T.J. Crowder