Question

我写了一个函数，我认为我只需要处理1个对象，但事实证明我需要超过1个。我将使用一个简单的例子：

var Helper = (function () {
    return {
        el: null
        init: function(el) {
            this.el = el;
        }
        doStuff: function(){
            // Modify this.el in someway
        }
    };
}());

然后，我只需在页面加载时Helper.init(el)，然后在需要时运行Helper.doStuff()。

现在我有三个需要此功能的元素。

我的第一个想法是让它做Helper.init([el1,el2,el3])并让它在一系列元素上工作，但我可能想要分别处理每个元素。

我认为最好的方法是将Helper IIFE变成一个＆＃34;类＆＃34;原型，但我有点紧张，所以我正在寻找一种方法来制作一个包装来完成我需要的东西。

我以为我可以只接受该函数而不是立即执行它，然后以某种方式将该函数存储到原型函数中并以这种方式使用它。

寻找有关如何以最少的代码更改来做到这一点的想法。

Answer 1

我认为最好的方法是将Helper IIFE变成一个＆＃34;类＆＃34;原型，但我有点紧张......

我不希望这花费很长时间。

我在想我可以只使用该函数而不是立即执行它，然后以某种方式将该函数存储到原型函数中并以这种方式使用它。

寻找有关如何以最少的代码更改来做到这一点的想法。

类模式只是JavaScript中的一种模式，您可以使用Helper就像它作为其他对象的原型一样，它匹配您的＆＃34;最小变化＆＃34;需求。只需使用Object.create：

var helper1 = Object.create(Helper);
helper1.init(el);
var helper2 = Object.create(Helper);
helper2.init(el2);
var helper3 = Object.create(Helper);
helper3.init(el3);

// ...
helper1.doStuff();
helper2.doStuff();
helper3.doStuff();

如果您将return this;添加到init的末尾，则可以更简洁：

var helper1 = Object.create(Helper).init(el);
var helper2 = Object.create(Helper).init(el2);
var helper3 = Object.create(Helper).init(el3);

// ...
helper1.doStuff();
helper2.doStuff();
helper3.doStuff();

直播示例：

＆＃13;

var Helper = (function () {
    return {
        el: null,
        init: function(el) {
            this.el = el;
            return this;
        },
        doStuff: function(){
            this.el.style.color = "green";
            this.el.style.fontWeight = "bold";
        }
    };
}());
var helper1 = Object.create(Helper).init(document.getElementById("el1"));
var helper2 = Object.create(Helper).init(document.getElementById("el2"));
var helper3 = Object.create(Helper).init(document.getElementById("el3"));

// ...
setTimeout(function() {
  helper1.doStuff();
}, 400);
setTimeout(function() {
  helper2.doStuff();
}, 800);
setTimeout(function() {
  helper3.doStuff();
}, 1200);

＆＃13;

<div id="el1">el1</div>
<div id="el2">el2</div>
<div id="el3">el3</div>

＆＃13;

您甚至可以直接在第一个Helper上使用el，进一步减少代码更改，但我不推荐它。

或者，将它包装在一个返回它的函数中（这里我还包括对init的更改）：

function getHelper() {
    var Helper = (function () {
        return {
            el: null,
            init: function(el) {
                this.el = el;
                return this; // <============== Added
            },
            doStuff: function(){
                // Modify this.el in someway
            }
        };
    }());
    return Helper;
}

然后你需要三个地方：

var helper1 = getHelper().init(el);
var helper2 = getHelper().init(el2);
var helper3 = getHelper().init(el2);

// ...
helper1.doStuff();
helper2.doStuff();
helper3.doStuff();

旁注：除非您的内容没有显示在对象初始化程序之外，否则您根本不需要IIFE ...

Answer 2

重写代码：

function Helper (el) {
    this.el = el;
}
Helper.prototype = {        
    doStuff: function(){
            // Modify this.el in someway
    }
};

var helper1 = new Helper(el1);
var helper2 = new Helper(el2);
var helper3 = new Helper(el3);

helper1.doStaff();
helper2.doStaff();
helper3.doStaff();

Answer 3

另一种方法是从arguments object：

中检索参数

var Helper = (function () {
    return {
        el: null
        init: function() {
            this.el = Array.from(arguments)
        }
        doStuff: function(){
            this.el.forEach(el => {
                // Modify el in someway
            });
        }
    };
}());

将静态功能（IIFE）包装成原型

3 个答案: