javascript - 如何插入像 forEach、reduce 之类的参数？

Question

我正在尝试重新发明轮子，有点......只是尝试重新制作一些 jquery 函数......我已经走到了这一步

var ye = function (ele) {
    if (ele[0] == "#")
    {
        return document.getElementById(ele.slice(1));
    }
    else if (ele[0] == ".")
    {
        // returns an array, use index
        return document.getElementsByClassName(ele.slice(1));
    }
    else
    {
        // also returns an array
        return document.getElementsByTagName(ele);
    }
}

但是我如何使用这个元素作为“ye”原型(prototype)中函数的参数。例如，如果我想设置 fontsize 如何获得 dom 元素，如下所示:

ye.prototype.fontSize = function (ele)
{
    ele.style.fontSize = "30px";
}

只是添加一点以使标题相关。forEach 在回调函数中插入三个参数，就像我希望将 ele 插入到 fontSize 函数中一样。

Answer 1

Just messing around trying to remake some jquery functions...

...but how can I use this element as a parameter in a function in the 'ye' prototype..

这是一个非常粗略且简单的开始方法......

1. 创建一个具有名为 elems 的属性的函数，该属性是一个数组，将存储选定的 DOM 元素。

像这样:

var oye = function() { this.elems = []; };

在其原型(prototype)上，您可以创建要公开的自定义函数。例如函数 fontSize (如您的问题中所示)，迭代我们之前创建的 elems 数组属性，更改存储在其中的每个 DOM 元素的字体大小。 this 指向调用此函数的实例，稍后我们将确保其类型为 oye。要启用链接，我们只需通过 this 返回自身即可。

像这样:

oye.prototype.fontSize = function(size) {
    this.elems.forEach(function(elem) {
        elem.style.fontSize = size;
    });
    return this;
};

现在创建名为 ye 的选择器函数。其目的是选择 DOM 元素，将它们存储在 oye 类的新实例的 elems 数组属性中，然后返回该实例。我们调用数组原型(prototype)的切片来将nodeList转换为数组。

像这样:

var ye = function(elem) {
    var newOye = new oye;
    newOye.elems = [].slice.call(document.querySelectorAll(elem));
    return newOye;
};

现在开始在您的代码中使用它。就像 jQuery 一样，您可以使用 ye 进行选择，然后调用您的自定义函数。

像这样:

ye("#elem1").fontSize('30px');

就像 jQuery 一样，您也可以链接多个自定义函数，如下面的完整工作示例所示:

ye("P").fontSize('24px').dim(0.4);

下一步:请记住，这只是一个非常粗略的示例。现在，您可以使用从选择器函数本身返回新对象的 init 模式将步骤 1 和 2 合并到单个调用中。了解有关 Javascript 和最佳实践的更多信息。

这是一个示例工作演示:

var oye = function() { this.elems = []; };
oye.prototype.fontSize = function(size) {
    this.elems.forEach(function(elem) {
        elem.style.fontSize = size;
    });
    return this;
};
oye.prototype.dim = function(value) {
    return this.elems.forEach(function(elem) {
      elem.style.opacity = value;
    });  
    return this;
};

var ye = function(elem) {
    var newOye = new oye;
    newOye.elems = [].slice.call(document.querySelectorAll(elem));
    return newOye;
};

ye("#elem1").fontSize('30px');
ye(".elem2").fontSize('20px');
ye("P").fontSize('24px').dim(0.4);

<div>This is normal text.</div>
<div id="elem1">size changed via id.</div>
<div class="elem2">size changed via class.</div>
<div class="elem2">size changed via class.</div>
<p>size changed and dimmed via tag name</p>
<p>size changed and dimmed via tag name</p>