Javascript 如何插入forEach、reduce等参数？

我想重新发明轮子，有点。。只是在尝试重新生成一些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”原型中函数的参数呢。例如，如果我想制作fontsize，我如何获得如下所示的dom元素：

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

---

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

在设置样式之前使用ye函数调用，类似于：

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

---

返回的对象应该更丰富，如下所示：

var baseObject = {
    // Will be used for the element:
    element: null, 
    width: function(){ return this.element.getwidth(); /* or anything similar*/ }
    // ... Further methods
}

然后在

ye

函数中：

var ye = function (ele) {
    var yeElem = clone(baseObject); // See comment below!!

    if (ele[0] == "#") { yeElem.element = document.getElementById(ele.slice(1)); }
    else if (ele[0] == "."){ /*...*/ }
    else { /*...*/ }

    return yeElem;
}

这样新元素就内置了方法。 至于使用的clone（）方法，它不存在，但您必须使用一些clone方法。

---

我推荐Loadsh的

。.cloneDeep（）

（）。

关于你的问题，我可能认为你对JavaScript不熟悉，或者不熟悉它的基本概念。在这种情况下，我不确定重新发明轮子是件好事

既然您已经引用了

jQuery

，那么您可以看看它的源代码来了解它是如何工作的：

话虽如此，我还是会这样做：

var ye = function ( ele ) {
    return new ye.prototype.init(ele);
};

ye.prototype.init = function( ele ) {
    this._elements = [].slice.call(document.querySelectorAll(ele));
    return this;
};

ye.prototype.forEach = function( fn ) {
    this._elements.forEach(fn);
    return this;
};

ye.prototype.fontSize = function( fontSizeValue ) {
    this.forEach(function (ele) {
        ele.style.fontSize = fontSizeValue;
    });
    return this;
};

相关用法如下所示：

var myCollection = ye('.someClassName');

myCollection.forEach(function ( item, index ) {
    console.log(item.style.fontSize);
});

myCollection.fontSize('45px');

myCollection.forEach(function ( item, index ) {
    console.log(item.style.fontSize);
});

只是在尝试重新生成一些jquery函数时乱来

…但是如何将此元素用作“ye”原型中函数的参数

这里是一个非常粗糙和简单的方式开始

使用名为

elems

的属性创建一个函数，该属性是一个数组，将存储选定的DOM元素

像这样：

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

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

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

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

在其原型上，您可以创建要公开的自定义函数。e、 g.函数

fontSize

（如您的问题所示），迭代前面创建的

elems

数组属性，更改存储在中的每个DOM元素的字体大小

this

指向调用此函数的实例，稍后我们将确保其类型为

oye

。要启用链接，我们只需通过

this

返回自身

像这样：

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

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

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

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

现在创建名为

ye

的选择器函数。这用于选择DOM元素，将它们存储在

oye

类的新实例的

elems

数组属性中，并返回实例。我们调用数组原型的

切片

，将节点列表转换为数组

像这样：

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

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

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

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

现在开始在代码中使用它。与jQuery一样，您可以使用

ye

选择并调用自定义函数

像这样：

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

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

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

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

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

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

下一步：记住这只是一个非常粗糙的例子。现在，您可以使用

init

模式从选择器函数itseld返回新对象，将步骤1和步骤2合并到单个调用中。了解有关Javascript和最佳实践的更多信息

这是一个示例工作演示：

var-oye=function（）{this.elems=[]；}；
oye.prototype.fontSize=函数（大小）{
this.elems.forEach（函数（elem）{
elem.style.fontSize=大小；
});
归还这个；
};
oye.prototype.dim=函数（值）{
返回此.elems.forEach（函数（elem）{
elem.style.opacity=值；
});  
归还这个；
};
var ye=函数（elem）{
var newOye=新oye；
newOye.elems=[].slice.call（document.queryselectoral（elem））；
返回纽瓦耶；
};
ye（#elem1”）.fontSize（'30px'）；
ye（“.elem2”）.fontSize（'20px'）；
ye（“P”）.fontSize（“24px”）.dim（0.4）
这是普通文本。
通过id更改大小。
大小通过类更改。
大小通过类更改。
通过标记名更改大小并变暗

通过标签名称更改大小并变暗