Question

我一直在网上寻找如何做到这一点。我试图在香草JavaScript中使Jquerys .html（）函数。我想重新创建，以便可以更好地理解它。我尝试了以下方法，但似乎无济于事，我只是不明白自己在做什么错。

let $ = function(ele) {
    if (ele.charAt(0) == '.' || ele.charAt(0) == '#') {
    let newEle = cut(ele,0);
    if (ele.charAt(0) == '#')
        get(newEle);
    else
        return document.getElementsByClassName(newEle);
  } else
    return document.getElementById(ele);
}

$.prototype.html = function(html) {
    this.innerHTML = html;
}

$('test').html('hey');
$('.hey')[0].html('hey');
function cut(string,num) {
    let a = string.slice(0,num);
  let b = string.slice(num + 1,string.length);
  return a + b;
}

它不起作用，控制台日志报告此错误：

Uncaught TypeError: $(...).html is not a function

请先帮助和感谢。

Answer 1

这里的问题是您从$函数返回的内容。考虑一下：document.getElementsByClassName和document.getElementById返回dom元素，而dom元素没有.html函数。这就是为什么您得到此错误。

您需要返回的是一个对象，一个包装器，一个.html函数以及要修改的dom元素的闭包。

Answer 2

由于您要从dill返回对象，因此您将覆盖$的默认行为；而不是生成新创建的对象，而是生成从new $返回的对象。

相反，您想记住存储在$（新创建的对象）中的数组或Set中的getElementsByClassName / getElementById调用的结果），然后在this中使用该数组或Set（因为您要在设置新HTML的情况下遍历所有匹配的元素）。

旁注：由于您仍在使用ES2015 +功能（html），因此您可能想使用更简单的class语法，而不是单独的let声明并分配给{{ 1}}：

function

如何在Vanilla JavaScript中制作Jquery的.html（）函数

2 个答案: