Question

我想创建一个实用程序对象/函数size，它给出一个dom元素myDom并调用另一个函数big或small来改变内联样式myDom。

目前我对实际将myDom传递给函数big或small的解决方案感兴趣，因此可以进行内联样式修改。

我想知道哪种JS模式可以帮助我实现这个结果和一个简短的例子。

window.size(myDom).big();

window.size(myDom).small();

Answer 1

您可以使用big和small方法返回对象，并使用闭包来访问myDom：

function size(myDom) {
    return {
        big: () => { myDom.style.... }
        small: () => { .... }
    };
}

或者您可以创建带有myDom的类作为构造函数参数（将其存储在字段中）和适当的方法。

Answer 2

如果要使用ES6类，可以返回包含元素的类的实例：

class Sizeable {
    constructor(el) {
        this.el = el;
    }

    big() {
        // do something with this.el
    }

    small() {
        // do something with this.el
    }
}

window.size = function(el) {
    return new Sizeable(el);
};

当然，这大致相当于：

function Sizeable(el) {
    this.el = el;
}

Sizeable.prototype.big = function() {
    // do something with this.el
}

Sizeable.prototype.small = function() {
    // do something with this.el
}

window.size = function(el) {
    return new Sizeable(el);
};

Answer 3

size方法必须将一个对象作为其返回值。

该对象必须包含名为big和small的属性。

它还应该包含您想要提供给

的任何其他数据（存储在其他属性中）

每个属性的值必须是函数。

这些函数可以从创建它们的函数中读取变量（作为闭包），也可以使用this关键字从对象中读取数据（您需要将该数据存储在其他属性中）

Answer 4

这意味着您的myDom对象需要使用big和small方法进行扩展，size()必须返回myDom对象。

如果你不能轻易调整myDom对象，那么愚蠢的方法就是动态分配函数：

function big() {
    //code
}

function small() {
    //code
}

稍后在代码中的某处：

myDom.big = big;
myDom.small = small;

但通常你的size（）必须只返回myDom：

return myDom;

和myDom必须将big（）和small（）方法定义为其中的一部分。

JS中的连接函数

4 个答案: