是否有與 jQuery 的 $.fn.extend 等效的純 Javascript？

Question

在 jQuery 我這樣做：

$.fn.extend({
   hello: function() {console.log(this + ' says hello world.')}
});

進而

$('div').hello();

我可以在純 javascript 中執行此操作而無需為此加載整個 jQuery 嗎？

Answer 1

好吧，從技術上講，您可以執行以下操作：

function extendingQuerySelector(selector, extension) {
    var el = document.querySelector(selector);
    for(var key in extension) {
        if(extension.hasOwnProperty(key)) {
            el[key] = extension[key];
        }
    }
    return el;
}

盡管擴展基本 DOM 對象似乎不是一個好主意。 這里沒有 jQuery 包裝器，盡管您當然可以制作這樣的包裝器。

Answer 2

在 Javascript 中，您也可以通過連接到HTML 元素本機函數的原型來擴展選擇器函數。 例如，我將使用以下代碼解決您的問題：

HTMLDivElement.prototype.hello = function()
  {
    console.log(this+" says hello world.");
  }
document.querySelector('div').hello()

對於錨元素，我會這樣做：

HTMLAnchorElement.prototype.my_func=function()
  {
    console.log(this.nodeName);
  }
document.querySelector("a").my_func()

上面的代碼將在瀏覽器控制台中打印所選錨元素的節點名稱。 您可以使用純 Javascript 探索其他 HTML 選擇器函數。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement