Question

例如，有一个对象 V ，它将元素id，类或标记名称作为参数并在其上应用函数，如下所示。

var V = function(elem) {
        // logic to getElementBy ID or class or tag name and return it
        if(type === '#') {
            // get by id
            domElem = document.getElementById(elem.slice(1));
        } else if(type === '.') {
            // get by class
            domElem = document.getElementsByClassName(elem.slice(1));
        } else if(typeof type === 'string' && (type !== '#' || type !== '.')) {
            // get by elem type
            domElem = document.getElementsByTagName(elem);
        }
        return domElem;
    }

现在当你得到一个元素时，就像这样：var myDiv = V('#someDivElement'); 它将返回div元素。现在，我还在返回的对象上运行一个方法。例如，我想运行一个只在div中附加一个段落标记的方法asdf，如下所示：

V.prototype.asdf = function() {
        this.appendChild('<p>I am an awesome child!</p>');
        return this;
    }

理想情况下，它适用于我：

var myDiv = V('#someDivElement');

但下面的行似乎没有执行。

myDiv.asdf();

我在这里做错了什么？

Answer 1

您的V('#someDivElement');返回domElem，但在asdf的原型上定义了V。

您可能想要的是以下constructor function：

var V = function(elem) {
        // logic to getElementBy ID or class or tag name and return it
        if(type === '#') {
            // get by id
            this.domElem = document.getElementById(elem.slice(1));
        } else if(type === '.') {
            // get by class
            this.domElem = document.getElementsByClassName(elem.slice(1));
        } else if(typeof type === 'string' && (type !== '#' || type !== '.')) {
            // get by elem type
            this.domElem = document.getElementsByTagName(elem);
        }
    }

var myDiv = (new V('#someDivElement')).domElem;

Answer 2

您将V定义为返回DOM元素的函数，然后尝试将方法添加到V＆＃39的原型中，然后只调用它并获取值。

但是当你使用V作为一个班级时，你只能使用原型 - 使用＆＃39; new＆＃39;关键词。所以试试这个：

var V = function(elem) {
    this.elem = document.getElementsByTagName(elem);
    ... plus whatever else here ...
}

V.prototype.asdf = function() {
    this.elem.innerHTML = "Hi Dave";
};

var myElem = new V('.someselectorOrElem');
myElem.asdf();

看看V不再用作函数，而是作为类构造函数使用？但是......它不是你所追求的答案，你希望它像jquery一样工作。

因此，在上面的代码之后，您可以在此之后定义一个名为$ V的函数，它构造一个并返回它，如下所示：

function $V(selectorOrElem) {
    return new V(selectorOrElem);
}

并将其称为：

var myElem = $V(".someSelector");

然后你有类似jquery的行为。

Answer 3

你要返回的只是来自JS的一个普通对象现在返回并记录真正的jQuery，它返回自我的对象，有助于链接。所以你需要在上下文中包装对象。就这样。

创建像jQuery这样的对象

3 个答案: