将静态函数 (IIFE) 包装到原型中

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 变成带有原型的 "class"，但我有点赶时间运行ch，所以我正在寻找一种方法来做一个包装器来完成我需要的。

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

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

Answer 1

刚刚重写的代码：

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 2

I am thinking the best approach is to probably turn the Helper IIFE into a "class" with prototype, but I am a bit crunch on time...

我预计不会花很长时间。

I was thinking I can just take the function and not immediately execute it, and then somehow store that function into a prototyped function and utilize it that way.

Looking for ideas on how to best do this with minimal code change.

class 模式只是 JavaScript 中的一种模式，您可以像使用它一样使用 Helper 作为其他对象的原型，它与您的 "minimal changes" 要求。只需使用 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();

如果在init的末尾加上return this;，可以更简洁：

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();

实例：

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);

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

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

或者，将它包装在一个 returns 函数中（这里我还包含了对 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 3

另一种方法，从 arguments 对象中检索参数：

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

将静态函数 (IIFE) 包装到原型中

Wrap static function (IIFE) into prototype

javascript

class

iife